Eclipse Web Development I

We are going to use Eclipse to make the Web Development. Web Development has static web development which focus only on HTML web page, while dynamic web development focus on the interaction between web page and back end database/Servlet/…

The platform we use is Eclipse Java EE package, Tomcat Web Server, and database (MySQL we will worry about it later).

download zip file and unzip them in your C:/tomcat7

the installation is different between MacOS and Windows. For Windows you have to do unzip; for MacOS, double click then install to the application.

  • The First Web in Eclipse
    • Open Eclipse–>New–>Other… –>Screen Shot 2017-05-07 at 11.20.06 AM
    • Select a wizard –> Web —> Dynamic Web ProjectScreen Shot 2017-05-07 at 11.20.30 AM
    • Dynamic Web Project: MyWeb. Since we are using Tomcat to be our Web Server, we can define Target Runtime by choosing New Runtime … Screen Shot 2017-05-07 at 11.20.49 AM
    • Choose Apache Tomcat v7.0, then nextScreen Shot 2017-05-07 at 11.21.04 AM
    • We need to browse to Tomcat installation directory, which is where you unzip tomcat packageScreen Shot 2017-05-07 at 11.21.19 AMScreen Shot 2017-05-07 at 11.22.42 AM
    • click next >Screen Shot 2017-05-07 at 11.22.57 AM
    • Context roo is MyWeb. The Content directory is WebContent, where we usually put our web files inScreen Shot 2017-05-07 at 11.23.07 AMScreen Shot 2017-05-07 at 11.23.18 AM
    • Now we can develop our first web site: MyWeb. Right click WebContent folder, choose New –>HTML FileScreen Shot 2017-05-07 at 11.23.53 AMScreen Shot 2017-05-07 at 11.24.07 AM
    • File name is index.htmlScreen Shot 2017-05-07 at 11.24.22 AM
    • Choose html 5Screen Shot 2017-05-07 at 11.24.35 AM
    • We modify title as MyWeb between <title> </title>. In <body> </body>, insert a
      My First Web!

      and then saveScreen Shot 2017-05-07 at 11.25.40 AM

    • right click the web project MyWeb, choose Run As –> Run on Server –> Screen Shot 2017-05-07 at 11.25.51 AM
    • Choose the localhost Tomcat v7.0 Server at localhost, click next –>Screen Shot 2017-05-07 at 11.26.04 AM
    • Choose MyWeb (Since we don’t have any other web, we have nothing to do but click next)Screen Shot 2017-05-07 at 11.26.11 AM
    • Web project MyWeb is deployed in localhost and run in the web browswerScreen Shot 2017-05-07 at 11.26.25 AM
    • You are correct if you can see the same screen like below: MyWeb is the title, and My First Web! is what we inserted into the body!Screen Shot 2017-05-07 at 11.49.09 AM

 

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s