lab4Creating a Simple Web Application Using a MySQL DatabaseWord文档下载推荐.docx
《lab4Creating a Simple Web Application Using a MySQL DatabaseWord文档下载推荐.docx》由会员分享，可在线阅读，更多相关《lab4Creating a Simple Web Application Using a MySQL DatabaseWord文档下载推荐.docx（22页珍藏版）》请在冰豆网上搜索。
oAddingJSPandJSTLCode
∙DeployingandRunningtheProject
∙SeeAlso
Tofollowthistutorial,youneedthefollowingsoftwareandresources.
SoftwareorResource
VersionRequired
NetBeansIDE
WebandJavaEEinstallation
version6.0
JavaDeveloperKit（JDK）
version6orversion5
MySQLdatabaseserver
version5.x
MySQLConnector/JJDBCDriver
GlassFishapplicationserver
or
Tomcatservletcontainer
V2
version6.x
Notes:
∙TheNetBeansIDE6.1withGlassfishandMySQLBundleDownloadprovidesyouwithanall-in-onepackageofsoftwarerequiredforthistutorial.
∙TheWebandJavaEEinstallationenablesyoutooptionallyinstalltheGlassFishV2applicationserverandtheApacheTomcatservletcontainer6.0.x.Youmustinstalloneofthesetoworkthroughthistutorial.
∙TheMySQLConnector/JJDBCDriver,necessaryforcommunicationbetweenJavaplatformsandtheMySQLdatabaseprotocol,isincludedinNetBeansIDE6.x.
∙Ifyouneedtocompareyourprojectwithaworkingsolution,youcandownloadthesampleapplication.
PlanningtheStructure
Simplewebapplicationscanbedesignedusingatwo-tierarchitecture,inwhichtheapplicationcommunicatesdirectlywithadatasourceusingtheJavaDatabaseConnectivityAPI.Auser'
srequestsaresenttoadatabase,andtheresultsaresentdirectlybacktotheuser.Two-tierarchitecturescanbeeasilymappedtoaclient-serverconfiguration,whereauser'
sbrowserservesastheclient,andaremotedatabasereachableovertheInternetcorrespondstotheserver.
TheapplicationyoubuildinthistutorialinvolvesthecreationoftwoJavaServerPages.Ineachofthesepages,youaddbasicHTMLtoimplementasimpleinterface,followedbySQLtagsprovidedbyJSTLtechnologyinordertoquerythedatabase.Considerthefollowingclient-serverscenario:
Thewelcomepage（index.jsp）presentstheuserwithasimpleHTMLform.Whenaclientrequeststheindex.jsppage,theJSPcodecontainedthereinisparsed,anddatafromtheSubjectdatabasetableisgathered,addedtothepage,andsenttotheclient.TheusermakesaselectionintheprovidedHTMLformandsubmits,whichcausestheclienttomakearequestforresponse.jsp.Whenresponse.jspisparsed,datafromboththeSubjectandCounselortablesisgatheredandinsertedintothepage.Finally,thepageisreturnedtotheclientandtheuserviewsdatabaseduponhisorherselection.
CreatingaNewProject
Inordertoimplementthescenariodescribedabove,youdevelopasimpleapplicationforafictitiousorganizationnamedIFPWAFCAD,orTheInternationalFormerProfessionalWrestlers'
AssociationforCounselingandDevelopment.Theapplicationenablesausertochooseacounselingsubjectfromadrop-downlist（index.jsp）,thenretrievesdatafromtheMySQLdatabaseandreturnstheinformationtotheuser（response.jsp）:
index.jsp
response.jsp
CreateanewprojectintheIDE:
1.StartNetBeansIDEandchooseFile>
NewProject（Ctrl-Shift-N）fromthemainmenu.UnderCategoriesselectWeb;
underProjectsselectWebApplication.ClickNext.
2.InProjectName,enterIFPWAFCAD.FromtheServerdrop-downlist,selecttheserveryouplanworkwith.LeaveallothersettingsattheirdefaultsandclickFinish.
TheIDEcreatesaprojecttemplatefortheentireapplication,andopensanemptyJSPpage（index.jsp）intheSourceEditor.index.jspservesastheentrypointfortheapplication.ThenewprojectisstructuredaccordingtoSunJavaBluePrintsguidelines.
PreparingtheInterface
Beginbypreparingasimpleinterfaceforthetwopages.Bothindex.jspandresponse.jspimplementanHTMLtabletodisplaydatainastructuredfashion.index.jspalsorequiresanHTMLformthatincludesadrop-downlist.
Makesureindex.jspisopenedintheSourceEditor.Ifitisnotalreadyopen,double-clickindex.jspfromIFPWAFCAD>
WebPagesintheProjectswindow.
1.IntheSourceEditor,changethetextbetweenthe<
title>
tagstoIFPWAFCADHomepage.
Alsochangethetextbetweenthe<
h2>
tagstoWelcometoIFPWAFCAD,theInternationalFormerProfessionalWrestlers'
AssociationforCounselingandDevelopment!
.
Note:
Forfurthercontent,youcaneitheraddHTMLelementstothepageusingtheIDE'
spalette,asdemonstratedbelow,orjustcopyandpastethecodeprovidedinstep8directlyintoyourindex.jsppage.
2.OpentheIDE'
sPalettebychoosingWindow>
Palette（Ctrl-Shift-8）fromthemainmenu.HoveryourpointerovertheTableiconfromtheHTMLcategoryandnotethatthedefaultcodefortheitemdisplays:
Clicktheicon,anddraganddropatableintothepageintheSourceEditor,toapointjustafterthe<
tags.IntheInsertTabledialogthatdisplays,specifythefollowingcriteria,thenclickOK:
oRows:
2
oColumns:
1
oBorderSize:
0
TheHTMLtablecodeisgeneratedandaddedtoyourpage.
3.Addthefollowingcontenttothetableheadingandthecellofthefirsttablerow（newcontentinbold）:
4.<
tableborder="
0"
>
5.<
thead>
6.<
tr>
7.<
th>
IFPWAFCADoffersexpertcounselinginawiderangeoffields.<
/th>
8.<
/tr>
9.<
/thead>
10.<
tbody>
11.<
12.<
td>
ToviewthecontactdetailsofanIFPWAFCADcertifiedformer
13.professionalwrestlerinyourarea,selectasubjectbelow:
14.<
/td>
<
15.Forthebottomrowofthetable,draganddropanHTMLformfromthePaletteintothepage,directlybetweenthesecondpairof<
tags.IntheActiontextbox,typeinresponse.jsp,thenclickOK.
16.Typeinthefollowingtextbetweenthe<
form>
tagsoftheformyoujustcreated:
<
strong>
Selectasubject:
/strong>
17.Draganddropadrop-downlistfromthePalettetoapointjustbeneaththetextyoujustadded.IntheInsertDrop-downdialogthatdisplays,typeinsubject_idfortheNametextfield,andclickOK.Thenumberofoptionsforthedrop-downiscurrentlynotimportant.LaterinthetutorialyouwilladdJSTLtagsthatdynamicallygenerateoptionsbasedonthedatagatheredfromtheSubjectdatabasetable.ClickOK,andnotethatthecodeforthedrop-downlistisaddedtotheform.
18.AddasubmitbuttontotheformbydraggingabuttonfromthePalettetoapointjustafterthedrop-downlistyoujustadded.EntersubmitforboththeLabelandNametextfields,thenclickOK.
19.Toformatyourcode,right-clickintheSourceEditor,andchooseFormat（Alt-Shift-F）.Yourcodeisautomaticallyformatted,andshouldnowlooksimilartothefollowing:
20.<
body>
21.<
Welcometo<
IFPWAFCAD<
theInternationalFormer
22.ProfessionalWrestlers'
23.<
/h2>
24.
25.<
26.<
27.<
28.<
29.<
30.<
31.<
32.<
33.<
34.professionalwrestlerinyourarea,selectasubjectbelow:
35.<
36.<
37.<
38.<
39.<
formaction="
response.jsp"
40.<
41.<
selectname="
subject_id"
42.<
option>
/option>
43.<
/select>
44.<
inputtype="
submit"
value="
name="
/>
45.<
/form>
46.<
47.<
48.<
/tbody>
49.<
/table>
/body>
Toviewthispageinabrowser,right-clickintheSourceEditorandchooseRunFile（Shift-F6）.Whenyoudothis,theJSPpageisautomaticallycompiledanddeployedtoyourserver.TheIDEopensyourdefaultbrowsertodisplaythepagefromitsdeployedlocation:
Inordertopreparetheinterfaceforresponse.jspyoumustfirstcreatethefileinyourapplication.NotethatmostofthecontentthatdisplaysinthispageisgenerateddynamicallyusingJSPtechnology.Therefore,inthefollowingstepsyouaddplaceholderswhichyouwilllatersubstitutefortheJSPcode.
1.Right-clicktheIFPWAFCADprojectnodeintheProjectswindowandchooseNew>
JSP.TheNewJSPFiledialogopens.
2.IntheJSPFileNamefiel
升级会员 