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.


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.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


1 MAPA DE LA ASIGNATURA


2 UNIDAD 1 REDES

2.1.1 RELACIÓN DE CONCEPTOS

Escribaladefinicióndetodoslosconceptosplateadosenelmapaconceptual

Servidor:Esunaplicativogestordelainformación,proveelosrecursosquesenecesitaporpartedeuncliente

Cliente:Esunaplicativoquesolicitainformaciónaunservidor


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.


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


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


AutoriaPropia

AutoriaPropia


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


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


ElseguintearchivoesunaclastradicionalllamadaObjetoRemotoImplementacion.java

AutoriaPropia

ServidorRMI

AutoriaPropia

ClienteRMI


AutoriaPropia

2.4.1 EJERCICIO DE APRENDIZAJE

Nombredeltallerdeaprendizaje:Enviar/Recibir Datosdelautordeltaller:CesaraugustoJaramilloHenao

Escribaoplanteeelcaso,problemaopregunta:

Sepuedeenviaryrecibirinformaciónyprocesarlosdatosdeformasegura.

Solucióndeltaller:

Si,siseaplicanlosestándaresylasnormasapropiadassepodráncrearaplicacionesqueenviaryrecibandatosdemaneraoptima


2.4.2 TALLER DE ENTRENAMIENTO

Nombredeltaller:ControldeNotas Modalidaddetrabajo:Individual

Actividadprevia:

Repaselosmétodosyprocesosdeenvíoyrecepcióndeinformación

Describalaactividad:

Realiceuningresodenotasdeunalumnoyelclientedebedetenerlaopcióndeconsultaryhacerunreclamosobrelanotaobtenida.


3 UNIDAD 2 INTEGRACION CON HIBERNATE


Escribaladefinicióndetodoslosconceptosplateadosenelmapaconceptual

ORM:Esunmapeodeobjetosrelacionales

ClavesPrimarias:Elementoprincipaldeunatablaquenopermitequeserepitainformacióndeidentificación

Tiposdedatos:Elementosquepermitenlaclasificacióndelainformación.

Asistente:Componentequepermiterealizarprocesoscomplejosdeunaformasimple


Framework:Herramientaquepermitequelaelaboracióndeunaplicativoserealicedeunamaneramássimpleycontrolada

OBJETIVOGENERAL

Manejar nuevas herramientas de desarrollo como el Hibernate, conociendo las bondades de este tipocomplementoqueposibilitalaconstrucciónmásrápidodeunaplicativotradicional.


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.


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


• 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.


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


• @Past

• @Max(n)

• @Min(n)

• @NotNull

• @Null

• @Pattern(regexp=“r”)

• @Size(min=n,max=m).

• @Email

• @NotBlank

• @Valid

3.6 TEMA 5 ARQUITECTURA LaarquitecturaentérminosgeneralesdelHibenateeslasiguiente


AutoríaPropia

LuegodetenerunaBDorganizadaprocedemosconlaconfiguracióninicial

Despuésdehaberingresadoaleclipseyhabercreadounproyectodelaformatradicionalserealizalasiguienteconfiguración,elproyectotendrácomonombrebiblioteca.

EnelmenúHelp/EclipseMarketPlace…


AutoriaPropia

SeprocedeabuscarlainstruccionSQLDevelopmenttools


AutoriaPropia

Apereceranunaseriedeopciones,lascualesconfirmaremos


AutoriaPropia

LuegoseprocedeconelprocesodeagregarHibernateybuscamoslainformaciondelamismamaneraenelHelp/eclipsemarketPlace…


AutoriaPropia

Seaceptanlosterminosysefinaliza.

Sebuscanlaslibrerías

AutoriaPropia


Secopiaysepegandelasiguientemanera,secreaenelproyectounfolderconelnombredeLibydentrodeestasepeganlaslibreriasseleccionadas.

LUEGOENELMENUWINDOWS/PREFERENCES

AutoriaPropia

Estaeslaconfiguraciondelaconexionparaelsistema.

SeseleccionaMySQLcomoherramientadetrabajo


AutoriaPropia

AutoriaPropia


AutoriaPropia

Acaseseleccionaelconectorquetengamosdisponibleoloagregamossinoestadentrodelalista.

Posterioraestaconfiguracionbasicasecontinuaconlasperspecticas

Enelmenudewindows/perspective


AutoriaPropia

AutoriaPropia

Luegodeestoenlaestructuradelprogramaencontramosunaseriedeopcionesnuevas


AutoriaPropia

SeeleccionabotonemergenteenDataBaseConnections,seseleccionaMySQL

AutoriaPropia


AutoriaPropia

Luegoenlasopcionesdeconfiguraciondeleclipseparaandroidrealizamoslasiguientetarea

AutoriaPropia


AutoriaPropia


AutoriaPropia

DespuesdeestaconfiguracionseprocedealaactivaciondelageneraciondecodigoporpartedeHibernate

EnelmenuRun/HibernateCodeGeneration/HibernateCodeGenerationConfigurations…


AutoriaPropia


AutoriaPropia

EnnuestraBDdebibliotecaseagregaraunatablaconloscamposid,nombreydescripcion

Crearemos una clase Libro.java y se gereral los getters / setters, seguido a esto se crea un archivolibro.hbm.xml


AutoriaPropia

LuegodeestosecreaunarchivoHibernateUtildentrodeunpaqueteutil

AutoriaPropia


AutoriaPropia

Complementamosconlacreaciondeunainterfaz

New/interfaceylacolocaremosfacadedentrodelpaquetemodeloyagregamoselsiguientecodigo

AutoriaPropia

AcontinuacionsecreaunaclaseLibroDAOysecrearantodoslosmetodosautilizar


AutoriaPropia


AutoriaPropia

LuegosecreaunaclaseController.java


AutoriaPropia

PosterioraestearchivosecrearaelpaquetevistaylaclaseFrmLibro


AutoriaPropia

PROGRAMACIONDELOSBOTONES

AutoriaPropia


AutoriaPropia

AutoriaPropia

AutoriaPropia

Conestosprocesoselejemploquedariafuncional.


3.6.1 EJERICICIO DE APRENDIZAJE

Nombredeltallerdeaprendizaje:Hibernate Datosdelautordeltaller:CesarAugustoJaramilloHenao


Consideraqueelhibernateesútilparacualquiertipodeaplicación.

Solucióndeltaller:

Sí,notieneunalimitanteounsolopropósito


Nombredeltaller:banco Modalidaddetrabajo:Individual

Actividadprevia:

RealiceeltrabajoconformadoporNomina


Diseñarunprogramaenhibernatequecumplalascondicionesmínimasdeunbanco


4 UNIDAD 3 INTRODUCCION A LA PROGRAMACION WEB


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



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>


</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

Background=”imagendefondo”,paraelmanejodefondossepodráusarcualquierformatodeimagencomoJPG,PNG,GIF,tengapresenteeltamañoylaresoluciónparahacermásagradableesespacioweb.

Background=”fondo.jpg”

COMENTARIOSENHTML

Conmuchafrecuenciaserequierehacercomentariosoanularpartesdelcódigocreado,paraestoseutilizaunaetiquetaqueinhabilitaestaáreadetrabajo



SALTOSDELÍNEA

Eselequivalenteaunenter,enHTMLloenterqueespecifiquemospresionandolateclaolabarraespaciadoranoseveráalejecutarlapáginaparaestoexisteungrupoespecíficodeetiquetasquepresentanestoscaracteres

<br/>representaraestecarácter

Ejemploderepresentación

AutoriaPropia

Uncódigoconlasetiquetasbásicasydacomoresultado


AutoriaPropia

Seobservaeltítulo“PrimerDocumentoWeb”,ademásenelcuerposeveel fondoazulqueseespecificóyeltexto,perosepuedeverqueeltextoapareceenlamismalíneayenelarchivoeltextoestáseparadoporespacios,acáentraelfuncionamientodelaetiqueta<br/>

AutoriaPropia

Resultado


LINK

Unadelasrazonesprincipalesdeunsitiowebeselmanejodelosvínculosolinks,conestaherramientasepodránrealizarcomunicacionesollamadosconotraspáginasoconotrossitios

Laetiqueta<a></a>eslaencargadaderealizarestatarea,seacompañademúltiplesparámetros,peroexisteunofundamentalqueeshrefqueindicaladirecciónorutadondeseencuentraelarchivooelsitiowebavisitar

AutoriaPropia

AutoriaPropia


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


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.


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


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.


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


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.


Formularioadiseñar

Creacióndelformularioytablaparalaubicacióndeloselementos

AutoriaPropia

CAJADETEXTOCONCAMPOSREQUERIDOS,FOCOYMENSAJEINTERNO

AutoriaPropia


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


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


AutoriaPropia

HORA

Seagregalainstruccióntimedentrodeltype

AutoriaPropia

AutoriaPropia

FECHAYHORA

Estaetiquetamezclalasdosanteriores

AutoriaPropia

AutoriaPropia


MESES

Conlainstrucciónmonthenelparámetrotype

AutoriaPropia

AutoriaPropia

SEMANA

Permiteseleccionarelnúmerodesemanadelañoyrepresentarloenlafechaalaquecorresponde

AutoriaPropia

AutoriaPropia


AutoriaPropia

RANGODENÚMEROS

AutoriaPropia

AutoriaPropia

INTERVALOS

AutoriaPropia

AutoriaPropia


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


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


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


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


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


AutoriaPropia

FORMATOSENFORMULARIOS

FormulariosinformatosCSS

AutoriaPropia

AestemismoformularioseleaplicanalgunosformatosdeCSS.


AutoriaPropia

Los formatosCSS sonmuchos ymuy variados, aplique losmasesencialesqueestamos tratando, implementenuevasalternativasconcaracteristicasnuevasdeCSS2,CSS3.


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.


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


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


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


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


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


AutoríaPropia

SecontinuaconelbotónNext,


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


AutoríaPropia

LapestanaServerstieneunaconfiguraciónenestemomentolistaparaserusada

PROBARLACONFIGURACIÓN

AutoríaPropia

Alladoderechodelaopciónserverseencuentrauniconoparalaejecución,verifiqueelbuenfuncionamientodelservidor

AutoríaPropia

SeobservaqueelestadocambiadeStoppedaStartedyestálistoparasuuso

CREACIÓNDELPRIMERPROYECTO

UbicadosenelProjectExploreryconbotónemergente,seseleccionanew/DinamicWebProject


AutoríaPropia

Seespecificaelnombredelproyecto


AutoríaPropia

Ysefinaliza


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


AutoríaPropia

Yfinalizalacreación.

APARIENCIAINICIAL


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


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


AutoríaPropia

ConelbotónemergenteubicadossobreelsrcdelJavaResources,new/Servlet

AutoríaPropia


Ysefinaliza.

ComponentesdelServlet

AutoríaPropia

Secomponeensupartesuperiorconlospaquetesdeuso,unaanotaciónfundamentalenlaejecucióndeeste@WebServlet,nombredelaclaseconstructor

METODODOPOSTYDOGET

AutoríaPropia

Útilesparalarecepcióndelainformación,estallegainicialmentealdoGetyalserprocesadapasaaldoPost

IMPLEMENTACIÓN


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


AutoríaPropia

Esteeseliniciotípicodeunbeanenjava,luegodeesteprocesoseprocedeacrearoagenerarlosgettes/setters

Ubicadosencualquieradeloscamposyconelbotónemergenterealizamoslageneracióndelosgetters/setters

AutoríaPropia

Despuésdeestoseprocedeagenerarcualessonloscamposquesedeseanincluir


AutoríaPropia

Acáseobservanalgunasdeellasyageneradas


AutoríaPropia

4.7 TEMA 6 CRUD LacreacióndeunCRUDmedianteambientesdeprogramaciónsiemprecumpleunosmínimosrequisitos,paraestecasoseiniciaráconunMER(ModeloEntidadRelación)


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)


AutoríaPropia

CREACIÓNDELOSJAVABEANS

ArchivoCiudad.java


AutoríaPropia

CREACIÓNDELARCHIVODAO,CIUDADDAO.JAVA

Estearchivocontienelosmétodosdetrabajoparainsertar,consultar,modificaryeliminar

Seespecificaránlosmétodosyluegoseaplicaránsegúnsunecesidad.

EstearchivoCiudadDAO.javaesunaclasetradicional.

INICIODELARCHIVOCIUDADDAO


AutoríaPropia

MÉTODODEINSERTAR

AutoríaPropia

MÉTODODELISTADO


AutoríaPropia

ELIMINAR


AutoríaPropia

CONSULTAR

AutoríaPropia

MODIFICAR


AutoríaPropia

TodosestosprocesostienenelmismoorigendelCRUDcreadoenjavaSE,lassentenciasyloscomandossonlosmismos

FACHADA

Lafachadaenelambientewebcambiaunpoco,tieneunacodificaciónmásespecíficadecadatarea.

SeconstruiráunaFachadaoFacadeparalaciudadysellamaraFachadaCiudad.java,estearchivoesunservlet.


AutoríaPropia

EstafachadainstanciaCiudadDAOdondeseencuentranlosprocesospreviamentecreados,instanciaCiudadquecontienelosBean,posteriormenteseencuentrandoslíneasquetienenconstantes,unadeellasLISTARylaotraMODIFICAR,hacereferenciaasusrespectivasURLsyposteriormenteunconstructorconlainstanciadefinitivadelasdosclasesantesmencionadas.

Acontinuación,sedesarrollaelmétododoget


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


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.


AutoriaPropia

ARCHIVOLISTARCIUDAD.JSP

AutoriaPropia

Estearchivocontienealgunascaracterísticasdeconfiguración,comolas3primeraslíneasenlasqueserealizaelllamadoalalibreríajstl,parauncorrectofuncionamientodellistado.

LosdemásprocesossondeunatablatradicionaldeHTML


AutoriaPropia

Lasegundapartedelarchivocomprende

AutoriaPropia

Lautilizacióndelarregloomatrizdedatos,estaseespecificodesdelafachadaCiudadyseagregaunparámetrovarcomoaliasdeestamatriz

AutoriaPropia

Sehaceusodelaliasydelcampoquesedeseavisualizar(nombreasignadoenlaclaseprincipaldegetters/setters),esteprocesoserepitaparacuantoscamposdeseamosmostrarenpantalla.

Ellistarquedaríadeestamanera.

AutoriaPropia

MODIFICACIÓN


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.


4.7.1 EJERICICIO DE APRENDIZAJE

Nombredeltallerdeaprendizaje:JSP Datos del autor del taller: Cesar AugustoJaramilloHenao


ParalaconstruccióndeunarchivoWebconjavasetienenqueusarlosServlets

Solucióndeltaller:

No,enalgunoscasossepodríatrabajarsoloconJSP,losservletscontienenunaprogramaciónmásnativa,ymássegura


Nombredeltaller:Veterinaria Modalidaddetrabajo:Individual

Actividadprevia:

RealicecompletamenteelCRUDdejspyservletsvistoenlaúltimaunidad,estodarálasbasesnecesariasparaeltrabajoposterior.


Creeunproyectoquecubratodoslostemasdelaunidad5,apliqueformatosyvalidacionesyunCRUDquecomprendavariastablasincluyendotablasmaestras,referencialeseintermedias.


5 PISTAS DE APRENDIZAJE Recuerdeque:programaciónwebesunrecursomuyamplioquemanejamúltipleslenguajesyelementos

Tengaencuenta:laprogramaciónutilizadaesbasadaenjavatantoparajavaSEcomoparaJavaEE

Traigaalamemoria:quelamayorpartedecomandoeinstruccionessonlosmismosenjavaSEqueenjavaEE


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


• Documentación: Herramienta de ayuda para el desarrollador y el control de los procesos realizados enperiodosdetiempo.


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

LENGUAJE DE PROGRAMACIÓN III - …imagenes.uniremington.edu.co/moodle/Módulos de...

Documents

Transcript of LENGUAJE DE PROGRAMACIÓN III - …imagenes.uniremington.edu.co/moodle/Módulos de...