In this lab, you will use Rational Application Develiper to create a simple Web site. You will deploy your Web site to a WebSphere server that will run locally on your lab computer.
Ask your instructor for the following information:
Lab Installation directory: ________________________________________
If your computer has the standard lab setup, the directories will be something like:
Lab Installation Directory: c:\Users\username\webclass
Substitute your computer's actual user name.
Start RAD by choosing from the Windows Start menu: Right-clickn on Programs - IBM Software Development Platform - IBM Rational Application Developer - Rational Application Developer and choose Run as Administrator.
When prompted for the Workspace, browse to {Lab Installation Directory}/workspace, then press OK.
If your computer is running Windows Vista, Windows 7 or later and has the standard lab setup, the directory is:
c:\Users\username\webclass\workspace
Note: Be sure to substitute your computer's actual username, e.g. librtrain2 for the "username" above.
You can close any Welcome window that appears. Also, if RAD asks about configuring the WebSphere Application Server, press Finish. And dismiss any dialog asking about trial licenses.
RAD supports the notion of perspectives, which are sets of window panes that let you work in a particular role, e.g. Java coder, Web developer, server administrator and so forth. For this lab, you will work in the JEE perspective, which contains window panes that let you create and edit Java programs.
Open the JEE perspective by choosing Window - Open Perspective - Other - Java EE (default).
Next, create a Dynamic Web project for your lab. RAD uses Dynamic Web Projects for applications that display Web pages.
Choose File - New - Dynamic Web Project. On the first page of the wizard, enter:
Project name: Lab01Web
At the bottom, put a checkmark in the box Add project to an EAR, then set the EAR project name to Lab01EAR.
Then press Next.
On the Web Module page, note that the Context root is Lab01Web -- this will act as a prefix on the URLs for your Web pages.
Press Finish.
Ignore any request to switch to the Web perspective. You can also close any Quickstart window.
Examine the Lab01Web project in the Project Navigator window pane by clicking on the "+" symbol to expand it. Note the following:
Now let's create a new Web page. Right-click on the WebContent folder and choose New - Web page. Complete the wizard:
On the HTML File page, enter index.html as the File Name. Index.html is a conventional name for the starting page on a Web site and will act as the "home page" for your site.
For the Template, under Basic Templates, select HTML/XHTML.
Press Close followed by Finish.
RAD opens the new file into the Web Page editor, which has two panes: the top pane shows a preview, while the bottom shows the "raw" HTML.
Using the course notes as a guide, enter into the bottom pane to finish the "boilerplate" for a Web page. Your page's title should be Penelope's Gourmet Pizza Parlor and the body can be empty for now. We recommend that you indent the HTML as shown in the course notes to make it easier to read.
Within the body, add a level-one heading with the same text as the title.
Within the body, after the heading, add the following text within a paragraph element:
Penelope's Gourmet Pizza Parlor was established in 1987. We specialize
in brick-oven baked, fresh pizza using only natural ingredients.
Use HTML formatting tags to make the "brick-oven baked" text italic and the "natural" text boldfaced.
Add a horizontal rule element after the paragraph.
After the horizontal rule, enter the following into a paragraph:
Copyright © 2014, PGPP, Inc. All Rights Reserved.
The © text is referred to as an entity -- entities let you insert special symbols into your Web pages.
Now let's put the pizza parlor's logo on the Web page. We will provide you with the file containing the image, but you will need to import it into your project. Follow these steps:
Open Windows Explorer or My Computer, then navigate to {Lab Installation Directory}/starters/lab01. If your computer has the standard lab setup, this folder is:
c:\Users\username\webclass\starters\lab01
Expand the lab01 folder to see the nested logo.gif file.
Right-click on the logo.gif and choose Copy.
Back in RAD, right-click on the project's WebContent folder to copy the file into the project.
You should see the imported GIF file in the project.
Back in the Web Page editor, use the img tag to insert the GIF file immediately before the level-one heading. The src attribute should be logo.gif.
Use a level-two heading to display the text "Locations:" then write an unordered list to display a list of parlor locations immediately before the horizontal rule. The locations are:
12 West Street
34 South Street
56 East Street
78 North Street
Test your Web page as it stands so far:
In the Enterprise Explorer, right-click on the index.html entry and choose Run As - Run on Server. RAD will start the WebSphere server and open a Web browser.
Examine the page and ensure that it has:
Note the text in the browser's titlebar tab: it should match the title element in the page's head.
Leave the browser open for later.
Back in the source for index.html, after the Locations list, write a level-two heading that displays the text Hours of Operation.
Now let's add a table that shows hours of operation. The table should have three columns entitled Day of Week, Hours and Beer Served?. The table should have eight rows (including the header row) listing the days of the week. Your table should have the following data:
Day of Week Hours Beer Served?
---------- ----- -----------
Monday 11AM to 11PM Yes
Tuesday 11AM to 11PM Yes
Wednesday 4PM to 11PM Yes
Thursday 11AM to 11PM Yes
Friday 11AM to 1AM Yes
Saturday 11AM to 1AM Yes
Sunday 11AM to 10PM No
Press Ctrl+S to save your work, then go back to the Web browser pane and find the Refresh icon (it's to the left of the page address). Refresh the browser to see your heading and table.
Now let's write another page. Using the same technique as earlier, create a new page named west.html in the WebContent folder.
Complete the page using the following specifications:
The page should contain a paragraph with the following text:
The West street location was our first store. To find it, get on
Highway 165 and use Exit 12. Turn left at the first stoplight
and look for us on the left!
Now let's add a hyperlink from the original page to the new page. Edit index.html in Source view and find the unordered list and the list-item for the West location. Modify the list item so that it's a hyperlink to west.html with the existing "12 West Street" text as the link text. Press Ctrl+S to save your work.
Refresh the browser and check out your hyperlink. Can you switch to the new page by clicking on the link? To go back, note that there's a back-arrow in the browser pane's titlebar.
Repeat the above step and create new pages and hyperlinks for the remaining parlor locations. Use descriptive paragraph text of your own choosing. Be sure to save each page after you are finished editing it.
Test in the browser (first refresh the page).
Now let's try running the Web site on an external browser. Start Internet Explorer from the Windows Start menu and enter the URL:
http://localhost:9080/Lab01Web/index.html
You should be able to navigate through your Web site.
Note: You can configure RAD to always use an external browser when you run your page on the server. From the RAD menu, choose Window - Web Browser - Default system Web browser.
Add a hyperlink on each of the "location" pages back to the index.html home page.
See if you can use another computer in the classroom (perhaps the student sitting next to you's computer) to browse your Web site. You will need to determine your computer's hostname or IP address.