수정

HTML 버전 5

개발환경 구축

JDK 1.8버전 다운로드

https://www.oracle.com/index.html

이클립스다운

http://www.eclipse.org/

서버 프로그램 다운

http://tomcat.apache.org/

JDK 1.8버전 다운로드 / 데이터베이스 관리 프로그램 다운로드

oracle.com/

설치 순서

    1. jdk 8u181 (1.8)

    2. 오라클 데이터 베이스

    3. 아파치 톰캣

    4. 이클립스

    5. sqldeveloper : 오라클 데이터베이스 전용 클라이언트 프로그램

설치에서 제외되는 목록

• apache-tomcat-8.5.34-fulldocs.tar.gz : 도움말
• jre-8u181

Eclipse IDE for java EE Developers // 웹을 만들 때 사용 하기 때문에 이걸로 다운 받아야함 

사용자 로그인 페이지를 만들고 실행하기

        

            (eclipse)

1. 새로운 Dynamic Web Project(프로젝트 종류)를 만들기
   

            1) 프로젝트 이름 : TestUserLoginProject

            2) 저장 경로 : 아까 만든 디렉터리 사용 

                ex) c:\jinm

            3) web.xml 파일을 만들기 : 체크 박스에 체크하기

                -> 프로젝트를 만드는 마지막 단계에 있음 

                -> 프로젝트 마다(각각) 웹 프로그램 환경 설정 파일

                    - index.html 파일을 기본으로 불러오는 설정 

    (target runtime) -> new runtime -> Apache Tomcat v8.5 -> Tomcat installation directory -> C:\apache-tomcat-8.5.34

    -> next -> next -> 체크 박스 체크

2. 아파치-톰캣 웹 서버를 등록

            1)  window -> Preferences -> Server -> 맨아래 확인

            2) 하단에 servers 클릭 -> new -> Available 에 있는 파일을 더블 클릭 하면 Configured 에 가짐 

3. server.xml 파일로 이동한 후 http 프로토콜을 사용하는 주소의 포트번호를 바꿔야 한다 

            1) 포트번호를 바꾸는 이유는 오라클 데이터베이스에 설치 될 때 사용하기 때문이다 

                -> 현재 값 : 8080 바꿀 값 : 8085

            2) Servers 디렉터리 -> Tomcat -> server.xml -> 하단에 Source 클릭 -> Ctrl + F 8080 2번 port="8085" 로바꾸기 

            3) Dynamic Web Project -> WebContent -> WEB-INF -> web.xml  확인

            4) Dynamic Web Project -> WebContent -> Ctrl + n -> html -> html file 더블클릭 -> 파일이름 index    -> finish

• HTML 또는 JSP 페이지에서 사용자로부터 무언가를 입력받아야 하는 경우에 사용하는 FORM 태그 만들기

            -> Form태그 : 사용자 입력 태그

            1) 형식)

                <!-- 시작 태그 만들기 -->

                <form action="html 또는 서블릿 또는 jsp 페이지">

                    

                        <!-- action 속성을 사용하는 경우에는 꼭!! 

                                submit (제출)버튼을 꼭 만들어 주어야 합니다!!!    

                        -->                    

                        <!-- input type="submit" 제출 버튼 만들기 -->

                        <input type="submit" value="제출 버튼">

                        <!-- 사용자가 버튼을 클릭하면

                                제출 버튼이 갖고 있는 자바 스크립트 함수가 실행

                                action 속성의 값을 읽어와서 html 또는 서블릿 또는

                                jsp 페이지로 페이지 이동 -> 현재 페이지에서 다른 페이지로 이동

                        -->

                        <input type="submit" value="제출 버튼" onclick="자바스크립트함수이름()">

                        <!-- 웹 브라우저에서 줄 바꿈 태그

                            br : breaking line의 줄임말

                        -->

                        <br>

                <!-- 종료 태그 만들기 -->

                </form>

                
                <!-- 사용자로부터 아이디를 입력 받을 수 있는 입력창을 만들기 -->

                <input type="입력 종류"

                            name="jsp 페이지에서 사용자가 입력한 값을 받을 때 사용"

                            value="" (이 텍스트는 지워지지 않음)

                            required (필수 입력 : 입력을 해야 다른 화면으로 이동이 가능하기 때문)

                            maxlength="최대입력글자수"

                            placeholder="아이디를 입력하세요.." (힌트텍스트 : 사용자가 여기에 입력을 할 때 입력한 값이 사라지는 텍스트) >

                * type="입력 종류"

                    text : 문자열을 입력 (문자, 숫자 입력가능)

                    number : 숫자만을 입력

                    password : 비밀번호를 입력(사용자가 입력한 값을 출력하지 않음)

                    등등

                 * 아이디를 입력 받을 수 있는 input 태그 입력

                 * 비밀번호를 입력 받을 수 있는 input 태그 입력

                  

                 <input type="text"

                             name="id"

                             placeholder="아이디를 입력하세요.."

                             maxlength="50"

                             required

                             autofocus>

                 <!-- autofocus : 강제로 커서를 입력 받기 -->

                 <br> <!-- 강제로 줄 바꾸기 -->

                 <!-- 사용자로부터 비밀번호를 입력받을 수 있는  입력창 -->

                 <input type="password"

                             name="pwd"

                             maxlength="50"

                             required

                             placeholder="비밀번호를 입력하세요...">

                 <br>

                 <!-- 제출 버튼 만들기 -->
                 <input type="submit" value="제출 버튼">

                 <!-- 현재 프로젝트의 WebContent 디렉터리 안에 login.html 파일 만들기 -->

• ​새로 만든 login.html 페이지를 실행하는 두가지 방법

            

1. ​index.html 페이지에 링크 텍스트를 만든 다음에 사용자가 링크 텍스트를 클릭하면 자동으로 login.html페이지로 이동

            -> a 태그를 사용하기

                - 사용방법 )

                    <a href="이동할 페이지 이름과 확장자를 작성">

                        링크 텍스트를 작성(화면에 출력할 텍스트)    

                    </a>

                        ex)  <a href="login.html">로그인 페이지로 이동하기</a>

2. 웹 브라우저의 주소 창에 login.html 페이지 이름을 입력
   

• login.html 페이지에서 사용자가 입력한 아이디와  비밀번호를 받는 login_proc.jsp 페이지를 만들기

1. request 내장 객체 : 클라이언트에서 특정 페이지로 이동
   

2. response 내장 객체 : 웹 서버에서 클라이언트로 응답
   
3. out 내장 객체 : 웹 브라우저에 무언가를 출력할 때 사용 

4. login.html 페이지 실행 순서

            (1) index.html 페이지를 실행

            (2) 로그인 페이지로 이동하기 링크 텍스트를 클릭

            (3) login.html 페이지로 이동

            (4) 사용자가 아이디와 비밀번호를 입력하고 제출 버튼을 클릭하면 login_proc.jsp 페이지로 이동

        가. WebContent 디렉터리 안에 login_pro.jsp 파일을 만들기 

        나. login_proc.jsp 파일 안으로 이동 

        다. login.html 페이지에서 웹 서버로 전달하는 사용자 아이디와 비밀번호를 받는 명령어를 작성 

            - request 내장 객체를 사용

                - requset.getParameter() 함수를 호출하면 이전 페이지로부터 전달 되는 데이터를 받을 수 있습니다

                    ("input 태그에서 사용한 name 속성의 값")

                - request.getParameter("id")

                    (사용자가 입력한 아이디를 받는 명령어)

                - request.getParameter("pwd")

                    (사용자가 입력한 비밀번호를 받는 명령어)

                - getParameter() 함수의 반환형은 String

            - String idValue = request.getParameter("id");

            - String pwdValue = request.getParameter("pwd");

            - jsp 파일 안에서 자바 명령어는 아래와 같은 태그들을 사용해서 입력

                (1) <%! // 자바 명령어를 사용(작성) %>

                    - 자바 명령어를 사용(작성) : 명령어의 종류는 전역 변수 선언

                    - 전역 상수 정의, 메서드 정의, 클래스 정의

                    <%!

                            int age = 10;

                            String name = "홍길동";

                            final StringNAME = "유재석";

                            int addMethod(int a, int b) {

                                return a + b;

                            }

                            class MyClass1 {

                                int data=100;

                                public int func() { return data; }

                            }

                      %>

                (2) <% // 자바 명령어를 사용(작성) %>

                    - 자바 명령어 : <%! %> 태그 안에서 만든 자바 변수, 상수, 함수, 클래스 이름들을 사용할 수 있는 영역

                    <%

                             // out 내장 객체를 사용하면 웹브라우저에 무언가를 바로 출력 : <body>안녕하세요?</body>

                            out.print("안녕하세요?<br>");    

                            out.print("<a href='index.html'>인덱스 페이지로 이동하기<a>");        

                     %> 

                (3) <%=하나의 값만을 출력할 수 있는 명령어%>       

                    ex) <%=100%>

                    ex) <%=위에서 선언한 변수이름%>

                    ex) <%=계산식%>

                    ex) <%=함수이름()%>      

                    ※ <body></body>태그 안에 있기 때문에 세미콜론을 사용하면 안됨!    

                        - <body>(3)</body>

                        <%=100%>

                        아래 식이랑 같은 표현임

                        <%

                                out.print("100"); 

                        %>