In this lab, we are going to create two simple Web pages - a static Web page that contains your CV, and a dynamic Web page that can create a table of a size specified by the user. We will use NetBeans with Java Enterprise, which automatically creates for us a simple default Web server that just takes a request from the client and returns the corresponding HTML file (no server-side processing).
In the laboratory sessions, we will be using this online waiting list. Please sign in and add yourself to the list when you need help:
There is always a lot of setup needed before Web application development can start. Don't worry if you don't understand what is happening with each of the steps - you will understand more later in the course. Please start early with the following steps, especially if you are working on your own computer, so that you can get help in time if anything goes wrong.
For this course, we will be using a Web server called Payara. To set up your account for Web development, we will create the simplest possible Web application, which displays one page containing the words "Hello World", and deploy it on Payara.
- Open NetBeans. To do this on StuDAT/Linux, enter the command /chalmers/groups/ws-devel/netbeans
- Select File > New Project > Maven > Web Application and click Next.
- Enter the name HelloWorld for the project. Choose a directory in which to create the project. Click Next.
- If Payara is not an option for servers, then:
- Click Add.
- On the next screen, choose Payara Server. (If this is not an option, you need to install the Payara plugins for NetBeans first. Cancel the new project build. Go to Tools > Plugins > Available Plugins, search for Payara, and install all the plugins offered. Then go back to step 2.)
- On the next screen, choose a directory where you want to install it under Installation Location. Read the licence agreement, and accept it. (If you are not prepared to accept it, please talk to a lab assistant about an alternative.) Click Download Now.
- Select the latest version of Payara and click OK.
- Wait until Payara has finished downloading, then click Next.
- On the next screen, where you should see Host has been set to localhost and Domain to production. If not, enter these manually.
If you are using Windows: If there is a space in your username, then you must pick an alternative username without a space and enter it in this screen. (This is because of a bug in the Windows version of Paraya, which crashes if an account has a user name with a space.)
Then click Finish.
- Back on the New Project dialogue, click Finish. NetBeans will probably need to download a lot of files that make up the Web Application Maven template.
- Eventually, HelloWorld should appear in your Projects list. Open HelloWorld > Web Pages > index.html. The content has been created for you!
- Click the Run Project button, or press F6. (The first time you do this, NetBeans might need to make even more downloads!) Eventually, a browser should open pointing to localhost:8080/HelloWorld/, and you will see a simple Web page that just says "Hello World!"
If this works, then your account is set up for Web development. If anything goes wrong, please get help with it before going any farther.
A Static CV-site
Your first task is to create a static site to display your CV. (The information does not have to be true - you can make up facts, or make a CV for a fictional person.)
- In NetBeans, select File > New Project > Maven > Web Application. Give it an appropriate name, and make sure Payara Server is selected as the server.
- Write at least two HTML pages. Your pages must link to each other, and must use at least the following HTML elements:
<h1>, <h2>, <h3>
|Unordered list, list item
- Use an HTML validation service to validate the HTML.
- Add some style using a separate CSS stylesheets. All layout and style should be
handled by CSS.
- One HTML-page should use your own layout and styles. Create a default.css file
and add a few layout rules and a few style rules. Add id and/or class to
HTML-elements to match the selectors (or match on element).
- One page should use the Bootstrap framework. You do not need to download anything: just add the line given here under CSS into the header of your HTML page, and all of Bootstrap's CSS is available to you. Then use one (or more) of the features of Bootstrap to improve the appearance of your page. Link
- Optional: Try to use some @media queries so your page automatically adjusts to if it is on a phone, tablet or computer. (This is called responsive Web design.) To test this, resize your browser window.
- Optional: Try out some CSS animations. See Link
- Start a new Web application project. Download this file and extract into the project's src/main/webapp directory: js_jq.zip
- Visit http://localhost:8080/HelloWorld/js_jq/table
- Open js_jq/table/table.js in NetBeans and finish the function createTable (fill in the parts marked TODO).
NOTE: Using the browser's console will help you a lot. On Chrome, select More tools > Developer Tools or press Ctrl-Shift-I. It’s possible to use breakpoints and step the code!
Assuming that the Web application is still running from the last part:
- Point your browser at http://localhost:8080/js_jq/module
- In NetBeans, look at the two .js files in the module directory. Fill in the parts marked TODO.
Optional: To edit the table it’s nicer to just click on some table cell. Change the code so that, when clicked, the cell shows an editable text input. When pressing enter, the page should update and redisplay.
When all parts of this lab are complete, contact a lab assistant to give a demonstration.