Day 16 - Web(Tomcat 다운받기), html과 jsp

100일 챌린지/빅데이터기반 인공지능 융합 서비스 개발자

Day 16 - Web(Tomcat 다운받기), html과 jsp

ksyke 2024. 8. 12. 15:41

Tomcat 다운받기

(해당 컴퓨터를 서버로 만들어주는 프로그램이다.)

https://archive.apache.org/dist/tomcat/tomcat-8/v8.0.53/bin/

[Index of /dist/tomcat/tomcat-8/v8.0.53/bin

archive.apache.org](https://archive.apache.org/dist/tomcat/tomcat-8/v8.0.53/bin/)

eclipse와의 호환성을 위해 8.0대 버전을 다운받는다.

Startup 타입을 Manual로 세팅하고 Start 버튼을 눌러 Started상태로 놓는다.

터미널에 ipconfig를 쳐서 IP 번호를 받은 후 뒤에 :8080을 붙여서 웹 주소창에 치면 톰캣 사이트가 나온다.

Webapp 폴더에 원하는 파일을 넣고 주소창에 해당 주소를 적으면 데이터를 접근할 수 있다.

Web Front end

html

Front End - 비표준

HTML의 구성요소 태그(Tag), 요소(Element), 속성(Attribute), 변수(Arguments)

http://www.homejjang.com/03/Tag_element_attribute.php

  <html>
    <head>

    </head>
    <body>
        <h1>test page</h1>
    </body>
</html>

Web Back End

jsp

<html>
    <head>

    </head>
    <body>
        <h1>ex02.jsp page</h1>
        <h2>1+2+3+4+5</h2>
        <h3><%=1+2+3+4+5%></h3> // 15 -> java를 통해 계산된 코드 
    </body>
</html>

한글 사용하기

<%@ page contentType="text/html;charset=UTF-8" %>
<html>
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        <h1>ex02.jsp 한글</h1>
    </body>
</html>

Eclipse에서 서버 사용하기

시작하기

- Java EE 선택

- Servers에서 새로운 서버를 생성한다.

다운받은 톰캣과 같은 버전을 선택한다.

톰캣 work directory가 생성된 폴더를 골라준다.

Finish를 누르면 톰캣 서버가 생성된것을 확인할 수 있다. 여기서 마우스 오른쪽을 눌러 start 시켜준다.

웹 서버를 사용할때는 dynamic web project를 생성한다.

프로젝트 안의 'WebContent' 폴더에 웹 파일을 만든다. 여기서 'META_INF'나 'WEB-INF' 폴더에 파일을 만들지 않도록 유의한다.

HTML과 JSP 파일을 만들 때 톰캣 서버와 호환되는 버전을 사용해야 한다.

jsp 사용하기

// @는 디렉티브 - 클래스밖
<%@ page language="java" %>
<%@ page contentType="text/html; charset=UTF-8" %>
<%@ page pageEncoding="UTF-8" %>
<%@ page import="java.util.Date" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<%!
    // !는 선언부 - 클래스 안 메서드 밖 (필드, 메서드)
    // static int su1 = 1111; // 코드상 클래스명이 접근가능하지 않기때문에 static을 쓰지 않는다.
    int su2 = 2222;
    // static void func01(){}
    void func02(){}
    class Inner{}
%>
<%!
    // 중복으로 사용 가능(클래스, 변수명 제외)
%>
<body>
    <h1>jsp test page</h1>
    <%
    // 내장 객체 사용
        // 스크립트릿 - 메서드 안(main 클래스)
        for(int i = 0; i < 4; i++){
            out.println("화면에 출력<br>");
            System.out.println(new Date());
        }
    for(int i = 0; i < 4; i++){
    %>
    <% out.println("분리");%>
    <br>
    <% } %>
</body>
</html>

내장 함수

session

System.out.println(session.getId()); // 브라우저에 따라 다른 id값을 배정한다. (서버에 접속하는 클라이언트마다 다른 메모리 공간을 할당한다.)

// session 타임아웃 시간 개별적으로 정하기
System.out.println(session.getMaxInactiveInterval()/60 + "분");
System.out.println("마지막 접근한 시간: " + session.getLastAccessedTime());

session.setMaxInactiveInterval(15 * 60);
System.out.println(session.getMaxInactiveInterval()/60 + "분");

out - 출력 객체

javax.servlet.jsp.JspWriter의 변수명

//java.io.OutputStream myout = out;
    out.write(65);
    out.print("출력");
    out.println("출력2");
    out.println("출력3");
    out.print("<br>");

request - 사용자의 요청을 담는 객체

java.servlet의 변수명

String name = application.getContextPath();
System.out.println(name);
System.out.println(application.getInitParameter("con1"));

정보 받기

// 클라이언트의 정보
String msg1 = request.getRemoteAddr(); // 192.168.37.213
String msg2 = request.getRemoteHost(); // 192.168.37.213
int port = request.getRemotePort(); // 62159

// 서버의 정보
String msg4 = request.getLocalAddr(); // 192.168.37.213
String msg5 = request.getLocalName(); // DESKTOP-D5K78CA
int port2 = request.getLocalPort(); // 8080

String msg6 = request.getProtocol(); // HTTP/1.1
String msg7 = request.getRequestURI(); // /Day16/Ex03.jsp - 사용자가 요청하는 페이지 주소 
String msg8 = request.getContextPath(); // /Day16 - 프로젝트(context)명 
String msg9 = request.getQueryString(); // 주소 뒤에 붙는 parameter - "?q=java"와 같은 Ex03.jsp 페이지에서 요구하는 정보
// query에 따라 페이지 달라지는 동적 페이지가 된다.

Request Parameter

// 링크 만들기
<p><a href="Ex03.jsp?id=admin&pw=abcd">admin</a></p>
<p><a href="Ex03.jsp?id=root&pw=aabb">root</a></p>
<p><a href="Ex03.jsp?id=guest&pw=1234">guest</a></p>

<form action="Ex03.jsp">
    // 텍스트 입력창 만들기
    <input type = "text" name="id"><br>
    <input type = "text" name="pw"><br>

    // radio 버튼 만들기
    <input type = "radio" name = "ra" value = "radio1">radio1
    <input type = "radio" name = "ra" value = "radio2">radio2
    <input type = "radio" name = "ra" value = "radio3">radio3
    <br>
    // 체크박스 만들기
    <input type = "checkbox" name = "ck" value = "check1">check1
    <input type = "checkbox" name = "ck" value = "check2">check2
    <input type = "checkbox" name = "ck" value = "check3">check3
    <br>        
    // 내용을 전달하는 버튼 만들기
    <input type = "submit" value = "전달">
    </form>

Parameter 값 받기

String id = request.getParameter("id");
//http://localhost:8080/Day16/Ex03.jsp?root
        // root
out.println(id);
out.println("<br>");
String pw = request.getParameter("pw");
out.println(pw);
out.println("<br>");
String ra = request.getParameter("ra");
out.println(ra);
out.println("<br>");
String[] ck = request.getParameterValues("ck");
out.println(java.util.Arrays.toString(ck));
out.println("<br>");

Enumeration으로 받기

java.util.Enumeration<String> names;
names = request.getParameterNames();
while(names.hasMoreElements()){
    String name = names.nextElement();
    String[] vals = request.getParameterValues(name);
    for(int i = 0; i < vals.length; i++){
        System.out.println(vals[i]);
    }
}

Collection Framework를 사용한 Request

java.util.Map<String, String[]> map = request.getParameterMap();
java.util.Set<String> keys = map.keySet();
Iterator<String> ite = keys.iterator();
while(ite.hasNext()){
    String key = ite.next();
    String[] vals = map.get(ite.next());
    System.out.println(java.util.Arrays.toString(vals));
}

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" %>
<%@ page import="java.util.Iterator" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<%
// - 내장객체들 - //
//out - 출력 객체
//java.io.OutputStream myout = out;
    out.write(65);
    out.print("출력");
    out.println("출력2");
    out.println("출력3");
    out.print("<br>");

//request - 사용자의 요청을 담는 객체
    // 클라이언트의 정보
    String msg1 = request.getRemoteAddr(); // 192.168.37.213
    String msg2 = request.getRemoteHost(); // 192.168.37.213
    int port = request.getRemotePort(); // 62159

    // 서버의 정보
    String msg4 = request.getLocalAddr(); // 192.168.37.213
    String msg5 = request.getLocalName(); // DESKTOP-D5K78CA
    int port2 = request.getLocalPort(); // 8080

    /////////////////////////////////////////////

    String msg6 = request.getProtocol(); // HTTP/1.1
    String msg7 = request.getRequestURI(); // /Day16/Ex03.jsp - 사용자가 요청하는 페이지 주소 
    String msg8 = request.getContextPath(); // /Day16 - 프로젝트(context)명 
    String msg9 = request.getQueryString(); // 주소 뒤에 붙는 parameter - "?q=java"와 같은 Ex03.jsp 페이지에서 요구하는 정보
    // query에 따라 페이지 달라지는 동적 페이지가 된다. 

    // - Request Parameter - //
    /*
    String id = request.getParameter("id");
    //http://localhost:8080/Day16/Ex03.jsp?root
            // root
    out.println(id);
    out.println("<br>");
    String pw = request.getParameter("pw");
    out.println(pw);
    out.println("<br>");
    String ra = request.getParameter("ra");
    out.println(ra);
    out.println("<br>");
    String[] ck = request.getParameterValues("ck");
    out.println(java.util.Arrays.toString(ck));
    out.println("<br>");
    */
    /*
    java.util.Enumeration<String> names;
    names = request.getParameterNames();
    while(names.hasMoreElements()){
        String name = names.nextElement();
        String[] vals = request.getParameterValues(name);
        for(int i = 0; i < vals.length; i++){
            System.out.println(vals[i]);
        }
    }
    */
    System.out.println("=========- Collection Framework를 사용한 request -===========");
    java.util.Map<String, String[]> map = request.getParameterMap();
    java.util.Set<String> keys = map.keySet();
    Iterator<String> ite = keys.iterator();
    while(ite.hasNext()){
        String key = ite.next();
        String[] vals = map.get(ite.next());
        System.out.println(java.util.Arrays.toString(vals));
    }

//response


//page
//session
//application
%>

    <h1>link</h1>
    <p><a href="Ex03.jsp?id=admin&pw=abcd">admin</a></p>
    <p><a href="Ex03.jsp?id=root&pw=aabb">root</a></p>
    <p><a href="Ex03.jsp?id=guest&pw=1234">guest</a></p>
    <form action="Ex03.jsp">
        <input type = "text" name="id"><br>
        <input type = "text" name="pw"><br>
        <input type = "radio" name = "ra" value = "radio1">radio1
        <input type = "radio" name = "ra" value = "radio2">radio2
        <input type = "radio" name = "ra" value = "radio3">radio3
        <br>
        <input type = "checkbox" name = "ck" value = "check1">check1
        <input type = "checkbox" name = "ck" value = "check2">check2
        <input type = "checkbox" name = "ck" value = "check3">check3
        <br>

        <input type = "submit" value = "전달">
        </form>
</body>
</html>

나의 웹페이지 서버에 올리기

.war의 파일 이름을 ROOT로 만들면 IP주소에 포트번호를 치기만 해도 해당 사이트로 바로 들어갈 수 있다.

server.xml에서 포트번호를 변경할 수 있다.

80번 포트는 생략 가능한 코드이다.

내 컴퓨터에서 열때는 내 컴퓨터의 이름을 쳐도 접근이 가능하다.

index.jsp

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
</head>
<body>
    <table border="0" width="100%">
        <tr>
            <td width="200">
            <a href="./">
            <img alt="" src="main_logo.png">
            </a>
            </td>
            <td></td>
            <td width="200"></td>
        </tr>
        <tr>
            <td bgcolor="gray"></td>
            <td bgcolor="gray" align="center">
                <a href="ex01.html" style="color:white">ex01</a>
                <a href="ex02.jsp" style="color:white">ex02</a>
                <a href="ex03.jsp" style="color:white">ex03</a>
                <a href="ex04.jsp" style="color:white">ex04</a>
                <a href="ex05.jsp" style="color:white">ex05</a>
                <a href="ex06.jsp" style="color:white">ex06</a>
                <a href="ex07.jsp" style="color:white">ex07</a>
                <a href="ex12.jsp" style="color:white">구구단</a>
                <a href="ex13.jsp" style="color:white">구구단2</a>
                <a href="ex15.jsp" style="color:white">comming</a>
            </td>
            <td bgcolor="gray"></td>
        </tr>
        <tr>
            <td colspan="3">
                <!-- 내용시작 -->
                <center>
                <img alt="" src="main1.jpg">
                </center>
                <!-- 내용끝 -->
            </td>
        </tr>
        <tr>
            <td></td>
            <td align="center">Copyright &copy;2024</td>
            <td></td>
        </tr>
    </table>
</body>
</html>

구구단

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
</head>
<%!
String func(int j,int i){
    return "<td>"+j+"x"+i+"="+(j*i)+"</td>";
}
%>
<body>
    <h1>구구단</h1>
    <table width="100%">
        <tr>
        <%for(int i=2; i<10; i++){ %>
            <td><%out.print(i); %>´Ü</td>
        <%} %>
        </tr>
        <%
        for(int i=1; i<10; i++){
            out.println("<tr>");
                for(int j=2; j<10; j++){
                    out.print(func(j, i));
                }
            out.println("</tr>");
        }
        %>
    </table>
</body>
</html>

구구단2

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
</head>
<body>
    <table border="0" width="100%">
        <tr>
            <td width="200">
            <a href="./">
            <img alt="" src="main_logo.png">
            </a>
            </td>
            <td></td>
            <td width="200"></td>
        </tr>
        <tr>
            <td bgcolor="gray"></td>
            <td bgcolor="gray" align="center">
                <a href="ex01.html" style="color:white">ex01</a>
                <a href="ex02.jsp" style="color:white">ex02</a>
                <a href="ex03.jsp" style="color:white">ex03</a>
                <a href="ex04.jsp" style="color:white">ex04</a>
                <a href="ex05.jsp" style="color:white">ex05</a>
                <a href="ex06.jsp" style="color:white">ex06</a>
                <a href="ex07.jsp" style="color:white">ex07</a>
                <a href="ex12.jsp" style="color:white">구구단</a>
                <a href="ex13.jsp" style="color:white">구구단2</a>
                <a href="ex15.jsp" style="color:white">comming</a>
            </td>
            <td bgcolor="gray"></td>
        </tr>
        <tr>
            <td colspan="3">
                <!-- 내용시작 -->
<h1>구구단 출력기</h1>
<!-- /day16/ex14.jsp?gugu=4 -->
<form action="ex14.jsp">
    <select name="gugu">
        <%for(int i=2; i<10; i++){ %>
        <option value="<%out.print(i);%>"><%out.print(i); %>窜</option>
        <%} %>
        <input type="submit" value="免仿">
    </select>
</form>
                <!-- 내용끝 -->
            </td>
        </tr>
        <tr>
            <td></td>
            <td align="center">Copyright &copy;2024</td>
            <td></td>
        </tr>
    </table>
</body>
</html>

'100일 챌린지 > 빅데이터기반 인공지능 융합 서비스 개발자' 카테고리의 다른 글

Day18 - 날짜 type 제어하기, java.util 사용하기, Thread 활용하기 (0)	2024.08.16
Day 17 - jsp로 웹페이지 만들기 vagrant로 배포하기 (0)	2024.08.13
Day 15 - 새 창 띄우기, I/O에 버퍼 달기 (0)	2024.08.09
Day 14 - 예외 처리, I/O (0)	2024.08.08
Day 13 - UI 구현하기 (0)	2024.08.07

현재글Day 16 - Web(Tomcat 다운받기), html과 jsp

ksyke 님의 블로그

ksyke 님의 블로그 입니다.

오블완, 티스토리챌린지,

Today :
Yesterday :

ksyke 님의 블로그