이안의 평일코딩

국비 HTML - HTML 기초 / 로그인 본문

Front-end/HTML

국비 HTML - HTML 기초 / 로그인

이안92 2020. 8. 11. 12:18
반응형

2020.08.11(화)

 

MyDAO

package com.sist.dao;
import java.sql.*;
import java.util.*;
public class MyDAO {
	// 연결 객체
	private Connection conn;
	// SQL 전송 객체
	private PreparedStatement ps;
	// URL(오라클 주소)
	private final String URL = "jdbc:oracle:thin:@localhost:1521:XE";
	// 드라이버 등록
	public MyDAO() {
		try {
			Class.forName("oracle.jdbc.dirver.OracleDriver");
		}catch(Exception ex) {
			System.out.println(ex.getMessage());
		}
	}
	// 연결
	public void getConnection() {
		try {
			conn = DriverManager.getConnection(URL, "hr", "happy");
			// 오라클 => conn hr/happy
		}catch(Exception ex) {}
	}
	// 해제
	public void disConnection() {
		// exit
		try {
			if(ps!=null) ps.close();
			if(conn!=null) conn.close();
		}catch(Exception ex) {}
	}
	// JDBC (원시소스) => DBCP => ORM (MyBAtis, Hibernate, JPA)
	// 기능
	public String isLogin(String ename, int empno) {
		String result="";
		try {
			// 연결
			getConnection();
			// SQL문장 전송
			String sql = "SELECT COUNT(*) FROM emp "
					+"WHERE ename=?";
			ps=conn.prepareStatement(sql);
			// ?에 값을 채운다
			ps.setString(1, ename);
			ResultSet rs=ps.executeQuery();
			rs.next();
			int count=rs.getInt(1); // 없으면 0 있으면 1
			rs.close();
			if(count==0) { // 사원이름 존재하지 않는다
				result="NONAME";
			}
			else { // 사원이름이 존재
				sql="SELECT empno FROM emp "
						+"WHERE ename=?";
				ps=conn.prepareStatement(sql);
				ps.setString(1, ename);
			    rs=ps.executeQuery();
			    rs.next(); // 데이터 있는 위치에 커서를 변경
			    int db_empno=rs.getInt(1);
			    rs.close();
			    
			    if(empno==db_empno) { // 로그인
			    	result = ename;
			    }
			    else { // 사번이 틀린상태
			    	result = "NOSABUN";
			    }
			}
		}catch(Exception ex) {
			// 에러 처리
			System.out.println(ex.getMessage());
		}finally {
			// 닫기
			disConnection();
		}
		return result;
	}
	
}

 

LoginServlet

package com.sist.dao;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;


@WebServlet("/LoginServlet")
public class LoginServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;


	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		response.setContentType("text/html;charset=EUC-KR");
		// 브라우저에 HTML을 전송 => 한글을 포함하고 있다
		// HTML 제작
		PrintWriter out = response.getWriter();
		// response=>응답(브라우저 전송), request=>사용자 보낸 데이터
		out.println("<html>");
		/*
		 *  <html>
		 *   <head>
		 *    => <style>
		 *    => <script> => 이벤트
		 *   </head>
		 *   <body>
		 *    => 화면 출력
		 *   </body>
		 *  </html>
		 *  
		 *  태그 => 지정된 태그만 사용
		 *  태그는 소문자를 구분하지 않는다(약속:태그는 소문자로 사용)
		 */
		out.println("<body>");
		out.println("<center>");
		out.println("<h1>Login</h1>");
		out.println("<form method=post action=LoginServlet>");
		out.println("<table width=250>");
		out.println("<tr>");
		out.println("<td width=15% align=right>이름</td>");
		out.println("<td width=85%>");
		out.println("<input type=text name=ename size=17>");
		out.println("</td>");
		out.println("</tr>");
		
		out.println("<tr>");
		out.println("<td width=15% align=right>사번</td>");
		out.println("<td width=85%>");
		out.println("<input type=password name=empno size=17>");
		out.println("</td>");
		out.println("</tr>");
		
		out.println("<tr>");
		out.println("<td align=center colspan=2>"); //td태그 두개를 통합 가로통합 colspan / 세로통합 rowspan
		out.println("<input type=submit value=로그인>");
		out.println("</td>");
		out.println("</tr>");
		
		out.println("</table>");
		out.println("</form>");
		out.println("</center>");
		out.println("</body>");
		out.println("</html>");
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// 요청처리
		response.setContentType("text/html;charset=EUC-KR");
		PrintWriter out = response.getWriter();
		String ename = request.getParameter("ename");
		String empno = request.getParameter("empno");
		MyDAO dao = new MyDAO();
		String result=dao.isLogin(ename.toUpperCase(), Integer.parseInt(empno));
		//System.out.println("이름:"+ename.toUpperCase());
		//System.out.println("사번:"+empno);
		if(result.equals("NONAME")) {
			out.println("<script>");
			out.println("alert(\"이름이 존재하지 않습니다\");");
			out.println("history.back();"); // 브라우저 back버튼과 동일 원상복귀
			out.println("</script>");
		}
		else if(result.equals("NOSABUN")) {
			out.println("<script>");
			out.println("alert(\"사번이 틀립니다\");");
			out.println("history.back();");
			out.println("</script>");
		}
		else {
			//out.println("<script>");
			//out.println("alert(\""+result+"님 메인으로 이동합니다\");");
			//out.println("</script>");
			response.sendRedirect("MusicServlet");
		}
	}

}

 

<!DOCTYPE html>
<!-- 
	1) HTML 시작 => 브라우저
	2) 버전에 맞게 해석해서 사용
 -->
<html><!-- 시작점 (생략이 가능) -->
<head><!-- 문서의 정보 (CSS, Script, link) -->
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body><!-- 화면 출력 (출력 태그) -->
</body>
</html>

1. HTML의 기본 구조
 => HTML (MarkUP) <> => 태그


2. HTML 구성 요소

    1) 태그 <a>
       = 여는 태그
         <table>
       = 닫는 태그
         </table>
       = 단독 태그 => 닫지 않아도 된다
         <br> <img> <input>
       = 여는 태그와 닫는 태그는 정확히 입력한다
       = 들여쓰기
         <table>
           <tr>
             <td></td>
           </tr>
         </table>


    2) 속성 <a href="">
              =======
       <태그 속성명 = 값 속성명 = 값>
       <img src="" width="" height="">
            width="500" height=350
       <a href="" title="Hello Java"> => " "없으면 공백앞까지 Hello만


    3) HTML은 이미 만 들어진 태그만 사용 (사용자 정의가 없다)


    4) 반드시 계층구조 (포함관계가 명확해야 한다)
       <a><b><h1>값</h1></b></a>

 

    5) 버전
       <!DOCTYPE html> => 5버젼
          => 크롬, 파이어폭스, 오페라, IE
          => 오페라를 중심으로 HTML5 => MS배제
          => <table>
            <font> ==> 사용(X) 권장
             div, span, section ... => CSS
          => HTML5 태그 시멘택 태그
                      =====
          => 알아보기 쉬운 태그이름
             HTML => 추상적인 개념
             <br> <p>
             <embed> => <video>
             <!DOCTYPE html 4.01>


3. 브라우저에서 실행하는 언어
   1) HTML (지정된 태그)
   2) XML  (사용자 정의 태그)
      <name> <이름>

 

4. 텍스트 관련
    = 제목을 표시하는 태그
      <h1> ~ <h6>
          태그형태
      1) block println()=> 다음줄에 출력
      2) inline print()=> 옆에 붙음
  1) <input type=text size=10 style="display: block;">
  2) <input type=text size=10>
  
   = 단락을 나누는 태그
     <p></p> 한블럭씩 띄움
   = 다음줄 출력하는 태그 (\n)
     <br> 한줄씩 띄움
   = 수평선을 그린다
     <hr>

   = 인용문 첨부

     <blockquote>

   = 있는 그대로 출력(preview 있는 그대로)

     <pre></pre> ====> 댓글쓰기

   = 강조체

     <strong>강조</strong> <b>강조</b>

   = 이태리체

     <i>이태리</i> <em>두꺼운이태리</em> => <em><b>진한이태리</b></em>

   = new

     <sup><font color=red>new</font></sup> (super위쪽) sub(밑쪽)

 

ul, ol, dl

5. 목록 출력
  = ul, ol, dl
    unorder-list
     순서없는 목록을 출력
    order-list
     순서있는 목록을 출력
    data-list
  = table

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
 <h3>과정</h3>
 <ul><!- 메뉴 만들 때 사용-->
  <li>JSP</li>
  <li>Spring</li>
  <li>Kotlin</li>
 </ul>
 <h3>과정</h3>
 <ol>
  <li>JSP</li>
  <li>Spring</li>
  <li>Kotlin</li>
 </ol>
  <h3>과정</h3>
 <dl>
  <dt>JSP</dt>
  <dd>HTML</dd>
  <dd>Java</dd>
  <dd>Oracle</dd>
  <dt>Spring</dt>
  <dd>XML</dd>
  <dd>Annotation</dd>
  <dt>Kotlin</dt>
  <dd>Java</dd>
  <dd>Kotlin</dd>
  <dd>XML</dd>
 </dl>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
   <center>
    <h1>테이블 만들기</h1>
    <table width=500 border="1">
      <tr>
       <td align=left colspan="4">
       <input type=button value="등록">
       </td>
      </tr>
      <tr>
       <th>이름</th>
       <th>국어</th>
       <th>영어</th>
       <th>수학</th>
      </tr>
      <tr>
       <td align=center>홍길동</td>
       <td align=center>90</td>
       <td align=center>85</td>
       <td align=center>80</td>
      </tr>
      <tr>
       <td align=center>심청이</td>
       <td align=center>95</td>
       <td align=center>95</td>
       <td align=center>100</td>
      </tr>
      <tr>
       <td align=right colspan="4">
       <input type=button value="확인">
       </td>
      </tr>
    </table>
   </center>
</body>
</html>
반응형

'Front-end > HTML' 카테고리의 다른 글

국비 HTML - 태그, 속성  (0) 2020.08.18
국비 HTML - 태그, 목록출력 / 지니뮤직2  (0) 2020.08.10
Comments