Download lenguaje de programación iii

LENGUAJE DE PROGRAMACIÓN III
TRANSVERSAL
FACULTAD DE CIENCIAS BÁSICAS E INGENIERÍA
LENGUAJE DE PROGRAMACIÓN III
TRANSVERSAL
ElmódulodeestudiodelaasignaturaLenguajedeprogramaciónIIIespropiedaddelaCorporaciónUniversitaria
Remington.Lasimágenesfuerontomadasdediferentesfuentesqueserelacionanenlosderechosdeautorylas
citasenlabibliografía.Elcontenidodelmóduloestáprotegidoporlasleyesdederechosdeautorquerigenal
país.
Estematerialtienefineseducativosynopuedeusarseconpropósitoseconómicosocomerciales.
AUTOR
CesarAugustoJaramilloHenao
IngenierodeSistemas
Cesar.jaramillo@remington.edu.co
Nota: elautorcertificó(demaneraverbaloescrita)Nohaberincurridoenfraudecientífico,plagiooviciosde
autoría;encasocontrarioeximiódetodaresponsabilidadalaCorporaciónUniversitariaRemington,ysedeclaró
comoelúnicoresponsable.
RESPONSABLES
JorgeMauricioSepúlvedaCastaño
DecanodelaFacultaddeCienciasBásicaseIngeniería
jsepulveda@uniremington.edu.co
EduardoAlfredoCastilloBuiles
Vicerrectormodalidaddistanciayvirtual
ecastillo@uniremington.edu.co
FranciscoJavierÁlvarezGómez
CoordinadorCUR-Virtual
falvarez@uniremington.edu.co
GRUPODEAPOYO
PersonaldelaUnidadCUR-Virtual
EDICIÓNYMONTAJE
Primeraversión.Febrerode2011.
DerechosReservados
Segundaversión.Marzode2012
Terceraversión.noviembrede2015
EstaobraespublicadabajolalicenciaCreativeCommons.
Reconocimiento-NoComercial-CompartirIgual2.5Colombia.
2
LENGUAJE DE PROGRAMACIÓN III
TRANSVERSAL
TABLA DE CONTENIDO
Pág.
1
MAPADELAASIGNATURA..............................................................................................................................5
2
UNIDAD1REDES.............................................................................................................................................6
2.1.1
3
2.2
TEMA1ConceptosBásicos......................................................................................................................7
2.3
TEMA2TCP/UDP...................................................................................................................................8
2.4
TEMA3APLICACIÓN..............................................................................................................................12
2.4.1
EJERCICIODEAPRENDIZAJE...........................................................................................................14
2.4.2
TALLERDEENTRENAMIENTO........................................................................................................15
UNIDAD2INTEGRACIONCONHIBERNATE...................................................................................................16
3.1.1
4
RELACIÓNDECONCEPTOS..............................................................................................................6
RELACIÓNDECONCEPTOS............................................................................................................16
3.2
TEMA1CONCEPTOSDEORM...............................................................................................................17
3.3
TEMA2RELACIONES.............................................................................................................................18
3.4
TEMA3CLAVESPRIMARIASYTIPOSDEDATOS....................................................................................18
3.5
TEMA4OBJETOSYVALIDACIONES.......................................................................................................20
3.6
TEMA5ARQUITECTURA........................................................................................................................21
3.6.1
EJERICICIODEAPRENDIZAJE..........................................................................................................53
3.6.2
TALLERDEENTRENAMIENTO........................................................................................................53
UNIDAD3INTRODUCCIONALAPROGRAMACIONWEB...............................................................................54
4.1.1
RELACIÓNDECONCEPTOS............................................................................................................54
4.2
TEMA1HTML/HTML5.........................................................................................................................55
4.3
TEMA2CSSHOJADEESTILOENCASCADA...........................................................................................72
4.4
TEMA3JAVASCRIPT..............................................................................................................................79
3
LENGUAJE DE PROGRAMACIÓN III
TRANSVERSAL
4.5
TEMA4JSP/SERVLETS.........................................................................................................................83
4.6
TEMA5JAVABEANS..............................................................................................................................96
4.7
TEMA6CRUD........................................................................................................................................99
4.7.1
EJERICICIODEAPRENDIZAJE........................................................................................................113
4.7.2
TALLERDEENTRENAMIENTO......................................................................................................113
5
PISTASDEAPRENDIZAJE..............................................................................................................................114
6
GLOSARIO....................................................................................................................................................115
7
BIBLIOGRAFÍA..............................................................................................................................................117
4
LENGUAJE DE PROGRAMACIÓN III
TRANSVERSAL
5
1 MAPA DE LA ASIGNATURA
6
LENGUAJE DE PROGRAMACIÓN III
TRANSVERSAL
2 UNIDAD 1 REDES
2.1.1
RELACIÓN DE CONCEPTOS
Escribaladefinicióndetodoslosconceptosplateadosenelmapaconceptual
Servidor:Esunaplicativogestordelainformación,proveelosrecursosquesenecesitaporpartedeuncliente
Cliente:Esunaplicativoquesolicitainformaciónaunservidor
7
LENGUAJE DE PROGRAMACIÓN III
TRANSVERSAL
DirecciónIP:Eslaubicaciónúnicadentrodeunared
TCP:Protocolodecontroldetransmisión
UDP:Protocolodeniveldetransporte
OBJETIVOGENERAL
Identificarlascaracterísticasdelaprogramaciónenred,losrecursosdecomunicaciónlosprotocolosyelmanejo
delosdatos.
OBJETIVOSESPECÍFICOS
IdentificarlascaracterísticasprincipalesparaprogramarenRed
Identificarloscomponentesesencialesparalaprogramaciónenred
Identificarloscomandosmáscomunesparalaprogramaciónenred
2.2 TEMA 1 CONCEPTOS BÁSICOS
Muchosdelosaplicativosqueescribimosestándiseñadosparaserutilizadosenunasolamáquina,estoesmuy
limitanteporelcrecimientoconstantedelasempresasydeestarconectadoalosdistintosrecursosquesepueden
utilizar.
Paraestepropósitodebemosdefamiliarizarnosconelmanejodelosprotocolos,esencialmentedosdeellosque
nos permiten realizar esta tarea, TCP (Transmission Control Protocol) y UDP (User Datagram Protocol), estos
protocolosimplementanloqueconocemoscomolacapadetransporte.
8
LENGUAJE DE PROGRAMACIÓN III
TRANSVERSAL
2.3 TEMA 2 TCP / UDP
TCP
LacomunicaciónTCPesanálogaaunacomunicacióntelefónica,enqueunusuariollamayelotrodeterminao
noatenderlo,cuandodecideatenderloestablecenuna“conversación”deformabidireccional.
DentrodelosprocesosmáscomunesdeestetipodeprotocoloestánFTP,Telnet,HTTP,enestosprocesoses
fundamentalrespetarelordendeenvíodelastareas.
UDP
LacomunicaciónestablecidamedianteesteprotocolonoesconfiablenigarantizadacomoenelcasodeTCP,
esto debido a que UDP no es un protocolo de conexión, en el UDP se envían paquetes de datos llamados
datagramas, el envío de estos es comparable con el envió del correo o correspondencia tradicional, en este
ejemplonosencontramosqueelenvíodeunacartanonospreocupaenquéordenllegaasudestino.
PUERTO
Lospuertossonlosmecanismosparahacerllegarlainformaciónalaplicativoquelosolicito,cadapctieneuna
únicaconexiónfísicapormediodelacualserecibelainformación,lospuertosconstituyenunadireccióninterna
quedireccionaunprocesodentrodelequipodecómputo.
DIRECCIÓNIP
UnadirecciónIP(InternetProtocol),esunnumerode32bitsquedireccionademaneraúnicaaunpcdentrode
lared.
APLICACIÓNCLIENTE/SERVIDOR
LENGUAJE DE PROGRAMACIÓN III
TRANSVERSAL
Esunordenjerárquicodelasaplicacionesdeunared,unaaplicaciónclientesolicitainformaciónaunaaplicación
servidor,esteúltimoproveerálosserviciosaunclientesegúnlascaracterísticasdelaplicativogestor.
SOCKETS
Esconocidocomounodelosextremosenunacomunicacióndeprogramas,eslaformadecomunicarunservidor
conuncliente,estesocketdireccionalainformacióndeformaúnicaalaaplicaciónsolicitante.
SERVIDOR
Esunprogramaquepermitelaqueseconectenlosdistintosprogramasclientes,estoseconocecomo“escuchar”
uncliente”
CLASESCOMUNES
ServerSocket:Seutilizarparaesperaryescucharlallegadadelosclientes
Socket:Sepuedeentablarlacomunicacióncliente/servidor
EJEMPLODESERVIDOR
9
LENGUAJE DE PROGRAMACIÓN III
TRANSVERSAL
AutoriaPropia
AutoriaPropia
10
LENGUAJE DE PROGRAMACIÓN III
TRANSVERSAL
ElservidorinstanciaunServerSocketconunpuertoaleatorioquecomoejemplosetendráel5432,lainstrucción
acepteslaencardadeesperarlaconexióndeuncliente.LainstruccióngetInnetAddresstomaralaIPdelcliente,
el manejo de los datos de la forma tradicional envia solo bytes pero con las clases ObjectInputStream y/o
ObjectOutputStreamseprocesacomoobjetos,estasclasesleenyescribenobjetospormediodelared.
CLIENTE
AutoriaPropia
AutoriaPropia
11
12
LENGUAJE DE PROGRAMACIÓN III
TRANSVERSAL
Paraelclientecomunicarseconelservidor,setieneunpuertoyuna direcciónIP,paraestecasoseaplicaun
servidorlocal.
RMI
RMI(RemoteMethodInvocation),esunatecnologíadeinvocaciónremotademétodos,comosunombreloindica
invocamétodos,cuandoestosseencuentranenunamáquinavirtualylosllamadeotramáquinavirtual,estose
conocecomoobjetoremoto.
Elservidorseencargadeinstanciarlosobjetosremotosyloshacedisponiblesalcliente,estoseubicaenuna
colecciónorepositoriodeobjetos.
Losobjetosremotossonlospublicadosporelservidoralosquesepodránaccederporelclienteremotamente,
ambasmaquinasutilizanparaestatarealamáquinavirtual,alahoradeconsiderarqueunobjetosearemoto
deberáheredarlaclasejava.rmi.UnicastRemoteObject.
2.4 TEMA 3 APLICACIÓN
AcontinuacionseveraunpequeñoejemplodeRMI
ParaestosecreaunproyectollamadoRMI,unarchivoObjetoRomoto.java,estearchivoesunainterfazydara
caracteristicasgeneralesdelproyecto
AutoriaPropia
LENGUAJE DE PROGRAMACIÓN III
TRANSVERSAL
ElseguintearchivoesunaclastradicionalllamadaObjetoRemotoImplementacion.java
AutoriaPropia
ServidorRMI
AutoriaPropia
ClienteRMI
13
14
LENGUAJE DE PROGRAMACIÓN III
TRANSVERSAL
AutoriaPropia
2.4.1
EJERCICIO DE APRENDIZAJE
Nombredeltallerdeaprendizaje:Enviar/Recibir
Datosdelautordeltaller:CesaraugustoJaramilloHenao
Escribaoplanteeelcaso,problemaopregunta:
Sepuedeenviaryrecibirinformaciónyprocesarlosdatosdeformasegura.
Solucióndeltaller:
Si,siseaplicanlosestándaresylasnormasapropiadassepodráncrearaplicacionesqueenviaryrecibandatos
demaneraoptima
LENGUAJE DE PROGRAMACIÓN III
TRANSVERSAL
2.4.2
TALLER DE ENTRENAMIENTO
Nombredeltaller:ControldeNotas
Modalidaddetrabajo:Individual
Actividadprevia:
Repaselosmétodosyprocesosdeenvíoyrecepcióndeinformación
Describalaactividad:
Realiceuningresodenotasdeunalumnoyelclientedebedetenerlaopcióndeconsultaryhacer
unreclamosobrelanotaobtenida.
15
16
LENGUAJE DE PROGRAMACIÓN III
TRANSVERSAL
3 UNIDAD 2 INTEGRACION CON HIBERNATE
3.1.1
RELACIÓN DE CONCEPTOS
Escribaladefinicióndetodoslosconceptosplateadosenelmapaconceptual
ORM:Esunmapeodeobjetosrelacionales
ClavesPrimarias:Elementoprincipaldeunatablaquenopermitequeserepitainformacióndeidentificación
Tiposdedatos:Elementosquepermitenlaclasificacióndelainformación.
Asistente:Componentequepermiterealizarprocesoscomplejosdeunaformasimple
17
LENGUAJE DE PROGRAMACIÓN III
TRANSVERSAL
Framework:Herramientaquepermitequelaelaboracióndeunaplicativoserealicedeunamaneramássimpley
controlada
OBJETIVOGENERAL
Manejar nuevas herramientas de desarrollo como el Hibernate, conociendo las bondades de este tipo
complementoqueposibilitalaconstrucciónmásrápidodeunaplicativotradicional.
OBJETIVOSESPECÍFICOS
Identificarlasprincipalescaracterísticasdeunframework
Identificarloscomponentes,sentenciasyformasdetrabajoconHibernate
3.2 TEMA 1 CONCEPTOS DE ORM
ORM (Object Relational Mapping), es una técnica de programación para convertir datos entre el lenguaje de
programaciónorientadoaobjetosyelsistemadebasededatosrelacional.
VENTAJAS
Rapidezeneldesarrollo.
Abstraccióndelabasededatos
Reutilización
Seguridad
Mantenimientodelcódigo
Lenguajepropiopararealizarlasconsultas.
18
LENGUAJE DE PROGRAMACIÓN III
TRANSVERSAL
3.3 TEMA 2 RELACIONES
ELMAPEORELACIONAL
Laventajadeestossistemaseslareducciónconsiderabledecódigonecesarioparalograrloqueseconocecomo
persistencia de objetos, esto permite lograr una integración con otros patrones como el Modelo-VistaControlador.
En general los sistemas de información guardan datos en BD relacionales como Oracle, mysql, sqlServer, etc,
dentrodelosprocesosmáscomunestenemosqueundepartamentodeunaempresatienevariosempleados,
perounempleadopertenecesoloaundepartamento.
Hibernateresuelvealgunosinconvenientesconlarepresentacióndeunmodelorelacionalmedianteunconjunto
deobjetos,enestecasolosmodelosrepresentantablasylosatributosdelasclasessonloscamposdelastablas.
ParamapearunmodelorelacionalsepuedenutilizarformatosXMLoconanotaciones.
3.4 TEMA 3 CLAVES PRIMARIAS Y TIPOS DE DATOS
Dentrodelascaracterísticasdelhibernateestánsustiposdedatos
•
integer
•
long
LENGUAJE DE PROGRAMACIÓN III
TRANSVERSAL
•
short
•
string
•
float
•
date
•
double
•
time
•
character
•
timestamp
•
byte
•
text
•
boolean
•
binary
•
yes_no
•
big_decimal
•
true_false
•
big_integer
Muchosdeellosmuyconocidosporeltrabajodejavaotrosnotantoymáscomunesenestetipodeframework.
Estosdatostienenunaclasificacióncomo
•
Fechayhora
•
Date,timeytimestamp
•
Boolean
•
Yes_no,true_false,Boolean
•
Texto
•
Stringytext
GENERACIÓNDECLAVESPRIMARIAS
Hibernatetienemúltiplesformasdetratarlasclavesprimarias,lamássimpleescuandoeldesarrolladorindicala
clavequetendráelobjeto,esteprocesoseconocecomo“assigned”.
HibernateQueryLanguage
ElHQLesellenguajedeconsultasdelHibérnate,estetipodesentenciastienenalgunascaracterísticasquefacilitan
el uso de la herramienta, aunque hay que tener presente casos como la sensibilidad de las mayúsculas y
minúsculasqueenlassentenciascomotalnoinfluyen,teniendopresentequepuedeserSelect,seLect,selecTy
nopresentaríaningúninconvenienteeneltrabajo.
19
20
LENGUAJE DE PROGRAMACIÓN III
TRANSVERSAL
EsmuycomúnverenHibernatelainstrucciónfromsinprocesosprevioscomoseestáacostumbradoaotras
herramientaslomismoquelasunionesconlainstrucciónjoin.
Unejemplodeestetipodesentenciaes
Query=“fromempleadoorderbynombre”
DentrodelassentenciasJoinseencuentran
innerjoin
leftouterjoin
rightouterjoin
3.5 TEMA 4 OBJETOS Y VALIDACIONES
Las validaciones en cualquier tipo de lenguaje se convierten en elementos fundamentales para un trabajo
organizado,enhibernateescomúnencontrarquelasvalidacionesestánasociadasaanotaciones
@NotNull
Estapropiedadindicaquenopuedeestarnulo
@Size(min=n,max=m):
Estapropiedadcontrolaquelainformaciónnoseanulayquecontengaunmínimodecaracteresyunmáximo.
Otrasvalidacionesson
•
@AssertFalse
•
@Digits(integer=n,fraction=m)
•
@AssertTrue
•
@Future
21
LENGUAJE DE PROGRAMACIÓN III
TRANSVERSAL
•
@Past
•
@Pattern(regexp=“r”)
•
@Max(n)
•
@Size(min=n,max=m).
•
@Min(n)
•
@Email
•
@NotNull
•
@NotBlank
•
@Null
•
@Valid
3.6 TEMA 5 ARQUITECTURA
LaarquitecturaentérminosgeneralesdelHibenateeslasiguiente
LENGUAJE DE PROGRAMACIÓN III
TRANSVERSAL
AutoríaPropia
LuegodetenerunaBDorganizadaprocedemosconlaconfiguracióninicial
Despuésdehaberingresadoaleclipseyhabercreadounproyectodelaformatradicionalserealizalasiguiente
configuración,elproyectotendrácomonombrebiblioteca.
EnelmenúHelp/EclipseMarketPlace…
22
LENGUAJE DE PROGRAMACIÓN III
TRANSVERSAL
AutoriaPropia
SeprocedeabuscarlainstruccionSQLDevelopmenttools
23
LENGUAJE DE PROGRAMACIÓN III
TRANSVERSAL
AutoriaPropia
Apereceranunaseriedeopciones,lascualesconfirmaremos
24
LENGUAJE DE PROGRAMACIÓN III
TRANSVERSAL
AutoriaPropia
LuegoseprocedeconelprocesodeagregarHibernateybuscamoslainformaciondelamismamaneraenelHelp
/eclipsemarketPlace…
25
LENGUAJE DE PROGRAMACIÓN III
TRANSVERSAL
AutoriaPropia
Seaceptanlosterminosysefinaliza.
Sebuscanlaslibrerías
AutoriaPropia
26
LENGUAJE DE PROGRAMACIÓN III
TRANSVERSAL
Secopiaysepegandelasiguientemanera,secreaenelproyectounfolderconelnombredeLibydentrodeesta
sepeganlaslibreriasseleccionadas.
LUEGOENELMENUWINDOWS/PREFERENCES
AutoriaPropia
Estaeslaconfiguraciondelaconexionparaelsistema.
SeseleccionaMySQLcomoherramientadetrabajo
27
LENGUAJE DE PROGRAMACIÓN III
TRANSVERSAL
AutoriaPropia
AutoriaPropia
28
LENGUAJE DE PROGRAMACIÓN III
TRANSVERSAL
AutoriaPropia
Acaseseleccionaelconectorquetengamosdisponibleoloagregamossinoestadentrodelalista.
Posterioraestaconfiguracionbasicasecontinuaconlasperspecticas
Enelmenudewindows/perspective
29
LENGUAJE DE PROGRAMACIÓN III
TRANSVERSAL
AutoriaPropia
AutoriaPropia
Luegodeestoenlaestructuradelprogramaencontramosunaseriedeopcionesnuevas
30
LENGUAJE DE PROGRAMACIÓN III
TRANSVERSAL
AutoriaPropia
SeeleccionabotonemergenteenDataBaseConnections,seseleccionaMySQL
AutoriaPropia
31
LENGUAJE DE PROGRAMACIÓN III
TRANSVERSAL
AutoriaPropia
Luegoenlasopcionesdeconfiguraciondeleclipseparaandroidrealizamoslasiguientetarea
AutoriaPropia
32
LENGUAJE DE PROGRAMACIÓN III
TRANSVERSAL
AutoriaPropia
33
LENGUAJE DE PROGRAMACIÓN III
TRANSVERSAL
AutoriaPropia
34
LENGUAJE DE PROGRAMACIÓN III
TRANSVERSAL
AutoriaPropia
35
LENGUAJE DE PROGRAMACIÓN III
TRANSVERSAL
AutoriaPropia
DespuesdeestaconfiguracionseprocedealaactivaciondelageneraciondecodigoporpartedeHibernate
EnelmenuRun/HibernateCodeGeneration/HibernateCodeGenerationConfigurations…
36
LENGUAJE DE PROGRAMACIÓN III
TRANSVERSAL
AutoriaPropia
37
LENGUAJE DE PROGRAMACIÓN III
TRANSVERSAL
AutoriaPropia
38
LENGUAJE DE PROGRAMACIÓN III
TRANSVERSAL
AutoriaPropia
39
LENGUAJE DE PROGRAMACIÓN III
TRANSVERSAL
AutoriaPropia
40
LENGUAJE DE PROGRAMACIÓN III
TRANSVERSAL
AutoriaPropia
EnnuestraBDdebibliotecaseagregaraunatablaconloscamposid,nombreydescripcion
Crearemos una clase Libro.java y se gereral los getters / setters, seguido a esto se crea un archivo
libro.hbm.xml
41
LENGUAJE DE PROGRAMACIÓN III
TRANSVERSAL
AutoriaPropia
LuegodeestosecreaunarchivoHibernateUtildentrodeunpaqueteutil
AutoriaPropia
42
LENGUAJE DE PROGRAMACIÓN III
TRANSVERSAL
AutoriaPropia
Complementamosconlacreaciondeunainterfaz
New/interfaceylacolocaremosfacadedentrodelpaquetemodeloyagregamoselsiguientecodigo
AutoriaPropia
AcontinuacionsecreaunaclaseLibroDAOysecrearantodoslosmetodosautilizar
43
LENGUAJE DE PROGRAMACIÓN III
TRANSVERSAL
AutoriaPropia
44
LENGUAJE DE PROGRAMACIÓN III
TRANSVERSAL
AutoriaPropia
45
LENGUAJE DE PROGRAMACIÓN III
TRANSVERSAL
AutoriaPropia
46
LENGUAJE DE PROGRAMACIÓN III
TRANSVERSAL
AutoriaPropia
47
LENGUAJE DE PROGRAMACIÓN III
TRANSVERSAL
AutoriaPropia
48
LENGUAJE DE PROGRAMACIÓN III
TRANSVERSAL
AutoriaPropia
LuegosecreaunaclaseController.java
49
LENGUAJE DE PROGRAMACIÓN III
TRANSVERSAL
AutoriaPropia
PosterioraestearchivosecrearaelpaquetevistaylaclaseFrmLibro
50
LENGUAJE DE PROGRAMACIÓN III
TRANSVERSAL
AutoriaPropia
PROGRAMACIONDELOSBOTONES
AutoriaPropia
51
LENGUAJE DE PROGRAMACIÓN III
TRANSVERSAL
AutoriaPropia
AutoriaPropia
AutoriaPropia
Conestosprocesoselejemploquedariafuncional.
52
53
LENGUAJE DE PROGRAMACIÓN III
TRANSVERSAL
3.6.1
EJERICICIO DE APRENDIZAJE
Nombredeltallerdeaprendizaje:Hibernate
Datosdelautordeltaller:CesarAugustoJaramilloHenao
Escribaoplanteeelcaso,problemaopregunta:
Consideraqueelhibernateesútilparacualquiertipodeaplicación.
Solucióndeltaller:
Sí,notieneunalimitanteounsolopropósito
3.6.2
TALLER DE ENTRENAMIENTO
Nombredeltaller:banco
Modalidaddetrabajo:Individual
Actividadprevia:
RealiceeltrabajoconformadoporNomina
Describalaactividad:
Diseñarunprogramaenhibernatequecumplalascondicionesmínimasdeunbanco
54
LENGUAJE DE PROGRAMACIÓN III
TRANSVERSAL
4 UNIDAD 3 INTRODUCCION A LA PROGRAMACION WEB
4.1.1
RELACIÓN DE CONCEPTOS
Contenedor:Herramientaquepuedecontenerotroscontroles,ejemplodetablasyformularios
Etiquetas:“comandos”deHTML
Controles:Componentesdeunambientedeprogramación,cajasdetexto,botones,combos,etc.
Formatos:Sentenciasquepermitendarpresentación,estilosydiseñoaunsitioweb
Estructuras: Son componentes de un lenguaje de programación tales como ciclos, preguntas, selectores y
preguntas
CRUD:DescripcióndeCrear,Leer,actualizaryEliminarinformación.
OBJETIVOGENERAL
Aprenderlosconceptosbásicosdelaprogramaciónweb,lasetiquetasbásicas,losformatosylasvalidaciones,así
comolaconstruccióndeunCRUD
55
LENGUAJE DE PROGRAMACIÓN III
TRANSVERSAL
OBJETIVOSESPECÍFICOS
IdentificarlasprincipalescaracterísticasdelHTMLensuetapadediseñoparaunCRUD
AplicarformatosqueledenunaspectomenosplanodelquesetrabajahabitualmenteenHTMLestándar
mediantelasherramientasdeCSS
AplicarlasvalidacionesnecesariasparacontrolarelingresodelainformacióndentrounformularioHTML
ElaborarunCRUDmedianteJSPyServlets
4.2 TEMA 1 HTML / HTML5
HTML
ElHTML(HyperTextMarkupLanguage)esellenguajeconelqueseescribenlaspáginasoestructurasweb,un
lenguaje que permite colocar texto de forma estructurada, y que está compuesto por etiquetas, también
conocidascomotagsomarcas,queindicanelinicioyelfindecadaelementodeldocumento.
Los documentos HTML deben tener la extensión HTML o HTM, para que puedan ser visualizados en los
navegadoresweb(Browser),seanestoslosmáscomunescomoInternetExplorer,Chrome,Mozilla,Safari,Opera,
entreotros.
LosbrowsersseencargandeinterpretarelcódigoHTMLdelosdocumentos,ydemostraralosusuarioslaspáginas
webresultantesdelcódigointerpretado.
ESTRUCTURABASICA
<html>
<head>
</head>
<body>
LENGUAJE DE PROGRAMACIÓN III
TRANSVERSAL
</body>
</html>
Lagranmayoríadelasetiquetasestáncompuestasporunaaperturayuncerrado<html></html>,laetiquetaque
contieneelsímboloslash(/)eslaqueindicaelcerrado,otrasetiquetasnosecomponenporparesysecierranal
finaldeella,<br/>estaesuntípicocaso.
Dentrodelaspáginaswebexisteunaestructuracomolavistaalprincipio,laetiqueta <html>y </html>sonla
primeraylaultimadelapágina,eslaetiquetaqueenmarcaloquevamosarealizar,dentrodeestasetiquetasse
ubicarandosáreas,lacabecera(head)yelcuerpodelapágina(body).
CABECERA
<head>…</head>
Estaetiquetaalbergaeltítulodelapáginaypermitelainvocacióndeotroselementoscomolosscriptsylashojas
deestiloencascada,elementosqueseveránmásadelante.
<title>primerapáginaweb</title>
<html>
<head>
</head>
<title>primerapaginaweb</title>
CUERPODELAPÁGINA
<body>…</body>
Elcuerpodelapáginaalbergatodoelcontenidoquesevisualizaráporpartedelusuario,ademásel<body>podrá
tenerelementoscomomuchasotrasetiquetasllamadosparámetros,estosparámetrospermitendarleundiseño
oformatoadicional
bgcolor=”color de fondo”, este se puede especificar de varias formas, el nombre del color como red, Green,
yellow,etc,osepuedetrabajarconunformatohexadecimalquenosdaunacombinacióndemás16millonesde
colores,esteformatoserepresentaasí#RRVVAA(Rojo,Verde,Azul),losvaloresqueseutilizanparaestecasoson
númerosde0a9ydeAaF,enlosformatostradicionessecomponenporparejas,lasdosRRrepresentanelrojo,
GGverdeyBBazul,deacásaldránlos16millonesdecolores,#FF0000nosarrojarojo,#00FF00,verdey#0000FF
azul
56
LENGUAJE DE PROGRAMACIÓN III
TRANSVERSAL
Background=”imagendefondo”,paraelmanejodefondossepodráusarcualquierformatodeimagencomoJPG,
PNG,GIF,tengapresenteeltamañoylaresoluciónparahacermásagradableesespacioweb.
Background=”fondo.jpg”
COMENTARIOSENHTML
Conmuchafrecuenciaserequierehacercomentariosoanularpartesdelcódigocreado,paraestoseutilizauna
etiquetaqueinhabilitaestaáreadetrabajo
<!--comentario//-->
SALTOSDELÍNEA
Eselequivalenteaunenter,enHTMLloenterqueespecifiquemospresionandolateclaolabarraespaciadorano
severáalejecutarlapáginaparaestoexisteungrupoespecíficodeetiquetasquepresentanestoscaracteres
<br/>representaraestecarácter
Ejemploderepresentación
AutoriaPropia
Uncódigoconlasetiquetasbásicasydacomoresultado
57
LENGUAJE DE PROGRAMACIÓN III
TRANSVERSAL
AutoriaPropia
Seobservaeltítulo“PrimerDocumentoWeb”,ademásenelcuerposeveelfondoazulqueseespecificóyel
texto,perosepuedeverqueeltextoapareceenlamismalíneayenelarchivoeltextoestáseparadoporespacios,
acáentraelfuncionamientodelaetiqueta<br/>
AutoriaPropia
Resultado
58
LENGUAJE DE PROGRAMACIÓN III
TRANSVERSAL
LINK
Unadelasrazonesprincipalesdeunsitiowebeselmanejodelosvínculosolinks,conestaherramientasepodrán
realizarcomunicacionesollamadosconotraspáginasoconotrossitios
Laetiqueta<a></a>eslaencargadaderealizarestatarea,seacompañademúltiplesparámetros,peroexisteuno
fundamentalqueeshrefqueindicaladirecciónorutadondeseencuentraelarchivooelsitiowebavisitar
AutoriaPropia
AutoriaPropia
59
LENGUAJE DE PROGRAMACIÓN III
TRANSVERSAL
Elhipervínculomostraralapalabra“RevistaEnter”,peroelllamadoes<ahref="http://www.enter.co">,loque
seubicaenelhrefesunarutaourl,despuésdeélseubicaunadescripcióndeltextoallamarycierraconla
etiqueta</a>
IMÁGENES
Eldiseñodeunsitiowebnoselimitasoloaeltexto,loscoloresoloshipervínculos,lasimagineshaceparte
fundamentaldelapresentaciónydeacercarsealasimágenescorporativasdelasempresas.
LAETIQUETAQUESEUTILIZAES<img/>
Seutilizacomoparámetrofundamentalsrc(sourceorutadelarchivo)
<imgsrc="logo.png">
AutoriaPropia
Estasimágenesselespuedenagregarbordes,sepuedenconvertirenhipervínculos.
TABLAS
Lastablassoncontenedores,sonherramientasquepermitenrealizardistribucióndeloselementosydentrode
ellosubicartexto,imágenes,hipervínculosyotroselementosincluyendotablasanidadas
60
LENGUAJE DE PROGRAMACIÓN III
TRANSVERSAL
AutoriaPropia
Esteuncasotípicodeunatablacompuestopor5filasy5columnas,esunamatriz
Paralaconstruccióndeellaserequieredeotrasetiquetascomoson
<tr></tr>estableceelinicioyfindeunafila
<td></td>establecelasceldasdelafila
AutoriaPropia
Dentrodelosparámetrosmáscomunesestánwidth(ancho)yborder(grosordelborde)
Existeuncarácterespecialentrecada<td> &nbsp;</td>estecarácterrepresentaunespacio,enestecódigose
mostrarándosfilasy5columnas,enelcarácterespecialhayquetenerpresentequeexisten256caracterescon
esteformato,algunosdelosquesonimportantesrepresentanlastildesycaracteresespecialesquelosbrowsers
noreconocenyquemuestranunsímboloquedañaríaelformatooriginal.
61
LENGUAJE DE PROGRAMACIÓN III
TRANSVERSAL
Existen algunos parámetros adicionales dentro de los <tr> y los <td>, entre ellos la posibilidad de colocarle
formatoscomocoloreseimágenesdefondoylaposibilidaddecambiarfilasocolumnas
COMBINARCOLUMNAS
Paralacombinacióndecolumnasseutilizaelparámetrocolspanyelnúmerodecolumnas
AutoriaPropia
AutoriaPropia
COMBINACIÓNDEFILAS
Lacombinacióndecolumnasserealizaconlasentenciarowspanyelnúmerodefilas
AutoriaPropia
62
LENGUAJE DE PROGRAMACIÓN III
TRANSVERSAL
AutoriaPropia
FORMULARIOS
Losformulariossonherramientasquepermitenlainteracciónconelusuario,medianteestossepodránsolicitar
datos,hacercálculosydemásoperaciones
Seconformaporlaetiqueta<form></form>
Igualquelastablasesuncontenedor,puedellevardistintoselementoscomocajasdetexto,botones,listas,etc.,
ycontieneunaseriedeparámetroscomoson
Id:Nombreparaidentificarelformulario
Name:Nombreparaidentificarelformulario
Action:Especificaelarchivoolafunciónqueserealizaraalahoradeenviar
losdatosdelformulario
Method:Representalaformadepasodelainformación,existendosopciones
tradicionales,POSTyGET
elementosdelosformularios
•
cajasdetexto
•
cajasdechequeo(casilladeverificación)
•
áreasdetexto
•
lista/menú(comboBox)
•
botonesdecomando
•
entreotros.
•
botonesderadio(botonesdeopción)
63
LENGUAJE DE PROGRAMACIÓN III
TRANSVERSAL
ESTRUCTURA
CAJASDETEXTO
<inputname="caja"type="text"id="caja"size="20"maxlength="10"/>
Secreamediantelaetiquetainputcomomuchosdeloselementosdeentradadeinformación,peroseespecifica
medianteelparámetrotypequeesuntext,idyelname(nombre)permitenlaidentificacióndelacaja,sizees
elanchoqueseveymaxlengthlacantidaddecaracteresmáximosquesepuedeningresar.
ÁREASDETEXTO
<textareaname="comentario"id="comentario"cols="45"rows="5"></textarea>
Lasáreasdetextosonespaciosmuchomásampliosquelascajasdetexto,secomponeporidy
nameparaidentificarlas,colsparaelnúmeromáximodecolumnasquesemostraranyrowsparael
númeromáximodefilasvisibles
BOTONESDECOMANDO
<inputtype="submit"name="button"id="button"value="Almacenar">
<inputtype="reset"name="button2"id="button2"value="Restablecer">
Dosdelostiposdebotonesmáscomunessonlosdeenvíoylosderestablecer,igualdelosdemáselementos
contienesunidyname,valuéparamostraralusuariounresultadoytypeparadeterminarqueelementoes,en
estecasounsubmitparaelenvíoyresetparalimpiarloselementosdelformulario.
BOTONESDERADIO(BOTONESDEOPCIÓN)
<inputtype="radio"name="radio"id="radio"value="radio">
Losbotonesderadioodeopciónpermitenseleccionarunademuchasopciones
CAJASDECHEQUEO(CASILLADEVERIFICACIÓN)
<inputtype="checkbox"name="checkbox"id="checkbox">
Lascajasdechequeopermitenlaseleccionedeuno,varios,todosoningúnelemento
64
LENGUAJE DE PROGRAMACIÓN III
TRANSVERSAL
LISTA/MENÚ(COMBOBOX)
<selectname="select"id="select">
<optionvalue="1">Sistemas</option>
<optionvalue="2">Medicina</option>
<optionvalue="3">Derecho</option>
</select>
LoscomboBoxpermitenelegirdeunalistadeopciones,envalueseespecificaelvalorapasarylaotrainformación
fueradelaetiquetaesloqueelusuariovisualizara
AutoríaPropia
HTML5
El HTML5 es una actualización del ambiente que por muchos años a estado al frente del desarrollo web, es
probablementeelcambiomássignificativoquehatenidoellenguaje,paraestecapítuloparticularseenfocaran
loscambiosalmanejodeformularios,teniendoencuentaqueenotrasáreastambiénsepresentaroncambios,
pero por efectos de que esta última unidad está enfocada al desarrollo y creación de CRUD se enfocara muy
particularmentealoscontroles.
65
66
LENGUAJE DE PROGRAMACIÓN III
TRANSVERSAL
Formularioadiseñar
Creacióndelformularioytablaparalaubicacióndeloselementos
AutoriaPropia
CAJADETEXTOCONCAMPOSREQUERIDOS,FOCOYMENSAJEINTERNO
AutoriaPropia
LENGUAJE DE PROGRAMACIÓN III
TRANSVERSAL
EnlascajasdetextodeHTMLaligualqueenesteprimerejemploseutilizaidynameparaidentificarelelemento
segúnelbrowser,losdemáselementospuedencambiarsegúnelalcance,ademáselHTMLanterioralaversión5
soloteníaeneltype,laspalabrastext,hiddenypassword,enestaversiónnuevaencontramosmayornúmerode
alternativasyseveránenlossiguientescontroles,paraestecasoparticulardecamposrequeridosseutilizala
sentenciarequired,conestoalmomentodeprocesarlainformaciónsilacajadetextoestuvieravacíamostraría
unmensaje
AutoriaPropia
Ademásdeestosesumalapropiedadautofocus,conestapropiedadllevaelcursoraestacajaconelfindeiniciar
elprocesodedigitaciónsinlaayudadelmouse,larecomendaciónparaestapropiedadesquesoloseutiliceen
una de las cajas de texto, la última propiedad que se va a trabajar para las cajas de texto tradicional es el
placeholder,estaopciónmostraraunmensajeenelinteriordelacajadetexto,enelmomentodeiniciarel
ingresodeinformaciónestadesaparecerá,esidealparaahorrarespacioyparadispositivosmóviles.
CORREOELECTRÓNICO
AutoriaPropia
Sepuedeobservarqueeltypecontienelevaloremail,esteantesnosepodíaespecificar,solotextopassword,
conestainstrucciónelsistemavalidaraquelainformacióningresadaconcuerdeconelformatodeuncorreo
electrónico,sepuedeagregarrequiredsiseprefiere
AutoriaPropia
67
LENGUAJE DE PROGRAMACIÓN III
TRANSVERSAL
Desde el inicio de la digitación se indicará que incluya una arroba y los demás componentes de un correo
electrónico
URL
Lascajasdetextoparaurltendráestapalabraeneltype,validaranqueladireccióndeunsitioseacumplalas
normasmínimas
AutoriaPropia
AutoriaPropia
FECHAS
EnlaversiónpreviadeHTMLparacrearunformatodefechasserecurríaaherramientascomoJavaScript,conel
HTML5ylainstruccióndatedentrodeltypesesolucionaesteimpase.
AutoriaPropia
68
69
LENGUAJE DE PROGRAMACIÓN III
TRANSVERSAL
AutoriaPropia
HORA
Seagregalainstruccióntimedentrodeltype
AutoriaPropia
AutoriaPropia
FECHAYHORA
Estaetiquetamezclalasdosanteriores
AutoriaPropia
AutoriaPropia
LENGUAJE DE PROGRAMACIÓN III
TRANSVERSAL
MESES
Conlainstrucciónmonthenelparámetrotype
AutoriaPropia
AutoriaPropia
SEMANA
Permiteseleccionarelnúmerodesemanadelañoyrepresentarloenlafechaalaquecorresponde
AutoriaPropia
AutoriaPropia
70
71
LENGUAJE DE PROGRAMACIÓN III
TRANSVERSAL
AutoriaPropia
RANGODENÚMEROS
AutoriaPropia
AutoriaPropia
INTERVALOS
AutoriaPropia
AutoriaPropia
LENGUAJE DE PROGRAMACIÓN III
TRANSVERSAL
4.3 TEMA 2 CSS HOJA DE ESTILO EN CASCADA
Conmuchafrecuenciaenlaconstruccióndesitioswebsepresentaquelosformatosnosonuniformesoquese
tienen que aplicar en cada página, cuando el sitio es considerablemente grande este tipo de formatos no son
administrablesysepuederecurriralaconstruccióndeunCSS(CascadingStyleSheet)HojasdeEstiloenCascada.
EstaherramientapermitequedeunamanerasimplesepuedanadministrarNcantidaddepáginasdemanera
uniformeyconunacodificaciónsimple
TIPOSDECSS
Existen3categoríasparalosCSS
CSSenlínea:permiteaplicarformatosaunaetiquetaparticular
CSSenbloque:permiteaplicarformatosaunaovariasetiquetasdentrodelmismoarchivo
CSSenarchivo:permitelaadministracióndemúltiplespáginas.
EJEMPLODEUNAPAGINASINFORMATOS
AutoriaPropia
Estosbloquesdecódigocorrespondenaunsitiowebquenotieneformatoalguno,laestructuraeslasiguiente
72
LENGUAJE DE PROGRAMACIÓN III
TRANSVERSAL
AutoriaPropia
APLICACIÓNDEFORMATOSENLÍNEA
CSSsecomponedeunainnumerablecantidaddeopciones,algunasdeellasson
Font-family:Especificalafuenteofamiliadeestas
Font-size:Determinaeltamañodelafuentequeseempleara,sepuedeespecificarenpixeles(px),puntos(pt),
pulgadas(in),centímetros(cm),milímetros(mm),picas(pc)
Text-align:Alineacióndeltextoaladerecha(right),izquierda(left),centrado(center),justificado(justify)
Font-wieght:Intensidaddelafuente,losvaloresvanentre100y900,bold
Text-transform:Se puede trasformar
capitalize(primeraletraenmayúscula)
el
texto,
upper
(mayúsculas),
lower
(minúscula),
Color:Especificaelcolordefuente,sepuedeespecificarenformatohexadecimal,enformatoRGBoconelnombre
delcolor
Background-color:Colordefondo
Background-image:Imagendefondo
Margin:Enesteformatosepuedecrearunamargendecontorno,elvalorqueseespecifiqueaplicaraaladerecha,
izquierda,arribayabajo
Margin-left
Margin-right
73
LENGUAJE DE PROGRAMACIÓN III
TRANSVERSAL
74
Margin-top
Margin-button
Soncomplementosdelaanterior
Border:Especificaunbordeencontorno
Border-left
Border-right
Border-top
Border-button
Text-decoration:Aplicaparacolocarsubrayadosoparaquitarlos
Line-heigth:Especificaelespacioentrelíneas
Width:Anchodeunelemento
Losformatosenlíneasoloaplicanalaetiquetaquelorequiera
APLICANDOLOSFORMATOSALAPRIMERAETIQUETA
AutoriaPropia
Arrojacomoresultadolosiguiente
AutoriaPropia
LENGUAJE DE PROGRAMACIÓN III
TRANSVERSAL
Losdospárrafosestándentrodelaetiqueta<p></p>,perosoloseaplicaelformatoenlíneaalaprimera,esta
eslaformaenlaquetrabajaelformatolineal.
FORMATOENBLOQUE
Paralacreacióndeunbloquedeestilosseubicaenlacabeceradelapágina,seespecificalaolasetiquetas,están
aplicaranelformatoatodaslasetiquetasqueseespecifiquen.
AutoriaPropia
Laetiqueta<p>yanotieneformatosenlíneayelresultadoeselsiguiente
AutoriaPropia
Enestecasoseobservaquelosdospárrafostienenlamismadistribuciónylosmismosformatos.
CSSENARCHIVO
75
76
LENGUAJE DE PROGRAMACIÓN III
TRANSVERSAL
La limitante de aplicar formatos en bloque consiste en que solo serían formatos para una página, cuando se
requierequeestosformatossedenenvariaspáginasdebemosexpórtalo
EnunarchivoindependienteconextensiónCSSaplicamoslosformatos
Lainvocacióndeunarchivoexternoseaplicadelasiguienteforma
AutoriaPropia
Enelarchivodeejemployanohayformatos,existeelllamadoaunarchivoquecontendráformatosglobalespara
todaslaspáginasasociadas.Todaslaspáginasdelmismositioquecontenganestalíneadecódigomostrarael
mismo formato, si se requiere un cambio de color, de fuente, de márgenes, etc., solo tendrá que ingresar al
archivo,cambiarloyalalmacenaryejecutarcualquieradelosarchivosHTMLmostraradichaactualización.
AutoriaPropia
Resultado
LENGUAJE DE PROGRAMACIÓN III
TRANSVERSAL
AutoriaPropia
FORMATOSENFORMULARIOS
FormulariosinformatosCSS
AutoriaPropia
AestemismoformularioseleaplicanalgunosformatosdeCSS.
77
78
LENGUAJE DE PROGRAMACIÓN III
TRANSVERSAL
AutoriaPropia
Los formatos CSS son muchos y muy variados, aplique los mas esenciales que estamos tratando, implemente
nuevasalternativasconcaracteristicasnuevasdeCSS2,CSS3.
LENGUAJE DE PROGRAMACIÓN III
TRANSVERSAL
4.4 TEMA 3 JAVASCRIPT
JavaScript es un lenguaje interpretado, tal vez uno de los más conocidos desde hace muchos años por su
versatilidad, su gran poder y por dejar una gran herencia con otros ambientes como JQuery, Ajax, JSon, etc.,
despuésdemuchosañossiguecomounodelosprincipalesdentrodelaprogramaciónweb.
ESTRUCTURA
EnlaestructuranoseentrarámuchoendetallesdadoquetieneunasimilitudconJavayconC++,laformade
establecerciclosparasomientras,condicionalesoselectoresmúltiplestienenlasmismasestructuras.
JavaScript sevaautilizarprincipalmentecomoherramientadevalidación,esuntemarelativamentecorto,pero
degranimportación,seaplicarásoloestetemapormotivosdeaplicabilidadenuntemaposterior,lautilización
delJavaScript(JS)esmuyvariadoymuyamplio,aloqueseinvitaaseguirleyendosobreeltemaynodejarlosolo
enestaetapainicial.
FORMULARIOINICIAL
AutoriaPropia
Mediante este formulario se aplicarán los conceptos de validar que un campo no este vacío y que cumpla las
condicionesmínimassolicitadas.
79
LENGUAJE DE PROGRAMACIÓN III
TRANSVERSAL
Paraestecasosecuentaconcarnet,nombre,dirección,emailyprofesión,seprocederáconlavalidacióndetodos
loscamposquepermitanelingresodedatos.
Para el manejo de JavaScript hay que tener presente que se puede aplicar en condiciones similares a CSS, se
puedencreartareasenlínea,enbloqueoenarchivosindependientes,paraestecasoseaplicaranlasvalidaciones
enunarchivoexterno.
Paraesteejemplosecrearáunarchivollamadovalidar.js,paralavinculacióndeunarchivo.jsdentrodeuno.HTML
seprocedearealizarlasiguientelíneaenlacabeceradelapagina
AutoriaPropia
La instrucción del script especifica el tipo que es texto/ JavaScript y un parámetro src que indica la ruta y el
archivodondeseencuentralavalidación
Seutilizaránexpresionesregularesparalavalidación,estopermitiráquedeunaformasencillaycortasepueda
realizarmúltiplesprocesos.
DECLARACIÓNYASIGNACIÓNDELOSCAMPOSDELFORMULARIO
AutoriaPropia
80
81
LENGUAJE DE PROGRAMACIÓN III
TRANSVERSAL
Enlaslíneassiguientessedeclaracadaunadelasvariablesquecontieneelformulario,yseasignaelvalordelas
cajasdetextoaestasvariablesconlasentenciadocument.getElementById(“nombredelcontrol”).value
Posterioraestepasoseprocedeconlaprimeravalidación,especificarqueelcarnetnoestevacío
AutoriaPropia
Seespecificaqueelcamponoseanulo,nosea0ynoestécompuestosoloporespacios
Lasentenciaalertmuestraunaventanaemergente,elreturnenfalseindicaquenosecumpliólacondición
VALIDACIÓNDELCONTENIDODELCARNET
AutoriaPropia
Enestainstrucciónapreciamoslascaracterísticasdeunaexpresiónregular,algunasdesuscaracterísticasson
^
indicaeliniciodeunacadena
$
indicaelfinaldeunacadena
LENGUAJE DE PROGRAMACIÓN III
TRANSVERSAL
d
indicavalorentero
{12}
indicaquesolosepuedeningresar12caracteres
VALIDACIÓNDECAMPOTIPOTEXTO(NOMBRE)
Paralavalidacióndeuncampotipotextoseaplicalaprimeravalidaciónconelfindequeelcamponoestevacío
yluegoseaplicanlascondicionesdelcampo
AutoríaPropia
En esta instrucción se valida que tenga un rango de letras de la “a” a la “z” tanto en minúscula como en
mayúscula,unespacioyquetengaunrangodecaracteresentre7y40
VALIDACIÓNDEUNADIRECCIÓN(CAMPOSCONTEXTOYNÚMEROS)
AutoríaPropia
Tieneuncontenidosimilaraelnombre,conlavariaciónde0-9queindicaquerecibenúmerodeceroanuevey
guiones,ademásdepermitirunrangodedatos
VALIDACIÓNDECAMPOSEMAIL
AutoríaPropia
82
83
LENGUAJE DE PROGRAMACIÓN III
TRANSVERSAL
Lavalidacióndeestetipodecamposcomprendaunamayorcantidaddealternativas,permitenúmerosenteros,
letrasdela“a”ala“z”yunderline(_)antesdelaarroba,despuésdelaarrobatieneunaseriedecaracteres
similaresypermitealfinalentre2y6caracteresparaeldominodeladirección.
Enelúltimoelseseaplicaunreturntrue,estoindicaquecuandocumplatodaslascondicioneslavalidaciónes
valida
Porultimoenelformularioseagregaelllamadoalafunción
AutoríaPropia
EsteeventoonsubmitrealizaelllamadodelafuncióncadaquesepresionaelbotónAlmacenar,comprende
returnvalidación,conestainstrucciónelsistemarecibeeltrueofalsesegúnlavalidacióndeloscampos,el
valor que hay dentro del parámetro action es opcional, ahí se ubica el archivo que se va a trabajar si las
condicionessecumplen.
4.5 TEMA 4 JSP / SERVLETS
JSP(JavaServerPage)esunaherramientacomplementariadedesarrolloweb,labasedetodositiowebesyserá
HTML,quesecomplementaconherramientascomoCSS,JS,entreotroselementos,JSPhacepartedeunselecto
grupodeopcionesquepermitenunamayorinteracción,lacomunicaciónyelaccesoalasBD,setrabajadellado
delservidorynodelclientecomolasotrasherramientas.
Para la creación y utilización de un archivo JSP se trabaja con Eclipse EE, se puede descargar del sitio
www.eclipse.org
AutoríaPropia
TambiénserequieretomcatqueesuncomplementodelApacheypermitelainterpretacióndelsitiodiseñado.
AutoríaPropia
84
LENGUAJE DE PROGRAMACIÓN III
TRANSVERSAL
Paraestecapítulosetrabajaráconlaversión8
CREACIÓNDELSERVIDOR
ParaesteprocesodelJSPserequierecrearunservidorconlaolasconfiguracionesnecesariaspara
lainteraccióneinterpretacióndelanuevacodificación.
UbicadosenlaparteinferiordelIDEenlapestanaServer
AutoríaPropia
SeseleccionaelvínculoNoserversareavailable.Clickthislinktocreateanewserver…
En la ventana contigua se selecciona apache y la versión más reciente que se tenga disponible y / o se haya
descargado
LENGUAJE DE PROGRAMACIÓN III
TRANSVERSAL
AutoríaPropia
SecontinuaconelbotónNext,
85
LENGUAJE DE PROGRAMACIÓN III
TRANSVERSAL
AutoríaPropia
En la opción Tomcat Installation directory se busca la ubicación de tomcat, habitualmente se encuentra en
archivos de programas, apaches Software Foundation y se selecciona la versión del tomcat, luego se acepta y
finaliza
86
LENGUAJE DE PROGRAMACIÓN III
TRANSVERSAL
87
AutoríaPropia
LapestanaServerstieneunaconfiguraciónenestemomentolistaparaserusada
PROBARLACONFIGURACIÓN
AutoríaPropia
Alladoderechodelaopciónserverseencuentrauniconoparalaejecución,verifiqueelbuenfuncionamientodel
servidor
AutoríaPropia
SeobservaqueelestadocambiadeStoppedaStartedyestálistoparasuuso
CREACIÓNDELPRIMERPROYECTO
UbicadosenelProjectExploreryconbotónemergente,seseleccionanew/DinamicWebProject
LENGUAJE DE PROGRAMACIÓN III
TRANSVERSAL
AutoríaPropia
Seespecificaelnombredelproyecto
88
LENGUAJE DE PROGRAMACIÓN III
TRANSVERSAL
AutoríaPropia
Ysefinaliza
89
LENGUAJE DE PROGRAMACIÓN III
TRANSVERSAL
AutoríaPropia
Esta es la estructura de un proyecto nuevo, dos de los aspectos mas comunes e importantes son el Java
Resourcesdondeseubicaránlosarchivosconextensión.javayWebContentdondeseubicaránlosarchivosJSP
CREACIÓNDEUNARCHIVOJSP
AutoriaPropia
EnelWebContentbotónemergente,new/JSPFile
90
LENGUAJE DE PROGRAMACIÓN III
TRANSVERSAL
AutoríaPropia
Yfinalizalacreación.
APARIENCIAINICIAL
91
92
LENGUAJE DE PROGRAMACIÓN III
TRANSVERSAL
AutoríaPropia
ContienelamayorpartedelcódigoHTMLperoenlaprimeralíneadecódigoseveunaseriedesímbolospropios
deJSP
<%@%>
EstossonlossímbolosquerepresentaneltrabajoconJSP,indicaademásellenguaje,elcontextoyunacolección
comoeslaISO.
CREACIÓNDEUNFORMULARIO
AutoríaPropia
Este formulario tiene las mismas características de los temas anteriores (creación de formularios), se ubica
dentrodelbodydelarchivocreado,sepodráejecutar,aunquenoarrojeningúnresultado.
APLICACIÓNDELAOPERACIÓNMEDIANTEARCHIVOJSP
Secreaunarchivonuevollamado Resultado.jspyseinvocaenelformularioanteriorenelparámetro actionel
nombredelarchivoylaextensióndeeste.
AutoríaPropia
AutoríaPropia
LENGUAJE DE PROGRAMACIÓN III
TRANSVERSAL
AutoríaPropia
AutoríaPropia
En el formulario creado inicialmente no tiene cambios de codificación salvo la línea de JSP que se establece
automáticamente,peroseempiezaviendounparámetrocomoactionquecontieneunvalor(Resultado.jsp),esta
accióneselarchivoolafunciónquesedeseaejecutar.
ObserveenelarchivoResultado.jspqueaunavariablefloatpvselehaceunaconversiónydentrodeestaaparece
lainstrucciónrequest.getParameter,estainstruccióntomaelcontenidodelacajadetextoprimerValor,lomismo
sucedeparalasegundavariable,tengamuypresentelaescrituradelasvariablesocampos,eljavaessensiblea
mayúsculasyminúsculas.
AplicacióndelMismoformulariomedianteServlets
Losservletssonarchivosconextensiónjavadiseñadosparaelmanejodelosdatosdeunformulariomediante
métodoscomopost(doPost)get(doGet)
CREACIÓNDEUNSERVLET
93
LENGUAJE DE PROGRAMACIÓN III
TRANSVERSAL
AutoríaPropia
ConelbotónemergenteubicadossobreelsrcdelJavaResources,new/Servlet
AutoríaPropia
94
LENGUAJE DE PROGRAMACIÓN III
TRANSVERSAL
95
Ysefinaliza.
ComponentesdelServlet
AutoríaPropia
Secomponeensupartesuperiorconlospaquetesdeuso,unaanotaciónfundamentalenlaejecucióndeeste
@WebServlet,nombredelaclaseconstructor
METODODOPOSTYDOGET
AutoríaPropia
Útilesparalarecepcióndelainformación,estallegainicialmentealdoGetyalserprocesadapasaaldoPost
IMPLEMENTACIÓN
96
LENGUAJE DE PROGRAMACIÓN III
TRANSVERSAL
Sehacelellamadodesdeelactiondelformulario
AutoríaPropia
DESARROLLODELSERVLET
AutoríaPropia
Resultado
AutoríaPropia
4.6 TEMA 5 JAVABEANS
Dentrodelosmodelosnuevosdedesarrollocadadíaseencuentrasmásalternativas,unadeellasonlosBeanso
JavaBeans,estemodeloopatrón,cumplelatareade“claseprincipal”,enunaclasesincara(sindiseñográfico)
peropermiteeltránsitodelainformación,todoslosprocesospasanporestaclase,lainformaciónseactualizaen
estayelprocesoquelorequierasiempreycuandotengaaccesopodrátomarlosprocesarlosydevolverlos,asíen
uncicloconstantelainformaciónestarádisponible,ademásdebrindarseguridadyquenosetengaqueacceder
hastaelformulariooaotraclasesmásrestringidas.
CREACIÓNDEUNJAVABEAN
SecreaunaclaseEmpleado.java
LENGUAJE DE PROGRAMACIÓN III
TRANSVERSAL
AutoríaPropia
Esteeseliniciotípicodeunbeanenjava,luegodeesteprocesoseprocedeacrearoagenerarlosgettes/setters
Ubicadosencualquieradeloscamposyconelbotónemergenterealizamoslageneracióndelosgetters/setters
AutoríaPropia
Despuésdeestoseprocedeagenerarcualessonloscamposquesedeseanincluir
97
LENGUAJE DE PROGRAMACIÓN III
TRANSVERSAL
AutoríaPropia
Acáseobservanalgunasdeellasyageneradas
98
99
LENGUAJE DE PROGRAMACIÓN III
TRANSVERSAL
AutoríaPropia
4.7 TEMA 6 CRUD
Lacreacióndeun CRUDmedianteambientesdeprogramaciónsiemprecumpleunosmínimosrequisitos,para
estecasoseiniciaráconunMER(ModeloEntidadRelación)
LENGUAJE DE PROGRAMACIÓN III
TRANSVERSAL
AutoríaPropia
Este MER se creará mediante MySQL y se aplicaran procedimientos almacenados para las tareas básicas de
insertar,consultar,modificar,eliminar.
PosterioraestoseutilizaráelconectordeMySQL,esteconectordebedeubicarseenlacarpetaLIBdeTomcat.
PROYECTO
SecrearáunproyectoUniversidad
Paquetesdetrabajo
Control
Modelo
Utilidad
Utilidad
SecreaelarchivoConexion.java(Class)
100
LENGUAJE DE PROGRAMACIÓN III
TRANSVERSAL
AutoríaPropia
CREACIÓNDELOSJAVABEANS
ArchivoCiudad.java
101
LENGUAJE DE PROGRAMACIÓN III
TRANSVERSAL
AutoríaPropia
CREACIÓNDELARCHIVODAO,CIUDADDAO.JAVA
Estearchivocontienelosmétodosdetrabajoparainsertar,consultar,modificaryeliminar
Seespecificaránlosmétodosyluegoseaplicaránsegúnsunecesidad.
EstearchivoCiudadDAO.javaesunaclasetradicional.
INICIODELARCHIVOCIUDADDAO
102
LENGUAJE DE PROGRAMACIÓN III
TRANSVERSAL
AutoríaPropia
MÉTODODEINSERTAR
AutoríaPropia
MÉTODODELISTADO
103
104
LENGUAJE DE PROGRAMACIÓN III
TRANSVERSAL
AutoríaPropia
ELIMINAR
LENGUAJE DE PROGRAMACIÓN III
TRANSVERSAL
AutoríaPropia
CONSULTAR
AutoríaPropia
MODIFICAR
105
LENGUAJE DE PROGRAMACIÓN III
TRANSVERSAL
AutoríaPropia
TodosestosprocesostienenelmismoorigendelCRUDcreadoenjavaSE,lassentenciasyloscomandossonlos
mismos
FACHADA
Lafachadaenelambientewebcambiaunpoco,tieneunacodificaciónmásespecíficadecadatarea.
SeconstruiráunaFachadaoFacadeparalaciudadysellamaraFachadaCiudad.java,estearchivoesunservlet.
106
LENGUAJE DE PROGRAMACIÓN III
TRANSVERSAL
AutoríaPropia
EstafachadainstanciaCiudadDAOdondeseencuentranlosprocesospreviamentecreados,instanciaCiudadque
contienelos Bean,posteriormenteseencuentrandoslíneasquetienenconstantes,unadeellasLISTARylaotra
MODIFICAR,hacereferenciaasusrespectivasURLsyposteriormenteunconstructorconlainstanciadefinitivade
lasdosclasesantesmencionadas.
Acontinuación,sedesarrollaelmétododoget
107
LENGUAJE DE PROGRAMACIÓN III
TRANSVERSAL
AutoríaPropia
Estemétodorecibelasordenessegúnlatareaquesepretendedesarrollar,lavariable opcrecibiráunapalabra
clave, sea para insertar, consultar, modificar o eliminar, se evalúa cual de las opciones es la correcta y se
implementa.
Ejemplo
AutoríaPropia
Seevalúasilaopciónqueserecibeeslistar,alavariableacciónseleasignaunaconstantequeasuveztieneuna
URLasignadayporúltimoseinvocaelmétodociudadDAO.listado,esteeselmétododelarchivoDAO,esteproceso
sellevaaunlistarCiudadqueesunarreglodedatos.
Alfinaldeestemétodoseencuentraunpardelíneas
AutoríaPropia
108
109
LENGUAJE DE PROGRAMACIÓN III
TRANSVERSAL
Permitenlainvocacióndelprocesoquetengaasignadolavariableacción,porejemplo,siseinsertaromodifica
despuésdehacerlatareavaallamarellistadoparacorroborarquesiestáfuncionando.
AutoríaPropia
Formulariodetrabajo,Ciudad.jsp
AutoriaPropia
Esteformularioestradicionalalosvistosanteriormente,enelactiontieneelsiguientellamado
AutoriaPropia
Esta primera parte es funcional, ya almacena información, se va a complementar realizando las demás tareas
desdeunarchivoindex.jspyellistadodeinformación.
INDEX.JPS
Elarchivodeíndexsevaautilizarcomomedioparallamarlasopcionesquesedesean.Paraelejemploinicialsolo
contendrálainserciónyellistadoydesdeestaúltimairalaeliminaciónymodificación.
LENGUAJE DE PROGRAMACIÓN III
TRANSVERSAL
AutoriaPropia
ARCHIVOLISTARCIUDAD.JSP
AutoriaPropia
Estearchivocontienealgunascaracterísticasdeconfiguración,comolas3primeraslíneasenlasqueserealizael
llamadoalalibreríajstl,parauncorrectofuncionamientodellistado.
LosdemásprocesossondeunatablatradicionaldeHTML
110
LENGUAJE DE PROGRAMACIÓN III
TRANSVERSAL
AutoriaPropia
Lasegundapartedelarchivocomprende
AutoriaPropia
Lautilizacióndelarregloomatrizdedatos,estaseespecificodesdelafachadaCiudadyseagregaunparámetro
varcomoaliasdeestamatriz
AutoriaPropia
Sehaceusodelaliasydelcampoquesedeseavisualizar(nombreasignadoenlaclaseprincipaldegetters/
setters),esteprocesoserepitaparacuantoscamposdeseamosmostrarenpantalla.
Ellistarquedaríadeestamanera.
AutoriaPropia
MODIFICACIÓN
111
112
LENGUAJE DE PROGRAMACIÓN III
TRANSVERSAL
ElarchivodemodificacionCiudad.jsp,tieneundiseñosimilaraldeinsertarCiudad.jsp,adicionandolassiguientes
líneasenlapartesuperior
AutoriaPropia
Yencadacajadetextoseaplicaríalosiguiente
AutoriaPropia
Esteprocesoyaesoperativoparaunatablamaestra.
Tenga presente que el modificar puede ser el proceso más largo, luego de listar información, se consulta y
posterioraestosealmacena.
LENGUAJE DE PROGRAMACIÓN III
TRANSVERSAL
4.7.1
EJERICICIO DE APRENDIZAJE
Nombredeltallerdeaprendizaje:JSP
Datos del autor del taller: Cesar Augusto
JaramilloHenao
Escribaoplanteeelcaso,problemaopregunta:
ParalaconstruccióndeunarchivoWebconjavasetienenqueusarlosServlets
Solucióndeltaller:
No,enalgunoscasossepodríatrabajarsoloconJSP,losservletscontienenunaprogramaciónmásnativa,y
mássegura
4.7.2
TALLER DE ENTRENAMIENTO
Nombredeltaller:Veterinaria
Modalidaddetrabajo:Individual
Actividadprevia:
RealicecompletamenteelCRUDdejspyservletsvistoenlaúltimaunidad,estodarálasbasesnecesariaspara
eltrabajoposterior.
Describalaactividad:
Creeunproyectoquecubratodoslostemasdelaunidad5,apliqueformatosyvalidacionesyunCRUDque
comprendavariastablasincluyendotablasmaestras,referencialeseintermedias.
113
LENGUAJE DE PROGRAMACIÓN III
TRANSVERSAL
5 PISTAS DE APRENDIZAJE
Recuerdeque:programaciónwebesunrecursomuyamplioquemanejamúltipleslenguajesyelementos
Tengaencuenta:laprogramaciónutilizadaesbasadaenjavatantoparajavaSEcomoparaJavaEE
Traigaalamemoria:quelamayorpartedecomandoeinstruccionessonlosmismosenjavaSEqueenjavaEE
114
LENGUAJE DE PROGRAMACIÓN III
TRANSVERSAL
6 GLOSARIO
•
JavaSE:Eslaversiónestándardejava,estaversióneslabasedetodoeltrabajoenjava
•
JavaEE:EslaversiónEnterpriseoempresarial,esutilizadaparalaprogramaciónweb
•
Eclipse:EsunIDEdedesarrolloquepermitefacilitaralgunastareasdelaprogramaciónenJava
•
Proyecto:Esunconjuntodearchivosquecomponenunaaplicación
•
Paquete:Esunáreadetrabajoquepermitelaclasificacióndearchivosoclases
•
DAO:Esunmodelodedesarrolloopatróndediseño,standarddetrabajo
•
Getters/setters:Hacenpartedeunaclaseprincipalquepermiteaccedealainformación
•
JSP:JavaServerPage,ambientedetrabajoweb
•
HTML:LenguajedeMarcasdeHipertexto
•
JavaScript:LenguajesimilarenestructuraaJavaquesepuedemezclarconaplicacionesweb
•
CSS:Formatosdeaplicacióndeaplicacionesweb
•
Método:Espaciodecódigoquerealizaunafuncionaespecifica
•
Façade:Patróndediseñoqueadministraunconjuntodeclases
•
Hilo:Herramientadetrabajoquepermiterealizarunatareaenprocesosparalelos
•
Red:Partedelaprogramaciónquepermitequevariostrabajenconelementoscompartidos
•
Hibernate:FrameWorkdejavaquepermiterealizarprocesosstandardowebdeunaforma simplificada
•
Propertie:Extensióndearchivoquepermiteaccederarecursosfueradelacompilación
•
Conector:Archivoquecontieneloselementosnecesariosparavincularunproyectoconunmotordebases
dedatos
•
Reportes:Herramientadevisualizacióndeinformacióngeneraloespecifica
mas
115
•
LENGUAJE DE PROGRAMACIÓN III
TRANSVERSAL
Documentación: Herramienta de ayuda para el desarrollador y el control de los procesos realizados en
periodosdetiempo.
116
LENGUAJE DE PROGRAMACIÓN III
TRANSVERSAL
7 BIBLIOGRAFÍA
•
Eckel,Bruce.(2008).PiensaenJava,Madrid.ISBN:978-84-8966-034-2
•
Villalobos,Jorge(2006),FundamentosdeProgramación,Bogotá.ISBN:970-26-0846-5
•
Deitel,Paul.(2012),Java,comoprogramar,México.ISBN:978-607-32-1150-5
117