Chapter 1 Tutorials

Poem

Open a text editor, like Notepad or vi.
Add the standard HTML tags: html, head, title, body.
Add the tags for validating the page: DOCTYPE, meta for content-type.
Add a poem in the body of the page; have at least 4 lines in the poem.
Save the file with the .html extension.
Open a web browser.
From the File menu, open the file you just saved.
1. You will notice that there is only one line of text that contains all the lines of the poem.
2. Resize the browser until you see the line of the poem wrap to the next line.
3. This demonstrates how word wrap works.
Re-edit the poem file.
1. Add many spaces between some of the words.
2. Add many blank lines between two of the lines.
In the browser, reload the file.
1. All the text will be on one line.
2. You will only see one space between all the words.
3. This demonstrates how browsers compress all white space into a single space.
Re-edit the poem file.
1. Add a p tag at the start of the first line (this is required in order for the page to contain valid HTML).
2. Add the br tag at the start of the second line.
3. Add the p tag at the start of the third line.
In the browser, reload the file.
1. You will see that the second line is directly below the first line.
2. You will see that the third line has at least one blank line between it and the second line.
3. This demonstrates that new line characters must be added to the file with mark up.
Go to w3c.org and validate that the page contains valid HTML.
1. You may ignore the warning that the form tag is missing the action attribute. This will be explained in Chapter 2.

Simple Form

Open a text editor, like Notepad or vi.
Add the standard HTML tags: html, head, title, body.
Add the tags for validating the page: DOCTYPE, meta for content-type.
Add a form to the body of the page.
1. Add a paragraph of text that explains that the page is for entering data.
2. Add an text input element and a submit button in the form.
Open the file in a browser.
1. Enter some text in the text element.
2. Click the submit button.
3. Notice that the form data has been added to the end of the URL in the location box of the browser.

First JSP - Setup

Install Maven or install an IDE that has Maven, like Netbeans, Eclipse, SpringToolSuite. It is best to install an IDE, since it will be easier to code later examples.
The following instructions are executed from the command line, not the IDE. Be sure that maven is in the path so it can be found.
Use maven to install a starter package for this book.
Warning: the coordinates for the start package are different from those listed in the book. Use these coordinates:
- Group ID: org.bytesizebook.com.guide.boot
- Artifact ID: maven-archetype-webapp
- Version: 1.0
Use these coordinates to create an application with the following command. This is one command that appears on one line. The \ character is used to escape the newline character so it can be displayed in the book.
```
mvn archetype:generate \
    -DgroupId=org.bytesizebook.com.guide.boot \
    -DartifactId=basic-webapp \
    -DpackageName=com.bytesizebook \
    -DarchetypeGroupId=org.bytesizebook.com.guide.boot \
    -DarchetypeArtifactId=maven-archetype-webapp \
    -DarchetypeVersion=1.0
    
```
The exact values for the archetype can be seen by searching for org.bytesizebook in search.maven.org.
If the archetype is not selected automatically and you are asked to enter a filter, enter maven-archetype-webapp and select the one for bytesizebook.
After running this command, a folder is created with the name basic-webapp.

Change to the application folder, basic-webapp, and open the POM file. It will have a plugins section:

      ...
         <plugins>
             ...
         </plugins>
      ...

Add the following code for the servlet engine plugin. Do not remove any other plugins.

      ...
         <plugins>
             ...
            <plugin>
                <groupId>org.apache.tomcat.maven</groupId>
                <artifactId>tomcat7-maven-plugin</artifactId>
                <version>2.2</version>
                <configuration>
                    <port>8282</port>
                </configuration>
            </plugin>
         </plugins>
      ...

First, install all the dependencies with
```
mvn install
```
Then start the servlet engine with
```
mvn tomcat7:run
```
The servlet engine should be running now. The archetype that the application is based upon contains a simple HTML page. Open a browser on localhost port 8282 and you will see the simple page.
```
http://localhost:8282/basic-webapp/
```

First JSP

The next step is to create a page that porcesses data. The location for public files in the application is src/main/webapp. Create all three folders, starting in the root of the application.

It is best to use an IDE for the following steps, but a simple text editor can be used.

Create a new folder in webapp named ch1.
Create a subfolder of ch1 named OnePage.
1. Create a new JSP named First.jsp.
  1. Do not use the JSP template that comes with the IDE.
  2. Copy the contents of the SimpleForm.html into the First.jspfile.
  3. Add an EL statement that echoes the value of the contents of the text box.
You will see that the index.jsp file already exists in the Web Pages folder.
1. This is the welcome page for the application.
2. Modify the page by adding a hypertext link to the First.jsp file.

Run the project.

Access the application from a browser: localhost:8282/basic-webapp
The index.jsp page will appear in the browser.
Click the link for the first JSP.
Enter some text in the text element.
Click the submit button.
Notice that the text that was entered has been echoed in the page.
Notice that the form data is in the query string.

Validate that the index.jsp and First.jsp files contain valid HTML.

Initialized JSP

Create a new JSP named FormInitialized.jsp.
1. Do not use the JSP template that comes with the IDE.
2. Copy the contents of the First.jsp file into the FormInitialized.jsp file.
3. Set the initial value of the text element to the corresponding value in the query string. Use EL.
4. You will see that the index.jsp file already exists in the Web Pages folder.
  1. This is the welcome page for the application.
  2. Modify the page by adding a hypertext link to the FormInitialized.jsp file.
Run the project again.
1. Enter some text.
2. Click the submit button.
3. Notice that the text that was entered remains visible in the text element.
Validate that the index.jsp and FormInitialized.jsp files contain valid HTML.

Contact the author