HTML 버전 5

개발환경 구축

JDK 1.8버전 다운로드

이클립스다운

서버 프로그램 다운

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



설치 순서

    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 -> 체크 박스 체크

  1. 아파치-톰캣 웹 서버를 등록
            1)  window -> Preferences -> Server -> 맨아래 확인
            2) 하단에 servers 클릭 -> new -> Available 에 있는 파일을 더블 클릭 하면 Configured 에 가짐 

  1. 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>

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


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

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

  1. 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"); 
                        %>

    

'잡동사니 > 휴지통' 카테고리의 다른 글

개인 자료실  (0) 2019.04.03
3일  (0) 2018.11.24
2일차  (0) 2018.11.18
수정  (0) 2018.11.17

+ 최근 게시물