LENGUAJE DE PROGRAMACIÓN III - …imagenes.uniremington.edu.co/moodle/Módulos de...
Transcript of LENGUAJE DE PROGRAMACIÓN III - …imagenes.uniremington.edu.co/moodle/Módulos de...
LENGUAJE DE PROGRAMACIÓN III TRANSVERSAL
FACULTAD DE CIENCIAS BÁSICAS E INGENIERÍA
2 LENGUAJE DE PROGRAMACIÓN III TRANSVERSAL
ElmódulodeestudiodelaasignaturaLenguajedeprogramaciónIIIespropiedaddelaCorporaciónUniversitariaRemington.Lasimágenesfuerontomadasdediferentesfuentesqueserelacionanenlosderechosdeautorylascitasenlabibliografía.Elcontenidodelmóduloestáprotegidoporlasleyesdederechosdeautorquerigenalpaís.
Estematerialtienefineseducativosynopuedeusarseconpropósitoseconómicosocomerciales.
AUTORCesarAugustoJaramilloHenaoIngenierodeSistemasCesar.jaramillo@remington.edu.coNota:elautorcertificó(demaneraverbaloescrita)Nohaber incurridoenfraudecientífico,plagiooviciosdeautoría;encasocontrarioeximiódetodaresponsabilidadalaCorporaciónUniversitariaRemington,ysedeclarócomoelúnicoresponsable.RESPONSABLESJorgeMauricioSepúlvedaCastañoDecanodelaFacultaddeCienciasBásicaseIngenieríajsepulveda@uniremington.edu.coEduardoAlfredoCastilloBuilesVicerrectormodalidaddistanciayvirtualecastillo@uniremington.edu.coFranciscoJavierÁlvarezGómezCoordinadorCUR-Virtualfalvarez@uniremington.edu.coGRUPODEAPOYOPersonaldelaUnidadCUR-VirtualEDICIÓNYMONTAJEPrimeraversión.Febrerode2011.Segundaversión.Marzode2012Terceraversión.noviembrede2015
DerechosReservados
EstaobraespublicadabajolalicenciaCreativeCommons.
Reconocimiento-NoComercial-CompartirIgual2.5Colombia.
3 LENGUAJE DE PROGRAMACIÓN III TRANSVERSAL
TABLA DE CONTENIDO Pág.
1 MAPADELAASIGNATURA..............................................................................................................................5
2 UNIDAD1REDES.............................................................................................................................................6
2.1.1 RELACIÓNDECONCEPTOS..............................................................................................................6
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
3 UNIDAD2INTEGRACIONCONHIBERNATE...................................................................................................16
3.1.1 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
4 UNIDAD3INTRODUCCIONALAPROGRAMACIONWEB...............................................................................54
4.1.1 RELACIÓNDECONCEPTOS............................................................................................................54
4.2 TEMA1HTML/HTML5.........................................................................................................................55
4.3 TEMA2CSSHOJADEESTILOENCASCADA...........................................................................................72
4.4 TEMA3JAVASCRIPT..............................................................................................................................79
4 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
5 LENGUAJE DE PROGRAMACIÓN III TRANSVERSAL
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ónlosprotocolosyelmanejodelosdatos.
OBJETIVOSESPECÍFICOS
IdentificarlascaracterísticasprincipalesparaprogramarenRed Identificarloscomponentesesencialesparalaprogramaciónenred Identificarloscomandosmáscomunesparalaprogramaciónenred
2.2 TEMA 1 CONCEPTOS BÁSICOS Muchosdelosaplicativosqueescribimosestándiseñadosparaserutilizadosenunasolamáquina,estoesmuylimitanteporelcrecimientoconstantedelasempresasydeestarconectadoalosdistintosrecursosquesepuedenutilizar.
Paraestepropósitodebemosdefamiliarizarnosconelmanejodelosprotocolos,esencialmentedosdeellosquenos permiten realizar esta tarea, TCP (Transmission Control Protocol) y UDP (User Datagram Protocol), estosprotocolosimplementanloqueconocemoscomolacapadetransporte.
8 LENGUAJE DE PROGRAMACIÓN III TRANSVERSAL
2.3 TEMA 2 TCP / UDP TCP
LacomunicaciónTCPesanálogaaunacomunicacióntelefónica,enqueunusuariollamayelotrodeterminaonoatenderlo,cuandodecideatenderloestablecenuna“conversación”deformabidireccional.
DentrodelosprocesosmáscomunesdeestetipodeprotocoloestánFTP,Telnet,HTTP,enestosprocesosesfundamentalrespetarelordendeenví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 llamadosdatagramas, el envíodeestoses comparable conel enviódel correoo correspondencia tradicional, enesteejemplonosencontramosqueelenvíodeunacartanonospreocupaenquéordenllegaasudestino.
PUERTO
Lospuertossonlosmecanismosparahacerllegarlainformaciónalaplicativoquelosolicito,cadapctieneunaúnicaconexiónfísicapormediodelacualserecibelainformación,lospuertosconstituyenunadireccióninternaquedireccionaunprocesodentrodelequipodecómputo.
DIRECCIÓNIP
UnadirecciónIP(InternetProtocol),esunnumerode32bitsquedireccionademaneraúnicaaunpcdentrodelared.
APLICACIÓNCLIENTE/SERVIDOR
9 LENGUAJE DE PROGRAMACIÓN III TRANSVERSAL
Esunordenjerárquicodelasaplicacionesdeunared,unaaplicaciónclientesolicitainformaciónaunaaplicaciónservidor,esteúltimoproveerálosserviciosaunclientesegúnlascaracterísticasdelaplicativogestor.
SOCKETS
Esconocidocomounodelosextremosenunacomunicacióndeprogramas,eslaformadecomunicarunservidorconuncliente,estesocketdireccionalainformacióndeformaúnicaalaaplicaciónsolicitante.
SERVIDOR
Esunprogramaquepermitelaqueseconectenlosdistintosprogramasclientes,estoseconocecomo“escuchar”uncliente”
CLASESCOMUNES
ServerSocket:Seutilizarparaesperaryescucharlallegadadelosclientes
Socket:Sepuedeentablarlacomunicacióncliente/servidor
EJEMPLODESERVIDOR
10 LENGUAJE DE PROGRAMACIÓN III TRANSVERSAL
AutoriaPropia
AutoriaPropia
11 LENGUAJE DE PROGRAMACIÓN III TRANSVERSAL
ElservidorinstanciaunServerSocketconunpuertoaleatorioquecomoejemplosetendráel5432,lainstrucciónacepteslaencardadeesperarlaconexióndeuncliente.LainstruccióngetInnetAddresstomaralaIPdelcliente,el manejo de los datos de la forma tradicional envia solo bytes pero con las clases ObjectInputStream y/oObjectOutputStreamseprocesacomoobjetos,estasclasesleenyescribenobjetospormediodelared.
CLIENTE
AutoriaPropia
AutoriaPropia
12 LENGUAJE DE PROGRAMACIÓN III TRANSVERSAL
Paraelclientecomunicarseconelservidor,se tieneunpuertoyunadirección IP,paraestecasoseaplicaunservidorlocal.
RMI
RMI(RemoteMethodInvocation),esunatecnologíadeinvocaciónremotademétodos,comosunombreloindicainvocamétodos,cuandoestosseencuentranenunamáquinavirtualylosllamadeotramáquinavirtual,estoseconocecomoobjetoremoto.
Elservidorseencargade instanciar losobjetosremotosy loshacedisponiblesalcliente,estoseubicaenunacolecciónorepositoriodeobjetos.
Losobjetosremotossonlospublicadosporelservidoralosquesepodránaccederporelclienteremotamente,ambasmaquinasutilizanparaestatarea lamáquinavirtual,a lahoradeconsiderarqueunobjetosearemotodeberáheredarlaclasejava.rmi.UnicastRemoteObject.
2.4 TEMA 3 APLICACIÓN AcontinuacionseveraunpequeñoejemplodeRMI
ParaestosecreaunproyectollamadoRMI,unarchivoObjetoRomoto.java,estearchivoesunainterfazydaracaracteristicasgeneralesdelproyecto
AutoriaPropia
13 LENGUAJE DE PROGRAMACIÓN III TRANSVERSAL
ElseguintearchivoesunaclastradicionalllamadaObjetoRemotoImplementacion.java
AutoriaPropia
ServidorRMI
AutoriaPropia
ClienteRMI
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áncrearaplicacionesqueenviaryrecibandatosdemaneraoptima
15 LENGUAJE DE PROGRAMACIÓN III TRANSVERSAL
2.4.2 TALLER DE ENTRENAMIENTO
Nombredeltaller:ControldeNotas Modalidaddetrabajo:Individual
Actividadprevia:
Repaselosmétodosyprocesosdeenvíoyrecepcióndeinformación
Describalaactividad:
Realiceuningresodenotasdeunalumnoyelclientedebedetenerlaopcióndeconsultaryhacerunreclamosobrelanotaobtenida.
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ássimpleycontrolada
OBJETIVOGENERAL
Manejar nuevas herramientas de desarrollo como el Hibernate, conociendo las bondades de este tipocomplementoqueposibilitalaconstrucciónmásrápidodeunaplicativotradicional.
OBJETIVOSESPECÍFICOS
Identificarlasprincipalescaracterísticasdeunframework
Identificarloscomponentes,sentenciasyformasdetrabajoconHibernate
3.2 TEMA 1 CONCEPTOS DE ORM ORM (Object RelationalMapping), es una técnica de programación para convertir datos entre el lenguaje deprogramació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ódigonecesarioparalograrloqueseconocecomopersistencia de objetos, esto permite lograr una integración con otros patrones como el Modelo-Vista-Controlador.
En general los sistemasde información guardandatos enBD relacionales comoOracle,mysql, sqlServer, etc,dentrodelosprocesosmáscomunestenemosqueundepartamentodeunaempresatienevariosempleados,perounempleadopertenecesoloaundepartamento.
Hibernateresuelvealgunosinconvenientesconlarepresentacióndeunmodelorelacionalmedianteunconjuntodeobjetos,enestecasolosmodelosrepresentantablasylosatributosdelasclasessonloscamposdelastablas.
ParamapearunmodelorelacionalsepuedenutilizarformatosXMLoconanotaciones.
3.4 TEMA 3 CLAVES PRIMARIAS Y TIPOS DE DATOS Dentrodelascaracterísticasdelhibernateestánsustiposdedatos
• integer • long
19 LENGUAJE DE PROGRAMACIÓN III TRANSVERSAL
• short
• float
• double
• character
• byte
• boolean
• yes_no
• true_false
• string
• date
• time
• timestamp
• text
• binary
• big_decimal
• big_integer
Muchosdeellosmuyconocidosporeltrabajodejavaotrosnotantoymáscomunesenestetipodeframework.
Estosdatostienenunaclasificacióncomo
• Fechayhora
• Date,timeytimestamp
• Boolean
• Yes_no,true_false,Boolean
• Texto
• Stringytext
GENERACIÓNDECLAVESPRIMARIAS
Hibernatetienemúltiplesformasdetratarlasclavesprimarias,lamássimpleescuandoeldesarrolladorindicalaclavequetendráelobjeto,esteprocesoseconocecomo“assigned”.
HibernateQueryLanguage
ElHQLesellenguajedeconsultasdelHibérnate,estetipodesentenciastienenalgunascaracterísticasquefacilitanel uso de la herramienta, aunque hay que tener presente casos como la sensibilidad de las mayúsculas yminúsculasqueenlassentenciascomotalnoinfluyen,teniendopresentequepuedeserSelect,seLect,selecTynopresentaríaningúninconvenienteeneltrabajo.
20 LENGUAJE DE PROGRAMACIÓN III TRANSVERSAL
EsmuycomúnverenHibernate la instrucciónfromsinprocesosprevioscomoseestáacostumbradoaotrasherramientaslomismoquelasunionesconlainstrucció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 trabajoorganizado,enhibernateescomúnencontrarquelasvalidacionesestánasociadasaanotaciones
@NotNull
Estapropiedadindicaquenopuedeestarnulo
@Size(min=n,max=m):
Estapropiedadcontrolaquelainformaciónnoseanulayquecontengaunmínimodecaracteresyunmáximo.
Otrasvalidacionesson
• @AssertFalse
• @AssertTrue
• @Digits(integer=n,fraction=m)
• @Future
21 LENGUAJE DE PROGRAMACIÓN III TRANSVERSAL
• @Past
• @Max(n)
• @Min(n)
• @NotNull
• @Null
• @Pattern(regexp=“r”)
• @Size(min=n,max=m).
• @NotBlank
• @Valid
3.6 TEMA 5 ARQUITECTURA LaarquitecturaentérminosgeneralesdelHibenateeslasiguiente
22 LENGUAJE DE PROGRAMACIÓN III TRANSVERSAL
AutoríaPropia
LuegodetenerunaBDorganizadaprocedemosconlaconfiguracióninicial
Despuésdehaberingresadoaleclipseyhabercreadounproyectodelaformatradicionalserealizalasiguienteconfiguración,elproyectotendrácomonombrebiblioteca.
EnelmenúHelp/EclipseMarketPlace…
23 LENGUAJE DE PROGRAMACIÓN III TRANSVERSAL
AutoriaPropia
SeprocedeabuscarlainstruccionSQLDevelopmenttools
24 LENGUAJE DE PROGRAMACIÓN III TRANSVERSAL
AutoriaPropia
Apereceranunaseriedeopciones,lascualesconfirmaremos
25 LENGUAJE DE PROGRAMACIÓN III TRANSVERSAL
AutoriaPropia
LuegoseprocedeconelprocesodeagregarHibernateybuscamoslainformaciondelamismamaneraenelHelp/eclipsemarketPlace…
26 LENGUAJE DE PROGRAMACIÓN III TRANSVERSAL
AutoriaPropia
Seaceptanlosterminosysefinaliza.
Sebuscanlaslibrerías
AutoriaPropia
27 LENGUAJE DE PROGRAMACIÓN III TRANSVERSAL
Secopiaysepegandelasiguientemanera,secreaenelproyectounfolderconelnombredeLibydentrodeestasepeganlaslibreriasseleccionadas.
LUEGOENELMENUWINDOWS/PREFERENCES
AutoriaPropia
Estaeslaconfiguraciondelaconexionparaelsistema.
SeseleccionaMySQLcomoherramientadetrabajo
28 LENGUAJE DE PROGRAMACIÓN III TRANSVERSAL
AutoriaPropia
AutoriaPropia
29 LENGUAJE DE PROGRAMACIÓN III TRANSVERSAL
AutoriaPropia
Acaseseleccionaelconectorquetengamosdisponibleoloagregamossinoestadentrodelalista.
Posterioraestaconfiguracionbasicasecontinuaconlasperspecticas
Enelmenudewindows/perspective
30 LENGUAJE DE PROGRAMACIÓN III TRANSVERSAL
AutoriaPropia
AutoriaPropia
Luegodeestoenlaestructuradelprogramaencontramosunaseriedeopcionesnuevas
31 LENGUAJE DE PROGRAMACIÓN III TRANSVERSAL
AutoriaPropia
SeeleccionabotonemergenteenDataBaseConnections,seseleccionaMySQL
AutoriaPropia
32 LENGUAJE DE PROGRAMACIÓN III TRANSVERSAL
AutoriaPropia
Luegoenlasopcionesdeconfiguraciondeleclipseparaandroidrealizamoslasiguientetarea
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
36 LENGUAJE DE PROGRAMACIÓN III TRANSVERSAL
AutoriaPropia
DespuesdeestaconfiguracionseprocedealaactivaciondelageneraciondecodigoporpartedeHibernate
EnelmenuRun/HibernateCodeGeneration/HibernateCodeGenerationConfigurations…
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
41 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 archivolibro.hbm.xml
42 LENGUAJE DE PROGRAMACIÓN III TRANSVERSAL
AutoriaPropia
LuegodeestosecreaunarchivoHibernateUtildentrodeunpaqueteutil
AutoriaPropia
43 LENGUAJE DE PROGRAMACIÓN III TRANSVERSAL
AutoriaPropia
Complementamosconlacreaciondeunainterfaz
New/interfaceylacolocaremosfacadedentrodelpaquetemodeloyagregamoselsiguientecodigo
AutoriaPropia
AcontinuacionsecreaunaclaseLibroDAOysecrearantodoslosmetodosautilizar
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
49 LENGUAJE DE PROGRAMACIÓN III TRANSVERSAL
AutoriaPropia
LuegosecreaunaclaseController.java
50 LENGUAJE DE PROGRAMACIÓN III TRANSVERSAL
AutoriaPropia
PosterioraestearchivosecrearaelpaquetevistaylaclaseFrmLibro
51 LENGUAJE DE PROGRAMACIÓN III TRANSVERSAL
AutoriaPropia
PROGRAMACIONDELOSBOTONES
AutoriaPropia
52 LENGUAJE DE PROGRAMACIÓN III TRANSVERSAL
AutoriaPropia
AutoriaPropia
AutoriaPropia
Conestosprocesoselejemploquedariafuncional.
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 ypreguntas
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ándarmediantelasherramientasdeCSS
AplicarlasvalidacionesnecesariasparacontrolarelingresodelainformacióndentrounformularioHTML ElaborarunCRUDmedianteJSPyServlets
4.2 TEMA 1 HTML / HTML5 HTML
ElHTML(HyperTextMarkupLanguage)esellenguajeconelqueseescribenlaspáginasoestructurasweb,unlenguaje que permite colocar texto de forma estructurada, y que está compuesto por etiquetas, tambiénconocidascomotagsomarcas,queindicanelinicioyelfindecadaelementodeldocumento.
Los documentos HTML deben tener la extensión HTML o HTM, para que puedan ser visualizados en losnavegadoresweb(Browser),seanestoslosmáscomunescomoInternetExplorer,Chrome,Mozilla,Safari,Opera,entreotros.
LosbrowsersseencargandeinterpretarelcódigoHTMLdelosdocumentos,ydemostraralosusuarioslaspáginaswebresultantesdelcódigointerpretado.
ESTRUCTURABASICA
<html> <head> </head> <body>
56 LENGUAJE DE PROGRAMACIÓN III TRANSVERSAL
</body></html>
Lagranmayoríadelasetiquetasestáncompuestasporunaaperturayuncerrado<html></html>,laetiquetaquecontieneelsímboloslash(/)eslaqueindicaelcerrado,otrasetiquetasnosecomponenporparesysecierranalfinaldeella,<br/>estaesuntípicocaso.
Dentrodelaspáginaswebexisteunaestructuracomolavistaalprincipio, laetiqueta<html>y</html>sonlaprimeraylaultimadelapágina,eslaetiquetaqueenmarcaloquevamosarealizar,dentrodeestasetiquetasseubicarandosáreas,lacabecera(head)yelcuerpodelapágina(body).
CABECERA
<head>…</head>
Estaetiquetaalbergaeltítulodelapáginaypermitelainvocacióndeotroselementoscomolosscriptsylashojasdeestiloencascada,elementosqueseveránmásadelante.
<title>primerapáginaweb</title>
<html>
<head>
<title>primerapaginaweb</title>
</head>
CUERPODELAPÁGINA
<body>…</body>
Elcuerpodelapáginaalbergatodoelcontenidoquesevisualizaráporpartedelusuario,ademásel<body>podrátenerelementoscomomuchasotrasetiquetasllamadosparámetros,estosparámetrospermitendarleundiseñooformatoadicional
bgcolor=”color de fondo”, este se puede especificar de varias formas, el nombre del color como red, Green,yellow,etc,osepuedetrabajarconunformatohexadecimalquenosdaunacombinacióndemás16millonesdecolores,esteformatoserepresentaasí#RRVVAA(Rojo,Verde,Azul),losvaloresqueseutilizanparaestecasosonnúmerosde0a9ydeAaF,enlosformatostradicionessecomponenporparejas,lasdosRRrepresentanelrojo,GGverdeyBBazul,deacásaldránlos16millonesdecolores,#FF0000nosarrojarojo,#00FF00,verdey#0000FFazul
57 LENGUAJE DE PROGRAMACIÓN III TRANSVERSAL
Background=”imagendefondo”,paraelmanejodefondossepodráusarcualquierformatodeimagencomoJPG,PNG,GIF,tengapresenteeltamañoylaresoluciónparahacermásagradableesespacioweb.
Background=”fondo.jpg”
COMENTARIOSENHTML
Conmuchafrecuenciaserequierehacercomentariosoanularpartesdelcódigocreado,paraestoseutilizaunaetiquetaqueinhabilitaestaáreadetrabajo
<!--comentario//-->
SALTOSDELÍNEA
Eselequivalenteaunenter,enHTMLloenterqueespecifiquemospresionandolateclaolabarraespaciadoranoseveráalejecutarlapáginaparaestoexisteungrupoespecíficodeetiquetasquepresentanestoscaracteres
<br/>representaraestecarácter
Ejemploderepresentación
AutoriaPropia
Uncódigoconlasetiquetasbásicasydacomoresultado
58 LENGUAJE DE PROGRAMACIÓN III TRANSVERSAL
AutoriaPropia
Seobservaeltítulo“PrimerDocumentoWeb”,ademásenelcuerposeveel fondoazulqueseespecificóyeltexto,perosepuedeverqueeltextoapareceenlamismalíneayenelarchivoeltextoestáseparadoporespacios,acáentraelfuncionamientodelaetiqueta<br/>
AutoriaPropia
Resultado
59 LENGUAJE DE PROGRAMACIÓN III TRANSVERSAL
LINK
Unadelasrazonesprincipalesdeunsitiowebeselmanejodelosvínculosolinks,conestaherramientasepodránrealizarcomunicacionesollamadosconotraspáginasoconotrossitios
Laetiqueta<a></a>eslaencargadaderealizarestatarea,seacompañademúltiplesparámetros,peroexisteunofundamentalqueeshrefqueindicaladirecciónorutadondeseencuentraelarchivooelsitiowebavisitar
AutoriaPropia
AutoriaPropia
60 LENGUAJE DE PROGRAMACIÓN III TRANSVERSAL
Elhipervínculomostraralapalabra“RevistaEnter”,peroelllamadoes<ahref="http://www.enter.co">,loqueseubicaenelhrefesunarutaourl,despuésdeélseubicaunadescripcióndeltextoallamarycierraconlaetiqueta</a>
IMÁGENES
Eldiseñodeunsitiowebnose limitasoloael texto, loscoloreso loshipervínculos, las imagineshacepartefundamentaldelapresentaciónydeacercarsealasimágenescorporativasdelasempresas.
LAETIQUETAQUESEUTILIZAES<img/>
Seutilizacomoparámetrofundamentalsrc(sourceorutadelarchivo)
<imgsrc="logo.png">
AutoriaPropia
Estasimágenesselespuedenagregarbordes,sepuedenconvertirenhipervínculos.
TABLAS
Lastablassoncontenedores,sonherramientasquepermitenrealizardistribucióndeloselementosydentrodeellosubicartexto,imágenes,hipervínculosyotroselementosincluyendotablasanidadas
61 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> </td>estecarácterrepresentaunespacio,enestecódigosemostrarándosfilasy5columnas,enelcarácterespecialhayquetenerpresentequeexisten256caracteresconesteformato,algunosdelosquesonimportantesrepresentanlastildesycaracteresespecialesquelosbrowsersnoreconocenyquemuestranunsímboloquedañaríaelformatooriginal.
62 LENGUAJE DE PROGRAMACIÓN III TRANSVERSAL
Existen algunos parámetros adicionales dentro de los<tr> y los<td>, entre ellos la posibilidad de colocarleformatoscomocoloreseimágenesdefondoylaposibilidaddecambiarfilasocolumnas
COMBINARCOLUMNAS
Paralacombinacióndecolumnasseutilizaelparámetrocolspanyelnúmerodecolumnas
AutoriaPropia
AutoriaPropia
COMBINACIÓNDEFILAS
Lacombinacióndecolumnasserealizaconlasentenciarowspanyelnúmerodefilas
AutoriaPropia
63 LENGUAJE DE PROGRAMACIÓN III TRANSVERSAL
AutoriaPropia
FORMULARIOS
Losformulariossonherramientasquepermitenlainteracciónconelusuario,medianteestossepodránsolicitardatos,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
• áreasdetexto
• botonesdecomando
• botonesderadio(botonesdeopción)
• cajasdechequeo(casilladeverificación)
• lista/menú(comboBox)
• entreotros.
64 LENGUAJE DE PROGRAMACIÓN III TRANSVERSAL
ESTRUCTURA CAJASDETEXTO
<inputname="caja"type="text"id="caja"size="20"maxlength="10"/>
Secreamediantelaetiquetainputcomomuchosdeloselementosdeentradadeinformación,peroseespecificamedianteelparámetrotypequeesuntext,idyelname(nombre)permitenlaidentificacióndelacaja,sizeeselanchoqueseveymaxlengthlacantidaddecaracteresmáximosquesepuedeningresar.
ÁREASDETEXTO
<textareaname="comentario"id="comentario"cols="45"rows="5"></textarea>
Lasáreasdetextosonespaciosmuchomásampliosque lascajasdetexto,secomponepor idynameparaidentificarlas,colsparaelnúmeromáximodecolumnasquesemostraranyrowsparaelnúmeromáximodefilasvisibles
BOTONESDECOMANDO
<inputtype="submit"name="button"id="button"value="Almacenar">
<inputtype="reset"name="button2"id="button2"value="Restablecer">
Dosdelostiposdebotonesmáscomunessonlosdeenvíoylosderestablecer,igualdelosdemáselementoscontienesunidyname,valuéparamostraralusuariounresultadoytypeparadeterminarqueelementoes,enestecasounsubmitparaelenví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
65 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ónfueradelaetiquetaesloqueelusuariovisualizara
AutoríaPropia
HTML5
El HTML5 es una actualización del ambiente que pormuchos años a estado al frente del desarrolloweb, esprobablementeelcambiomássignificativoquehatenidoellenguaje,paraestecapítuloparticularseenfocaranloscambiosalmanejodeformularios,teniendoencuentaqueenotrasáreastambiénsepresentaroncambios,peroporefectosdequeestaúltimaunidadestáenfocadaaldesarrollo y creacióndeCRUDseenfocaramuyparticularmentealoscontroles.
66 LENGUAJE DE PROGRAMACIÓN III TRANSVERSAL
Formularioadiseñar
Creacióndelformularioytablaparalaubicacióndeloselementos
AutoriaPropia
CAJADETEXTOCONCAMPOSREQUERIDOS,FOCOYMENSAJEINTERNO
AutoriaPropia
67 LENGUAJE DE PROGRAMACIÓN III TRANSVERSAL
EnlascajasdetextodeHTMLaligualqueenesteprimerejemploseutilizaidynameparaidentificarelelementosegúnelbrowser,losdemáselementospuedencambiarsegúnelalcance,ademáselHTMLanterioralaversión5soloteníaeneltype,laspalabrastext,hiddenypassword,enestaversiónnuevaencontramosmayornúmerodealternativasyseveránen lossiguientescontroles,paraestecasoparticulardecamposrequeridosseutiliza lasentenciarequired,conestoalmomentodeprocesarlainformaciónsilacajadetextoestuvieravacíamostraríaunmensaje
AutoriaPropia
Ademásdeestosesumalapropiedadautofocus,conestapropiedadllevaelcursoraestacajaconelfindeiniciarelprocesodedigitaciónsinlaayudadelmouse,larecomendaciónparaestapropiedadesquesoloseutiliceenuna de las cajas de texto, la última propiedad que se va a trabajar para las cajas de texto tradicional es elplaceholder,estaopciónmostraraunmensajeenel interiorde lacajadetexto,enelmomentode iniciarelingresodeinformaciónestadesaparecerá,esidealparaahorrarespacioyparadispositivosmóviles.
CORREOELECTRÓNICO
AutoriaPropia
Sepuedeobservarqueeltypecontienelevaloremail,esteantesnosepodíaespecificar,solotextopassword,conesta instrucciónelsistemavalidaraquela informacióningresadaconcuerdeconelformatodeuncorreoelectrónico,sepuedeagregarrequiredsiseprefiere
AutoriaPropia
68 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 correoelectrónico
URL
Lascajasdetextoparaurltendráestapalabraeneltype,validaranqueladireccióndeunsitioseacumplalasnormasmínimas
AutoriaPropia
AutoriaPropia
FECHAS
EnlaversiónpreviadeHTMLparacrearunformatodefechasserecurríaaherramientascomoJavaScript,conelHTML5ylainstruccióndatedentrodeltypesesolucionaesteimpase.
AutoriaPropia
69 LENGUAJE DE PROGRAMACIÓN III TRANSVERSAL
AutoriaPropia
HORA
Seagregalainstruccióntimedentrodeltype
AutoriaPropia
AutoriaPropia
FECHAYHORA
Estaetiquetamezclalasdosanteriores
AutoriaPropia
AutoriaPropia
70 LENGUAJE DE PROGRAMACIÓN III TRANSVERSAL
MESES
Conlainstrucciónmonthenelparámetrotype
AutoriaPropia
AutoriaPropia
SEMANA
Permiteseleccionarelnúmerodesemanadelañoyrepresentarloenlafechaalaquecorresponde
AutoriaPropia
AutoriaPropia
71 LENGUAJE DE PROGRAMACIÓN III TRANSVERSAL
AutoriaPropia
RANGODENÚMEROS
AutoriaPropia
AutoriaPropia
INTERVALOS
AutoriaPropia
AutoriaPropia
72 LENGUAJE DE PROGRAMACIÓN III TRANSVERSAL
4.3 TEMA 2 CSS HOJA DE ESTILO EN CASCADA Conmuchafrecuenciaenlaconstruccióndesitioswebsepresentaquelosformatosnosonuniformesoquesetienenqueaplicarencadapágina,cuandoel sitioesconsiderablementegrandeeste tipode formatosnosonadministrablesysepuederecurriralaconstruccióndeunCSS(CascadingStyleSheet)HojasdeEstiloenCascada.
EstaherramientapermitequedeunamanerasimplesepuedanadministrarNcantidaddepáginasdemanerauniformeyconunacodificaciónsimple
TIPOSDECSS
Existen3categoríasparalosCSS
CSSenlínea:permiteaplicarformatosaunaetiquetaparticular
CSSenbloque:permiteaplicarformatosaunaovariasetiquetasdentrodelmismoarchivo
CSSenarchivo:permitelaadministracióndemúltiplespáginas.
EJEMPLODEUNAPAGINASINFORMATOS
AutoriaPropia
Estosbloquesdecódigocorrespondenaunsitiowebquenotieneformatoalguno,laestructuraeslasiguiente
73 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 el texto, upper (mayúsculas), lower (minúscula),capitalize(primeraletraenmayúscula)
Color:Especificaelcolordefuente,sepuedeespecificarenformatohexadecimal,enformatoRGBoconelnombredelcolor
Background-color:Colordefondo
Background-image:Imagendefondo
Margin:Enesteformatosepuedecrearunamargendecontorno,elvalorqueseespecifiqueaplicaraaladerecha,izquierda,arribayabajo
Margin-left
Margin-right
74 LENGUAJE DE PROGRAMACIÓN III TRANSVERSAL
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
75 LENGUAJE DE PROGRAMACIÓN III TRANSVERSAL
Losdospárrafosestándentrodelaetiqueta<p></p>,perosoloseaplicaelformatoenlíneaalaprimera,estaeslaformaenlaquetrabajaelformatolineal.
FORMATOENBLOQUE
Paralacreacióndeunbloquedeestilosseubicaenlacabeceradelapágina,seespecificalaolasetiquetas,estánaplicaranelformatoatodaslasetiquetasqueseespecifiquen.
AutoriaPropia
Laetiqueta<p>yanotieneformatosenlíneayelresultadoeselsiguiente
AutoriaPropia
Enestecasoseobservaquelosdospárrafostienenlamismadistribuciónylosmismosformatos.
CSSENARCHIVO
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 serequierequeestosformatossedenenvariaspáginasdebemosexpórtalo
EnunarchivoindependienteconextensiónCSSaplicamoslosformatos
Lainvocacióndeunarchivoexternoseaplicadelasiguienteforma
AutoriaPropia
Enelarchivodeejemployanohayformatos,existeelllamadoaunarchivoquecontendráformatosglobalesparatodas laspáginasasociadas.Todas laspáginasdelmismositioquecontenganesta líneadecódigomostraraelmismo formato, si se requiereun cambiode color, de fuente, demárgenes, etc., solo tendráque ingresar alarchivo,cambiarloyalalmacenaryejecutarcualquieradelosarchivosHTMLmostraradichaactualización.
AutoriaPropia
Resultado
77 LENGUAJE DE PROGRAMACIÓN III TRANSVERSAL
AutoriaPropia
FORMATOSENFORMULARIOS
FormulariosinformatosCSS
AutoriaPropia
AestemismoformularioseleaplicanalgunosformatosdeCSS.
78 LENGUAJE DE PROGRAMACIÓN III TRANSVERSAL
AutoriaPropia
Los formatosCSS sonmuchos ymuy variados, aplique losmasesencialesqueestamos tratando, implementenuevasalternativasconcaracteristicasnuevasdeCSS2,CSS3.
79 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 suversatilidad, su granpoder y pordejar una granherencia conotros ambientes como JQuery,Ajax, JSon, etc.,despuésdemuchosañossiguecomounodelosprincipalesdentrodelaprogramaciónweb.
ESTRUCTURA
EnlaestructuranoseentrarámuchoendetallesdadoquetieneunasimilitudconJavayconC++,laformadeestablecerciclosparasomientras,condicionalesoselectoresmúltiplestienenlasmismasestructuras.
JavaScriptsevaautilizarprincipalmentecomoherramientadevalidación,esuntemarelativamentecorto,perodegranimportación,seaplicarásoloestetemapormotivosdeaplicabilidadenuntemaposterior,lautilizacióndelJavaScript(JS)esmuyvariadoymuyamplio,aloqueseinvitaaseguirleyendosobreeltemaynodejarlosoloenestaetapainicial.
FORMULARIOINICIAL
AutoriaPropia
Medianteeste formularioseaplicarán losconceptosdevalidarqueuncamponoestevacíoyquecumpla lascondicionesmínimassolicitadas.
80 LENGUAJE DE PROGRAMACIÓN III TRANSVERSAL
Paraestecasosecuentaconcarnet,nombre,dirección,emailyprofesión,seprocederáconlavalidacióndetodosloscamposquepermitanelingresodedatos.
Paraelmanejode JavaScripthayque tenerpresenteque sepuedeaplicaren condiciones similaresaCSS, sepuedencreartareasenlínea,enbloqueoenarchivosindependientes,paraestecasoseaplicaranlasvalidacionesenunarchivoexterno.
Paraesteejemplosecrearáunarchivollamadovalidar.js,paralavinculacióndeunarchivo.jsdentrodeuno.HTMLseprocedearealizarlasiguientelíneaenlacabeceradelapagina
AutoriaPropia
La instruccióndel scriptespecificael tipoquees texto/ JavaScriptyunparámetrosrcque indica la rutayelarchivodondeseencuentralavalidación
Seutilizaránexpresionesregularesparalavalidación,estopermitiráquedeunaformasencillaycortasepuedarealizarmúltiplesprocesos.
DECLARACIÓNYASIGNACIÓNDELOSCAMPOSDELFORMULARIO
AutoriaPropia
81 LENGUAJE DE PROGRAMACIÓN III TRANSVERSAL
Enlaslíneassiguientessedeclaracadaunadelasvariablesquecontieneelformulario,yseasignaelvalordelascajasdetextoaestasvariablesconlasentenciadocument.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
82 LENGUAJE DE PROGRAMACIÓN III TRANSVERSAL
d indicavalorentero
{12} indicaquesolosepuedeningresar12caracteres
VALIDACIÓNDECAMPOTIPOTEXTO(NOMBRE)
Paralavalidacióndeuncampotipotextoseaplicalaprimeravalidaciónconelfindequeelcamponoestevacíoyluegoseaplicanlascondicionesdelcampo
AutoríaPropia
En esta instrucción se valida que tenga un rango de letras de la “a” a la “z” tanto enminúscula como enmayúscula,unespacioyquetengaunrangodecaracteresentre7y40
VALIDACIÓNDEUNADIRECCIÓN(CAMPOSCONTEXTOYNÚMEROS)
AutoríaPropia
Tieneuncontenidosimilaraelnombre,conlavariaciónde0-9queindicaquerecibenúmerodeceroanueveyguiones,ademásdepermitirunrangodedatos
VALIDACIÓNDECAMPOSEMAIL
AutoríaPropia
83 LENGUAJE DE PROGRAMACIÓN III TRANSVERSAL
Lavalidacióndeestetipodecamposcomprendaunamayorcantidaddealternativas,permitenúmerosenteros,letrasdela“a”ala“z”yunderline(_)antesdelaarroba,despuésdelaarrobatieneunaseriedecaracteressimilaresypermitealfinalentre2y6caracteresparaeldominodeladirección.
Enelúltimoelseseaplicaunreturntrue,estoindicaquecuandocumplatodaslascondicioneslavalidaciónesvalida
Porultimoenelformularioseagregaelllamadoalafunción
AutoríaPropia
Esteeventoonsubmit realizael llamadode la funcióncadaquesepresionaelbotónAlmacenar,comprendereturnvalidación,conesta instrucciónelsistemarecibeeltrueofalsesegúnlavalidacióndeloscampos,elvalor que hay dentro del parámetro action es opcional, ahí se ubica el archivo que se va a trabajar si lascondicionessecumplen.
4.5 TEMA 4 JSP / SERVLETS JSP(JavaServerPage)esunaherramientacomplementariadedesarrolloweb,labasedetodositiowebesyseráHTML,quesecomplementaconherramientascomoCSS,JS,entreotroselementos,JSPhacepartedeunselectogrupodeopcionesquepermitenunamayorinteracción,lacomunicaciónyelaccesoalasBD,setrabajadelladodelservidorynodelclientecomolasotrasherramientas.
Para la creación y utilización de un archivo JSP se trabaja con Eclipse EE, se puede descargar del sitiowww.eclipse.org
AutoríaPropia
TambiénserequieretomcatqueesuncomplementodelApacheypermitelainterpretacióndelsitiodiseñado.
AutoríaPropia
84 LENGUAJE DE PROGRAMACIÓN III TRANSVERSAL
Paraestecapítulosetrabajaráconlaversión8
CREACIÓNDELSERVIDOR
ParaesteprocesodelJSPserequierecrearunservidorconlaolasconfiguracionesnecesariasparalainteraccióneinterpretacióndelanuevacodificación.
UbicadosenlaparteinferiordelIDEenlapestanaServer
AutoríaPropia
SeseleccionaelvínculoNoserversareavailable.Clickthislinktocreateanewserver…
En la ventana contigua se selecciona apache y la versiónmás reciente que se tengadisponible y / o se hayadescargado
85 LENGUAJE DE PROGRAMACIÓN III TRANSVERSAL
AutoríaPropia
SecontinuaconelbotónNext,
86 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 enarchivosdeprogramas,apachesSoftwareFoundationy seselecciona laversióndel tomcat, luegoseaceptayfinaliza
87 LENGUAJE DE PROGRAMACIÓN III TRANSVERSAL
AutoríaPropia
LapestanaServerstieneunaconfiguraciónenestemomentolistaparaserusada
PROBARLACONFIGURACIÓN
AutoríaPropia
Alladoderechodelaopciónserverseencuentrauniconoparalaejecución,verifiqueelbuenfuncionamientodelservidor
AutoríaPropia
SeobservaqueelestadocambiadeStoppedaStartedyestálistoparasuuso
CREACIÓNDELPRIMERPROYECTO
UbicadosenelProjectExploreryconbotónemergente,seseleccionanew/DinamicWebProject
88 LENGUAJE DE PROGRAMACIÓN III TRANSVERSAL
AutoríaPropia
Seespecificaelnombredelproyecto
89 LENGUAJE DE PROGRAMACIÓN III TRANSVERSAL
AutoríaPropia
Ysefinaliza
90 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 JavaResourcesdondeseubicaránlosarchivosconextensión.javayWebContentdondeseubicaránlosarchivosJSP
CREACIÓNDEUNARCHIVOJSP
AutoriaPropia
EnelWebContentbotónemergente,new/JSPFile
91 LENGUAJE DE PROGRAMACIÓN III TRANSVERSAL
AutoríaPropia
Yfinalizalacreación.
APARIENCIAINICIAL
92 LENGUAJE DE PROGRAMACIÓN III TRANSVERSAL
AutoríaPropia
ContienelamayorpartedelcódigoHTMLperoenlaprimeralíneadecódigoseveunaseriedesímbolospropiosdeJSP
<%@%>
EstossonlossímbolosquerepresentaneltrabajoconJSP,indicaademásellenguaje,elcontextoyunacoleccióncomoeslaISO.
CREACIÓNDEUNFORMULARIO
AutoríaPropia
Este formulario tiene lasmismas características de los temas anteriores (creación de formularios), se ubicadentrodelbodydelarchivocreado,sepodráejecutar,aunquenoarrojeningúnresultado.
APLICACIÓNDELAOPERACIÓNMEDIANTEARCHIVOJSP
SecreaunarchivonuevollamadoResultado.jspyseinvocaenelformularioanteriorenelparámetroactionelnombredelarchivoylaextensióndeeste.
AutoríaPropia
AutoríaPropia
93 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 estableceautomáticamente,peroseempiezaviendounparámetrocomoactionquecontieneunvalor(Resultado.jsp),estaaccióneselarchivoolafunciónquesedeseaejecutar.
ObserveenelarchivoResultado.jspqueaunavariablefloatpvselehaceunaconversiónydentrodeestaaparecelainstrucciónrequest.getParameter,estainstruccióntomaelcontenidodelacajadetextoprimerValor,lomismosucedeparalasegundavariable,tengamuypresentelaescrituradelasvariablesocampos,eljavaessensibleamayúsculasyminúsculas.
AplicacióndelMismoformulariomedianteServlets
Losservletssonarchivosconextensiónjavadiseñadosparaelmanejodelosdatosdeunformulariomediantemétodoscomopost(doPost)get(doGet)
CREACIÓNDEUNSERVLET
94 LENGUAJE DE PROGRAMACIÓN III TRANSVERSAL
AutoríaPropia
ConelbotónemergenteubicadossobreelsrcdelJavaResources,new/Servlet
AutoríaPropia
95 LENGUAJE DE PROGRAMACIÓN III TRANSVERSAL
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,unadeellasonlosBeansoJavaBeans,estemodeloopatrón,cumplelatareade“claseprincipal”,enunaclasesincara(sindiseñográfico)peropermiteeltránsitodelainformación,todoslosprocesospasanporestaclase,lainformaciónseactualizaenestayelprocesoquelorequierasiempreycuandotengaaccesopodrátomarlosprocesarlosydevolverlos,asíenuncicloconstantelainformaciónestarádisponible,ademásdebrindarseguridadyquenosetengaqueaccederhastaelformulariooaotraclasesmásrestringidas.
CREACIÓNDEUNJAVABEAN
SecreaunaclaseEmpleado.java
97 LENGUAJE DE PROGRAMACIÓN III TRANSVERSAL
AutoríaPropia
Esteeseliniciotípicodeunbeanenjava,luegodeesteprocesoseprocedeacrearoagenerarlosgettes/setters
Ubicadosencualquieradeloscamposyconelbotónemergenterealizamoslageneracióndelosgetters/setters
AutoríaPropia
Despuésdeestoseprocedeagenerarcualessonloscamposquesedeseanincluir
98 LENGUAJE DE PROGRAMACIÓN III TRANSVERSAL
AutoríaPropia
Acáseobservanalgunasdeellasyageneradas
99 LENGUAJE DE PROGRAMACIÓN III TRANSVERSAL
AutoríaPropia
4.7 TEMA 6 CRUD LacreacióndeunCRUDmedianteambientesdeprogramaciónsiemprecumpleunosmínimosrequisitos,paraestecasoseiniciaráconunMER(ModeloEntidadRelación)
100 LENGUAJE DE PROGRAMACIÓN III TRANSVERSAL
AutoríaPropia
EsteMER se creará medianteMySQL y se aplicaran procedimientos almacenados para las tareas básicas deinsertar,consultar,modificar,eliminar.
PosterioraestoseutilizaráelconectordeMySQL,esteconectordebedeubicarseenlacarpetaLIBdeTomcat.
PROYECTO
SecrearáunproyectoUniversidad
Paquetesdetrabajo
Control
Modelo
Utilidad
Utilidad
SecreaelarchivoConexion.java(Class)
101 LENGUAJE DE PROGRAMACIÓN III TRANSVERSAL
AutoríaPropia
CREACIÓNDELOSJAVABEANS
ArchivoCiudad.java
102 LENGUAJE DE PROGRAMACIÓN III TRANSVERSAL
AutoríaPropia
CREACIÓNDELARCHIVODAO,CIUDADDAO.JAVA
Estearchivocontienelosmétodosdetrabajoparainsertar,consultar,modificaryeliminar
Seespecificaránlosmétodosyluegoseaplicaránsegúnsunecesidad.
EstearchivoCiudadDAO.javaesunaclasetradicional.
INICIODELARCHIVOCIUDADDAO
103 LENGUAJE DE PROGRAMACIÓN III TRANSVERSAL
AutoríaPropia
MÉTODODEINSERTAR
AutoríaPropia
MÉTODODELISTADO
104 LENGUAJE DE PROGRAMACIÓN III TRANSVERSAL
AutoríaPropia
ELIMINAR
105 LENGUAJE DE PROGRAMACIÓN III TRANSVERSAL
AutoríaPropia
CONSULTAR
AutoríaPropia
MODIFICAR
106 LENGUAJE DE PROGRAMACIÓN III TRANSVERSAL
AutoríaPropia
TodosestosprocesostienenelmismoorigendelCRUDcreadoenjavaSE,lassentenciasyloscomandossonlosmismos
FACHADA
Lafachadaenelambientewebcambiaunpoco,tieneunacodificaciónmásespecíficadecadatarea.
SeconstruiráunaFachadaoFacadeparalaciudadysellamaraFachadaCiudad.java,estearchivoesunservlet.
107 LENGUAJE DE PROGRAMACIÓN III TRANSVERSAL
AutoríaPropia
EstafachadainstanciaCiudadDAOdondeseencuentranlosprocesospreviamentecreados,instanciaCiudadquecontienelosBean,posteriormenteseencuentrandoslíneasquetienenconstantes,unadeellasLISTARylaotraMODIFICAR,hacereferenciaasusrespectivasURLsyposteriormenteunconstructorconlainstanciadefinitivadelasdosclasesantesmencionadas.
Acontinuación,sedesarrollaelmétododoget
108 LENGUAJE DE PROGRAMACIÓN III TRANSVERSAL
AutoríaPropia
Estemétodorecibelasordenessegúnlatareaquesepretendedesarrollar,lavariableopcrecibiráunapalabraclave, sea para insertar, consultar, modificar o eliminar, se evalúa cual de las opciones es la correcta y seimplementa.
Ejemplo
AutoríaPropia
Seevalúasilaopciónqueserecibeeslistar,alavariableacciónseleasignaunaconstantequeasuveztieneunaURLasignadayporúltimoseinvocaelmétodociudadDAO.listado,esteeselmétododelarchivoDAO,esteprocesosellevaaunlistarCiudadqueesunarreglodedatos.
Alfinaldeestemétodoseencuentraunpardelíneas
AutoríaPropia
109 LENGUAJE DE PROGRAMACIÓN III TRANSVERSAL
Permitenlainvocacióndelprocesoquetengaasignadolavariableacción,porejemplo,siseinsertaromodificadespuésdehacerlatareavaallamarellistadoparacorroborarquesiestáfuncionando.
AutoríaPropia
Formulariodetrabajo,Ciudad.jsp
AutoriaPropia
Esteformularioestradicionalalosvistosanteriormente,enelactiontieneelsiguientellamado
AutoriaPropia
Estaprimerapartees funcional, yaalmacena información, sevaa complementar realizando lasdemás tareasdesdeunarchivoindex.jspyellistadodeinformación.
INDEX.JPS
Elarchivodeíndexsevaautilizarcomomedioparallamarlasopcionesquesedesean.Paraelejemploinicialsolocontendrálainserciónyellistadoydesdeestaúltimairalaeliminaciónymodificación.
110 LENGUAJE DE PROGRAMACIÓN III TRANSVERSAL
AutoriaPropia
ARCHIVOLISTARCIUDAD.JSP
AutoriaPropia
Estearchivocontienealgunascaracterísticasdeconfiguración,comolas3primeraslíneasenlasqueserealizaelllamadoalalibreríajstl,parauncorrectofuncionamientodellistado.
LosdemásprocesossondeunatablatradicionaldeHTML
111 LENGUAJE DE PROGRAMACIÓN III TRANSVERSAL
AutoriaPropia
Lasegundapartedelarchivocomprende
AutoriaPropia
Lautilizacióndelarregloomatrizdedatos,estaseespecificodesdelafachadaCiudadyseagregaunparámetrovarcomoaliasdeestamatriz
AutoriaPropia
Sehaceusodelaliasydelcampoquesedeseavisualizar(nombreasignadoenlaclaseprincipaldegetters/setters),esteprocesoserepitaparacuantoscamposdeseamosmostrarenpantalla.
Ellistarquedaríadeestamanera.
AutoriaPropia
MODIFICACIÓN
112 LENGUAJE DE PROGRAMACIÓN III TRANSVERSAL
ElarchivodemodificacionCiudad.jsp,tieneundiseñosimilaraldeinsertarCiudad.jsp,adicionandolassiguienteslíneasenlapartesuperior
AutoriaPropia
Yencadacajadetextoseaplicaríalosiguiente
AutoriaPropia
Esteprocesoyaesoperativoparaunatablamaestra.
Tenga presente que el modificar puede ser el procesomás largo, luego de listar información, se consulta yposterioraestosealmacena.
113 LENGUAJE DE PROGRAMACIÓN III TRANSVERSAL
4.7.1 EJERICICIO DE APRENDIZAJE
Nombredeltallerdeaprendizaje:JSP Datos del autor del taller: Cesar AugustoJaramilloHenao
Escribaoplanteeelcaso,problemaopregunta:
ParalaconstruccióndeunarchivoWebconjavasetienenqueusarlosServlets
Solucióndeltaller:
No,enalgunoscasossepodríatrabajarsoloconJSP,losservletscontienenunaprogramaciónmásnativa,ymássegura
4.7.2 TALLER DE ENTRENAMIENTO
Nombredeltaller:Veterinaria Modalidaddetrabajo:Individual
Actividadprevia:
RealicecompletamenteelCRUDdejspyservletsvistoenlaúltimaunidad,estodarálasbasesnecesariasparaeltrabajoposterior.
Describalaactividad:
Creeunproyectoquecubratodoslostemasdelaunidad5,apliqueformatosyvalidacionesyunCRUDquecomprendavariastablasincluyendotablasmaestras,referencialeseintermedias.
114 LENGUAJE DE PROGRAMACIÓN III TRANSVERSAL
5 PISTAS DE APRENDIZAJE Recuerdeque:programaciónwebesunrecursomuyamplioquemanejamúltipleslenguajesyelementos
Tengaencuenta:laprogramaciónutilizadaesbasadaenjavatantoparajavaSEcomoparaJavaEE
Traigaalamemoria:quelamayorpartedecomandoeinstruccionessonlosmismosenjavaSEqueenjavaEE
115 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 massimplificada
• Propertie:Extensióndearchivoquepermiteaccederarecursosfueradelacompilación
• Conector:Archivoquecontieneloselementosnecesariosparavincularunproyectoconunmotordebasesdedatos
• Reportes:Herramientadevisualizacióndeinformacióngeneraloespecifica
116 LENGUAJE DE PROGRAMACIÓN III TRANSVERSAL
• Documentación: Herramienta de ayuda para el desarrollador y el control de los procesos realizados enperiodosdetiempo.
117 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