• header.jsp

  • header.jsp에 jstl/core 경로를 taglib으로 잡아준다. (prefix이름을 c로 지정. jstl쓰기 위함)

  • userid 세션에 따라 헤더에 나타나는 메뉴를 다르게 잡아준다.

  • userid 세션이 비어있다면 로그인, 회원가입, 게시판 메뉴가 뜨도록한다.

  • 그게 아니라면(로그인 되어있다면) 로그아웃, 정보변경, 게시판 메뉴가 뜨도록한다.

  • 회원탈퇴 기능도 추가한다. 액션은 MemberDelete.java에서 처리한다.

 

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>   

<!DOCTYPE html>

<html lang="en">

<head>

  <title>Bootstrap Example</title>

  <meta charset="utf-8">                       

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>

  <script src="/project01/js/member.js"></script>

</head>

<body>

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">

  <!-- Brand/logo -->

  <a class="navbar-brand" href="#">

    <h3>LOGO</h3>

  </a>

 

  <!-- Links -->

  <ul class="navbar-nav">

  <c:choose>

    <c:when test="${empty sessionScope.userid}">

        <li class="nav-item">

          <a class="nav-link" href="/project01/member/login.me">로그인</a>

        </li>

        <li class="nav-item">

          <a class="nav-link" href="/project01/member/insert.me">회원가입</a>

        </li>

    </c:when>

    <c:otherwise>

        <li class="nav-item">

          <a class="nav-link" href="/project01/member/logout.me">로그아웃</a>

        </li>

        <li class="nav-item">

          <a class="nav-link" href="/project01/member/view.me">정보변경</a>

        </li>

        <li class="nav-item">

          <a class="nav-link" href="/project01/member/delete.me">회원탈퇴</a>

        </li>

    </c:otherwise>

  </c:choose>

        <li class="nav-item">

          <a class="nav-link" href="/project01/board/board.me">게시판</a>

        </li>

  </ul>

 

  <c:if test="${not empty sessionScope.userid}">

    <span class="navbar-text">

     ${sessionScope.userid} 님 반갑습니다.

    </span>

  </c:if>

</nav>

 


 

  • MemberDelete.java: 탈퇴하기 서블릿

 

package com.member.action;

import java.io.IOException;

import java.util.ArrayList;

import javax.servlet.RequestDispatcher;

import javax.servlet.ServletException;

import javax.servlet.annotation.WebServlet;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import javax.servlet.http.HttpSession;

import com.member.model.MemberDTO;

import com.member.model.SMemberDAOImpl;

/**

 * Servlet implementation class MemberDelete

 */

@WebServlet("/member/delete.me")

public class MemberDelete extends HttpServlet {

    private static final long serialVersionUID = 1L;

      

    /**

     * @see HttpServlet#HttpServlet()

     */

    public MemberDelete() {

        super();

        // TODO Auto-generated constructor stub

    }

    /**

     * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)

     */

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        HttpSession session=request.getSession();

        String userid=(String)session.getAttribute("userid");

        SMemberDAOImpl dao=SMemberDAOImpl.getInstance();

        dao.memberDel(userid);

        session.invalidate();

        response.sendRedirect("login.me");

    }

    /**

     * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)

     */

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

    

    }

}




  • list.jsp: 관리자로 로그인 했을때 뜨는 회원리스트. list.jsp가 header.jsp를 포함하고 있으므로 jstl을 사용할 수 있다. 따라서 <c: forEach> 구문으로 회원 리스트를 불러올 수 있다.

  • 회원 리스트는 list액션을 처리하는 MemberList에서 memberList()메소드를 이용하여 ArrayList형식으로 저장되어 있다. 그 ArrayList를 members이름으로 불러온다.

  • <c: forEach items="${members}" var="mem">, ${mem.name}

  • 회원리스트에 삭제할 수 있는 기능을 넣는다. member.js에서 del() 함수로 삭제한다. 

 

 

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<%@ include file="../include/header.jsp" %>

  <div class="container">

    <br/>

    <h3>회원리스트</h3><br/><br/>

    <table class="table table-hover">

    <thead>

      <tr>

        <th>이름</th>

        <th>아이디</th>

        <th>전화번호</th>

        <th>이메일</th>

        <th>구분</th>

        <th>삭제</th>

      </tr>

    </thead>

    <tbody>

      <c:forEach items="${members}" var="mem">

      <c:if test="${mem.admin==0 }">

        <c:set var="mode" value="일반회원"/>

      </c:if>

      <c:if test="${mem.admin==1 }">

        <c:set var="mode" value="관리자"/>

      </c:if>

        <tr>

            <td>${mem.name}</td>

            <td>${mem.userid}</td>

            <td>${mem.phone}</td>

            <td>${mem.email}</td>

            <c:if test="${mem.admin==0}">

                <td>일반회원</td>

                <td onclick="del('${mem.userid}')">삭제</td>

            </c:if>

            <c:if test="${mem.admin==1}">

                <td>관리자</td>

                <td>Admin</td>

            </c:if>

        </tr>

      </c:forEach>

    </tbody>

  </table>

  </div>

  <script>

  </script>

<%@ include file="../include/footer.jsp" %>


  • UserDelete.java:  회원 삭제 서블릿. 회원 삭제를 하면 자동적으로 회원수도 줄어들도록.

 

package com.member.action;

import java.io.IOException;

import java.io.PrintWriter;

import java.util.ArrayList;

import javax.servlet.ServletException;

import javax.servlet.annotation.WebServlet;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import org.json.simple.JSONArray;

import org.json.simple.JSONObject;

import com.member.model.MemberDTO;

import com.member.model.SMemberDAOImpl;

/**

 * Servlet implementation class UserDelete

 */

@WebServlet("/member/userDelete.me")

public class UserDelete extends HttpServlet {

    private static final long serialVersionUID = 1L;

      

    /**

     * @see HttpServlet#HttpServlet()

     */

    public UserDelete() {

        super();

        // TODO Auto-generated constructor stub

    }

    /**

     * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)

     */

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        request.setCharacterEncoding("utf-8");

        String userid=request.getParameter("userid");

        SMemberDAOImpl dao=SMemberDAOImpl.getInstance();

        dao.memberDel(userid); //삭제

        ArrayList<MemberDTO> arr=dao.memberList();

        int count=dao.getCount();

        //JSON 형태로 값을 가져가야함.

        JSONObject mainObj=new JSONObject();

        JSONArray jarr=new JSONArray();

        for(MemberDTO dto:arr) {

            String mode=dto.getAdmin()==1?"관리자":"일반회원";

            JSONObject obj=new JSONObject();

            obj.put("name", dto.getName());

            obj.put("userid", dto.getUserid());

            obj.put("email", dto.getEmail());

            obj.put("phone", dto.getPhone());

            obj.put("mode", mode);

            jarr.add(obj);

        }

        

        JSONObject countObj=new JSONObject();

        countObj.put("count", count);

        

        mainObj.put("root",jarr);

        mainObj.put("rootCount", countObj);

        

        response.setContentType("text/html;charset=utf-8");

        PrintWriter out=response.getWriter();

        out.println(mainObj.toString());

    }

    /**

     * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)

     */

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        // TODO Auto-generated method stub

        doGet(request, response);

    }

}

 


  • MemberList.java: 회원리스트 서블릿

 

package com.member.action;

import java.io.IOException;

import java.util.ArrayList;

import javax.servlet.RequestDispatcher;

import javax.servlet.ServletException;

import javax.servlet.annotation.WebServlet;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import com.member.model.MemberDTO;

import com.member.model.SMemberDAOImpl;

/**

 * Servlet implementation class MemberList

 */

@WebServlet("/member/list.me")

public class MemberList extends HttpServlet {

    private static final long serialVersionUID = 1L;

      

    /**

     * @see HttpServlet#HttpServlet()

     */

    public MemberList() {

        super();

        // TODO Auto-generated constructor stub

    }

    /**

     * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)

     */

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        request.setCharacterEncoding("utf-8");

        SMemberDAOImpl dao=SMemberDAOImpl.getInstance();

        ArrayList<MemberDTO> arr= dao.memberList();

        request.setAttribute("members", arr);

        

        RequestDispatcher rd=request.getRequestDispatcher("list.jsp");

        rd.forward(request, response);

    }

    /**

     * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)

     */

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        doGet(request, response);

    }

}


  • view.jsp: 일반회원이 로그인했을때 상세정보를 수정할 수 있는 폼

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<%@ include file="../include/header.jsp" %>

<div class="container">

  <form action="update.me" method="post" id="frm">

    <br/>

    <div class="form-group">

      <label for="id">id:</label>

      <input type="text" name="userid" id="userid" value="${member.userid}" readonly="readonly">

    </div>

    <div class="form-group">

      <label for="name">Name:</label>

      <input type="text" class="form-control" id="name" value="${member.name}" name="name">

    </div>

    <div class="form-group">

      <label for="pwd">Password:</label>

      <input type="password" class="form-control" id="pwd" value="${member.pwd}" name="pwd">

    </div>

    <div class="form-group">

      <label for="email">Email:</label>

      <input type="text" class="form-control" id="email" value="${member.email}" name="email">

    </div>

   

    <div class="form-group">

      <label for="phone">Phone:</label>

      <input type="text" class="form-control" id="phone" value="${member.phone}" name="phone">

    </div>

    <div class="form-check-inline">

        <label class="form-check-label">

        <input type="radio" class="form-check-input" name="admin" value="1">관리자

        </label>

    </div>

    <div class="form-check-inline">

      <label class="form-check-label">

        <input type="radio" class="form-check-input" name="admin"  value="0" checked>일반회원

      </label>

    </div>

    <script>

            if(${member.getAdmin()==0}){

                $("input:radio[value='0']").prop("checked", true);

            }else{

                $("input:radio[value='1']").prop("checked", true);              

            }

    </script>

    <br/>

     <button type="submit"  class="btn btn-primary">수정</button>

</div>

</form>

<%@ include file="../include/footer.jsp" %>




 

  • MemberView.java: 상세보기 서블릿

 

package com.member.action;

import java.io.IOException;

import javax.servlet.RequestDispatcher;

import javax.servlet.ServletException;

import javax.servlet.annotation.WebServlet;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import javax.servlet.http.HttpSession;

import com.member.model.MemberDTO;

import com.member.model.SMemberDAOImpl;

/**

 * Servlet implementation class MemberView

 */

@WebServlet("/member/view.me")

public class MemberView extends HttpServlet {

    private static final long serialVersionUID = 1L;

      

    /**

     * @see HttpServlet#HttpServlet()

     */

    public MemberView() {

        super();

        // TODO Auto-generated constructor stub

    }

    /**

     * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)

     */

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        HttpSession session=request.getSession();

        String userid=(String)session.getAttribute("userid");

        SMemberDAOImpl dao=SMemberDAOImpl.getInstance();

        MemberDTO dto=dao.memberView(userid);

        request.setAttribute("member", dto);

        

        RequestDispatcher rd=request.getRequestDispatcher("view.jsp");

        rd.forward(request, response);

    }

    /**

     * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)

     */

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

    

    }

}




 

  • MemberUpdate.java: 회원 상세보기-수정하기 서블릿

 

package com.member.action;

import java.io.IOException;

import javax.servlet.RequestDispatcher;

import javax.servlet.ServletException;

import javax.servlet.annotation.WebServlet;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import javax.servlet.http.HttpSession;

import com.member.model.MemberDTO;

import com.member.model.SMemberDAOImpl;

/**

 * Servlet implementation class MemberUpdate

 */

@WebServlet("/member/update.me")

public class MemberUpdate extends HttpServlet {

    private static final long serialVersionUID = 1L;

      

    /**

     * @see HttpServlet#HttpServlet()

     */

    public MemberUpdate() {

        super();

        // TODO Auto-generated constructor stub

    }

    /**

     * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)

     */

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        

        

    }

    /**

     * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)

     */

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        request.setCharacterEncoding("utf-8");

        MemberDTO dto=new MemberDTO();

        dto.setAdmin(Integer.parseInt(request.getParameter("admin")));

        dto.setEmail(request.getParameter("email"));

        dto.setName(request.getParameter("name"));

        dto.setPhone(request.getParameter("phone"));

        dto.setPwd(request.getParameter("pwd"));

        dto.setUserid(request.getParameter("userid"));

        SMemberDAOImpl dao=SMemberDAOImpl.getInstance();

        int flag=dao.memberUpdate(dto);

        HttpSession session=request.getSession();

        if(flag==1) {

            session.invalidate();

            response.sendRedirect("login.me");

        }

    }

}




  • MemberLogout.java: 로그아웃 서블릿

 

package com.member.action;

import java.io.IOException;

import javax.servlet.ServletException;

import javax.servlet.annotation.WebServlet;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import javax.servlet.http.HttpSession;

/**

 * Servlet implementation class MemberLogout

 */

@WebServlet("/member/logout.me")

public class MemberLogout extends HttpServlet {

    private static final long serialVersionUID = 1L;

      

    /**

     * @see HttpServlet#HttpServlet()

     */

    public MemberLogout() {

        super();

        // TODO Auto-generated constructor stub

    }

    /**

     * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)

     */

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        HttpSession session=request.getSession();

        session.invalidate();

        response.sendRedirect("login.me");

    }

    /**

     * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)

     */

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

    }

}

 


 

  • member.js: 자바스크립트

 

var exp= /^[0-9]{3}-[0-9]{4}-[0-9]{4}$/;

$(document).ready(function(){

    $("#send").click(function(){

        //아이디가 공백일때

        if($("#userid").val()==""){

            alert("아이디를 입력하세요");

            $("#userid").focus();

            return false;

        }

        //암호가 공백일때

        if($("#pwd").val()==""){

            alert("암호를 입력하세요");

            $("#pwd").focus();

            return false;

        }

        //암호확인이 공백일때

        if($("#pwd_check").val()==""){

            alert("암호확인 필수");

            $("#pwd_check").focus();

            return false;

        }

        //암호 일치확인

        if($("#pwd").val()!=$("#pwd_check").val()){

            alert("암호 불일치");

            $("#pwd_check").focus();

            return false;

        }

        if($("#name").val()==""){

            alert("이름을 입력하세요");

            return false;

        }

        if($("#email").val()==""){

            alert("이메일을 입력하세요");

            return false;

        }

        if($("#phone").val()==""){

            alert("전화번호를 입력하세요");

            return false;

        }

        //전화번호 확인

        if(!$("#phone").val().match(exp)){

            alert("전화번호 입력 양식이 아닙니다.");

            $("#phone").focus();

            return false;

        }

        $("#frm").submit();

    })//send

    

    //아이디 중복체크 버튼

    $("#idcheck").click(function(){

        window.open("idCheck.jsp", "", "width=600 height=500")

    }); //idcheck

});//document

function del(userid){

    if(confirm("정말 삭제할까요?")){

        $.getJSON("userDelete.me?userid="+userid, function(data){

            //alert(data.root.length);

            var htmlStr="";

            $.each(data.root, function(key, val){

                htmlStr+="<tr>";

                htmlStr+="<td>"+val.name+"</td>";

                htmlStr+="<td>"+val.userid+"</td>";

                htmlStr+="<td>"+val.phone+"</td>";

                htmlStr+="<td>"+val.email+"</td>";

                htmlStr+="<td>"+val.mode+"</td>";

                if(val.mode=='일반회원'){

                    htmlStr+="<td onclick=del('"+val.userid+"')>삭제</td>";

                }else{

                    htmlStr+="<td>Admin</td>";

                }

                htmlStr+="</tr>";

            })

            $("table tbody").html(htmlStr);

        })

    }

}


 

  • SMemberDAOImpl.java: 추가 삭제 수정 등 각종 메소드 자바파일

 

package com.member.model;

import java.sql.Connection;

import java.sql.PreparedStatement;

import java.sql.ResultSet;

import java.sql.SQLException;

import java.sql.Statement;

import java.util.ArrayList;

import javax.naming.Context;

import javax.naming.InitialContext;

import javax.sql.DataSource;

public class SMemberDAOImpl implements MemberDAO{

    

    private static SMemberDAOImpl instance=new SMemberDAOImpl();

    public static SMemberDAOImpl getInstance() {

        return instance;

    }

    private Connection getConnection() throws Exception{

        Context initCtx=new InitialContext();

        Context envCtx=(Context) initCtx.lookup("java:comp/env");

        DataSource ds=(DataSource) envCtx.lookup("jdbc/member"); //context.xml의 name을 jdbc/member로 바꾸기

        return ds.getConnection();

    }

    

    //회원가입

    public void memberInsert(MemberDTO vo) {

        Connection con=null;

        PreparedStatement ps=null;

        

        try {

            con=getConnection();

            String sql="INSERT INTO jmember VALUES(?,?,?,?,?,?)";

            ps=con.prepareStatement(sql);

            ps.setString(1, vo.getUserid());

            ps.setString(2, vo.getName());

            ps.setString(3, vo.getPwd());

            ps.setString(4, vo.getEmail());

            ps.setString(5, vo.getPhone());

            ps.setInt(6, vo.getAdmin());

            ps.executeUpdate();

        } catch (Exception e) {

            e.printStackTrace();

        } finally {

            closeConnection(con, ps);

        }

    }

    //회원리스트 보기

    public ArrayList<MemberDTO> memberList() {

        Connection con=null;

        Statement st=null;

        ResultSet rs=null;

        ArrayList<MemberDTO>arr=new ArrayList<MemberDTO>();

        

        try {

            con=getConnection();

            String sql="select * from jmember";

            st=con.createStatement();

            rs=st.executeQuery(sql);

            while(rs.next()) {

                MemberDTO dto=new MemberDTO();

                dto.setAdmin(rs.getInt("admin"));

                dto.setEmail(rs.getString("email"));

                dto.setName(rs.getString("name"));

                dto.setPhone(rs.getString("phone"));

                dto.setPwd(rs.getString("pwd"));

                dto.setUserid(rs.getString("userid"));

                arr.add(dto);

            }

        } catch (Exception e) {

            e.printStackTrace();

        } finally {

            closeConnection(con, st, rs);

        }

        return arr;

    }

    //회원정보 수정

    public int memberUpdate(MemberDTO vo) {

        Connection con=null;

        PreparedStatement ps=null;

        int flag=0;

        try {

            con=getConnection();

            String sql="update jmember set name=?, pwd=?, email=?, phone=?, admin=? where userid=?";

            ps=con.prepareStatement(sql);

            ps.setString(1, vo.getName());

            ps.setString(2, vo.getPwd());

            ps.setString(3, vo.getEmail());

            ps.setString(4, vo.getPhone());

            ps.setInt(5, vo.getAdmin());

            ps.setString(6, vo.getUserid());

            flag=ps.executeUpdate();

        } catch (Exception e) {

            e.printStackTrace();

        } finally {

            closeConnection(con, ps);

        }

        return flag;

    }

    

    //회원 상세보기

    public MemberDTO memberView(String userid) {

        Connection con=null;

        Statement st=null;

        ResultSet rs=null;

        MemberDTO dto=null;

        try {

            con=getConnection();

            String sql="select * from jmember where userid='"+userid+"'";

            st=con.createStatement();

            rs=st.executeQuery(sql);

            if(rs.next()) {

                dto=new MemberDTO();

                dto.setAdmin(rs.getInt("admin"));

                dto.setEmail(rs.getString("email"));

                dto.setName(rs.getString("name"));

                dto.setPhone(rs.getString("phone"));

                dto.setPwd(rs.getString("pwd"));

                dto.setUserid(rs.getString("userid"));

            }

        } catch (Exception e) {

            e.printStackTrace();

        } finally {

            closeConnection(con, st, rs);

        }

        return dto;

    }

    

    //삭제

    public void memberDel(String userid) {

        Connection con=null;

        Statement st=null;

        try {

            con=getConnection();

            String sql="delete from JMEMBER where userid='"+userid+"'";

            st=con.createStatement();

            st.executeUpdate(sql);

        } catch (Exception e) {

            e.printStackTrace();

        } finally {

            closeConnection(con, st, null);

        }

    }

    

    //아이디 중복확인 사용하기 버튼

    public String idCheck(String userid) {

        Connection con=null;

        Statement st=null;

        ResultSet rs=null;

        String flag="yes"; //사용가능

        try {

            con=getConnection();

            String sql="select * from jmember where userid='"+userid+"'";

            st=con.createStatement();

            rs=st.executeQuery(sql);

            if(rs.next()) {

                flag="no"; //사용불가능

            }

        } catch (Exception e) {

            e.printStackTrace();

        } finally {

            closeConnection(con, st, rs);

        }

        return flag;

    }

    //로그인체크 (비밀번호 오류: 2, 회원아님: -1, 관리자: 1, 일반회원: 0)

    public int loginCheck(String userid, String pwd) {

        Connection con=null;

        Statement st=null;

        ResultSet rs=null;

        int flag=-1;

        try {

            con=getConnection();

            String sql="select pwd, admin from jmember where userid='"+userid+"'";

            st=con.createStatement();

            rs=st.executeQuery(sql);

            if(rs.next()) { //id 맞음

                if(rs.getString("pwd").equals(pwd)) { //비번 일치

                    flag=rs.getInt("admin");

                }else { //비번 오류

                    flag=2;

                }

            }

        } catch (Exception e) {

            e.printStackTrace();

        } finally {

            closeConnection(con, st, rs);

        }

        return flag;

    }

    

    //회원수

    public int getCount() {

        Connection con=null;

        Statement st=null;

        ResultSet rs=null;

        int count=0;

        

        try {

            con=getConnection();

            String sql="select count(*) from jmember";

            st=con.createStatement();

            rs=st.executeQuery(sql);

            if(rs.next()) {

                count=rs.getInt(1);

            }

        } catch (Exception e) {

            e.printStackTrace();

        } finally {

            closeConnection(con, st, rs);

        }

        return count;

    }

    

    //닫기 closeConnection

    private void closeConnection(Connection con, PreparedStatement ps) {

        try {

            if(ps!=null) ps.close();

            if(con!=null) con.close();

        } catch (SQLException e) {

            e.printStackTrace();

        }

    }

    private void closeConnection(Connection con, Statement st, ResultSet rs) {

        try {

            if(st!=null) st.close();

            if(con!=null) con.close();

            if(rs!=null) rs.close();

        } catch (SQLException e) {

            e.printStackTrace();

        }

    }

    

}

'Learning > JSP' 카테고리의 다른 글

파일 전송  (0) 2020.08.06
게스트북 (평가리스트) 만들기  (0) 2020.08.06
로그인, 회원가입, 게시판 만들기 1  (0) 2020.07.29
서블릿: 출력경로 통일하기  (0) 2020.07.29
서블릿으로 주소록 만들기  (0) 2020.07.28
  • ServletTest02 (address를 다른방식으로 표현. Controller를 하나로)

 

  • Dynamic Web Project로 ServletTest02 생성. src에 org.address.controller와 org.address.model 패키지 생성. org.address.model패키지에 SAddressDAO.java, SAddressDTO.java, ZipcodeDTO.java 파일 붙여넣기

 

  • WebContent에 detail.jsp, inser.jsp, list.jsp, zipCheck.jsp 붙여넣기

 

  • WebContent-WEB-INF-lib에 json-simple-1.1.1.jar와 jstl-1.2.jar 붙여넣기

 


  1. jsp에 action을 *.ad로 고치기

  1. org.address.controller 패키지에서 CommonController를 만들어서 *.ad로 매핑하기

  2. insert.ad=>AddrInsertAction

  3. list.ad=>AddrListAction

  4. delete.ad=>AddrDeleteAction

  5. Update.ad=>AddrUpdateAction

  6. Search.ad=>AddrSearchAction

  7. Action 인터페이스를 만들기

 

 


 

https://www.w3schools.com/bootstrap4/bootstrap_navs.asp

 

Bootstrap 4 Navs

Bootstrap 4 Navs Nav Menus Link Link Link Disabled If you want to create a simple horizontal menu, add the .nav class to a element, followed by .nav-item for each and add the .nav-link class to their links: Example

 

위 사이트에서 부트스트랩 디자인 사용하기

 


  • 로그인, 회원가입, 게시판 만들기 (Dynamic Web Project로 project01 생성)

 

  • src에는 com.member.action으로 서블릿 객체들 만들기, com.member.model로 DAO(인터페이스), DTO, DAOImpl 자바 클래스 만들기

  • WebContent에는 board, js, include, member 폴더 만들기

    • board 폴더에는 board.jsp (게시판)

    • js 폴더에는 member.js로 자바스크립트 파일 만들기 (New file에서 file 이름을 member.js로 하면 됨)

    • member 폴더에는 idCheck.jsp, join.jsp, list.jsp, login.jsp 파일을 만들기. 각각 폼 태그가 있어서 입력 양식이 됨. 

    • include에는 header와 footer jsp파일들을 만들고 폼 태그에서 그 주소로 찾아가도록 함

  • WEB-INF에 web.xml 파일을 붙여넣고 lib 폴더에 json, jstl 파일 붙여넣기

  • META-INF에 context.xml 파일 붙여넣기


 

  • 실행순서

 

  • header.jsp

  1. 부트스트랩으로 스타일을 지정한다. 

  2. 헤더의 메뉴에는 로그인, 회원가입, 게시판을 만든다.

  3. 로그인 링크는 login.me (로그인 버튼을 눌렀을때는 get방식으로 login.jsp로 넘어가고, 로그인 화면에서 로그인을 실행했을때는 post방식으로 값들을 입력할 수 있다. 회원가입과 게시판도 마찬가지로 get과 post 방식으로 분리하여 처리된다.)

  4. 회원가입 링크는 insert.me

  5. 게시판 링크는 board.me

 

 

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<!DOCTYPE html>

<html lang="en">

<head>

  <title>Bootstrap Example</title>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>

  <script src="/project01/js/member.js"></script>

</head>

<body>

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">

  <!-- Brand/logo -->

  <a class="navbar-brand" href="#">

    <h3>LOGO</h3>

  </a>

 

  <!-- Links -->

  <ul class="navbar-nav">

    <li class="nav-item">

      <a class="nav-link" href="/project01/member/login.me">로그인</a>

    </li>

    <li class="nav-item">

      <a class="nav-link" href="/project01/member/insert.me">회원가입</a>

    </li>

    <li class="nav-item">

      <a class="nav-link" href="/project01/board/board.me">게시판</a>

    </li>

  </ul>

</nav>

 


 

  • footer.jsp

 

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<footer>

    <div class="jumbotron text-center" style="margin-bottom:0">

      <p>Footer</p>

    </div>

</footer>

</body>

</html>

 


  • join.jsp

  1. 상단에 include file로 header.jsp를 참조한다. 

  2. form action은 insert.me, method 방식은 post, id는 frm으로 선언

  3. 아이디, 패스워드, 이름, 이메일, 전화번호 작성란과 라디오버튼으로 회원종류를 구분한다.

  4. 하단에 include file로 footer.jsp를 참조한다.

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<%@ include file="../include/header.jsp" %>

<div class="container">

  <form action="insert.me" method="post" id="frm">

    <div class="row">

        <div class="col">

          <label for="userid">id:</label>

          <input type="text" class="form-control" id="userid" placeholder="Enter id" name="userid" >

        </div>

        <div class="col align-self-end" >

          <button  type="button"  id="idcheck"  class="btn btn-primary">중복확인</button>

        </div>

    </div>

   

    <div class="form-group">

      <label for="name">Name:</label>

      <input type="text" class="form-control" id="name" placeholder="Enter name" name="name">

    </div>

    <div class="form-group">

      <label for="pwd">Password:</label>

      <input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pwd">

    </div>

   

    <div class="form-group">

      <label for="pwd_check">Password Confirm:</label>

      <input type="password" class="form-control" id="pwd_check" placeholder="Enter password Confirm" name="pwd_check">

    </div>

   

    <div class="form-group">

      <label for="email">Email:</label>

      <input type="text" class="form-control" id="email" placeholder="Enter Eamil" name="email">

    </div>

   

    <div class="form-group">

      <label for="phone">Phone:</label>

      <input type="text" class="form-control" id="phone" placeholder="Enter Phone" name="phone">

    </div>

   

    <div class="form-check-inline">

        <label class="form-check-label">

        <input type="radio" class="form-check-input" name="admin" value="1">관리자

        </label>

    </div>

    

    <div class="form-check-inline">

      <label class="form-check-label">

        <input type="radio" class="form-check-input" name="admin"  value="0" checked>일반회원

      </label>

    </div>

    <br/>

     <button  id="send"  class="btn btn-primary">회원가입</button>

    </form>

    </div>

<%@ include file="../include/footer.jsp" %>


 

  • join.jsp에서 action경로를 insert.me로 처리했기 때문에 그 파일이 필요하다.

  • Controller인 서블릿 MemberInsert.java를 com.member.action에 만들고 WebServlet 경로를 /member/insert.me로 잡아준다.

  • MemberInsert.java

 

package com.member.action;

import java.io.IOException;

import javax.servlet.RequestDispatcher;

import javax.servlet.ServletException;

import javax.servlet.annotation.WebServlet;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import com.member.model.MemberDTO;

import com.member.model.SMemberDAOImpl;

/**

 * Servlet implementation class MemberInsert

 */

@WebServlet("/member/insert.me")

public class MemberInsert extends HttpServlet {

    private static final long serialVersionUID = 1L;

      

    /**

     * @see HttpServlet#HttpServlet()

     */

    public MemberInsert() {

        super();

        // TODO Auto-generated constructor stub

    }

    /**

     * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)

     */

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        RequestDispatcher rd=request.getRequestDispatcher("join.jsp");

        rd.forward(request, response);

    }

    /**

     * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)

     */

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        request.setCharacterEncoding("utf-8");

        SMemberDAOImpl dao=SMemberDAOImpl.getInstance();

        MemberDTO member=new MemberDTO();

        member.setAdmin(Integer.parseInt(request.getParameter("admin")));

        member.setEmail(request.getParameter("email"));

        member.setName(request.getParameter("name"));

        member.setPhone(request.getParameter("phone"));

        member.setPwd(request.getParameter("pwd"));

        member.setUserid(request.getParameter("userid"));

        dao.memberInsert(member);

        response.sendRedirect("login.me");

    }

}

 


 

  • member.js: 자바스크립트 파일

 

var exp= /^[0-9]{3}-[0-9]{4}-[0-9]{4}$/;

$(document).ready(function(){

    $("#send").click(function(){

        //아이디가 공백일때

        if($("#userid").val()==""){

            alert("아이디를 입력하세요");

            $("#userid").focus();

            return false;

        }

        //암호가 공백일때

        if($("#pwd").val()==""){

            alert("암호를 입력하세요");

            $("#pwd").focus();

            return false;

        }

        //암호확인이 공백일때

        if($("#pwd_check").val()==""){

            alert("암호확인 필수");

            $("#pwd_check").focus();

            return false;

        }

        //암호 일치확인

        if($("#pwd").val()!=$("#pwd_check").val()){

            alert("암호 불일치");

            $("#pwd_check").focus();

            return false;

        }

        if($("#name").val()==""){

            alert("이름을 입력하세요");

            return false;

        }

        if($("#email").val()==""){

            alert("이메일을 입력하세요");

            return false;

        }

        if($("#phone").val()==""){

            alert("전화번호를 입력하세요");

            return false;

        }

        //전화번호 확인

        if(!$("#phone").val().match(exp)){

            alert("전화번호 입력 양식이 아닙니다.");

            $("#phone").focus();

            return false;

        }

        $("#frm").submit();

    })//send

    

    //아이디 중복체크 버튼

    $("#idcheck").click(function(){

        window.open("idCheck.jsp", "", "width=600 height=500")

    }); //idcheck

    

    

});//document

 


 

  • login.jsp

  1. header.jsp와 footer.jsp파일을 include로 불러준다.

  2. 하단에 script태그를 쓰고 아이디와 암호 공백시 경고창을 띄우도록 해준다.

  3. ajax으로 login.me(post방식) url 연결하여 아이디와 비밀번호 대조하고 로그인하도록 처리한다.

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<%@ include file="../include/header.jsp" %>

  <div class="container">

 

  <form action="login.me" method="post" id="loginFrm">

    <div class="form-group">

      <label for="userid">id:</label>

      <input type="text" class="form-control" id="userid" placeholder="Enter id" name="userid">

    </div>

    <div class="form-group">

      <label for="pwd">Password:</label>

      <input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pwd">

    </div>

    <div class="form-group form-check">

      <label class="form-check-label">

        <input class="form-check-input" type="checkbox" name="remember"> Remember me

      </label>

    </div>

    <button type="button" id="loginBtn" class="btn btn-primary">로그인</button>

  </form>

</div>

<script>

$("#loginBtn").click(function(){

    if($("#userid").val()==""){

        alert("아이디를 입력하세요");

        $("#userid").focus();

        return false;

    }

    if($("#pwd").val()==""){

        alert("암호를 입력하세요");

        $("#pwd").focus();

        return false;

    }

    $.ajax({

        type : "post",

        url  : "login.me",

        data : {"userid":$("#userid").val(), "pwd":$("#pwd").val()},

        success : function(value){

            switch(value.trim()){

            case "0" : alert("로그인 성공"); location.href="view.me"; break;

            case "1" : alert("관리자 로그인"); location.href="list.me"; break;

            case "2" : alert("비밀번호 오류"); break;

            case "-1": alert("회원이 아닙니다"); location.href="insert.me"; break;

            default: alert(value.trim());

            }

        },

        error: function(e){

            alert("error:"+e);

        }

    })

})//loginBtn

</script>

<%@ include file="../include/footer.jsp" %>


  • board.jsp: 아직 내용이 없음

 

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<%@ include file="../include/header.jsp" %>

<div class="container-fluid">

  <h3>게시판</h3>

</div>

<%@ include file="../include/footer.jsp" %>

 


 

  • login.jsp의 form action을 login.me로 했기 때문에 그 파일이 필요하다. 마찬가지로 Controller인 서블릿 MemberLogin.java를 생성하고 경로를 /member/login.me로 잡아준다.

  • MemberLogin.java

 

package com.member.action;

import java.io.IOException;

import java.io.PrintWriter;

import javax.servlet.RequestDispatcher;

import javax.servlet.ServletException;

import javax.servlet.annotation.WebServlet;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import javax.servlet.http.HttpSession;

import com.member.model.SMemberDAOImpl;

/**

 * Servlet implementation class MemberLogin

 */

@WebServlet("/member/login.me")

public class MemberLogin extends HttpServlet {

    private static final long serialVersionUID = 1L;

      

    /**

     * @see HttpServlet#HttpServlet()

     */

    public MemberLogin() {

        super();

        // TODO Auto-generated constructor stub

    }

    /**

     * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)

     */

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        RequestDispatcher rd=request.getRequestDispatcher("login.jsp");

        rd.forward(request, response);

    }

    /**

     * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)

     */

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        request.setCharacterEncoding("utf-8");

        String userid=request.getParameter("userid");

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

        SMemberDAOImpl dao=SMemberDAOImpl.getInstance();

        int flag=dao.loginCheck(userid, pwd);

        if(flag==0 || flag==1) {

            HttpSession session=request.getSession();

            session.setAttribute("userid", userid);

        }

        response.setContentType("text/html;charset=utf-8");

        PrintWriter out = response.getWriter();

        out.println(flag);

    }

}

 


 

  • SMemberDAOImpl.java

 

package com.member.model;

import java.sql.Connection;

import java.sql.PreparedStatement;

import java.sql.ResultSet;

import java.sql.SQLException;

import java.sql.Statement;

import java.util.ArrayList;

import javax.naming.Context;

import javax.naming.InitialContext;

import javax.sql.DataSource;

public class SMemberDAOImpl implements MemberDAO{

    

    private static SMemberDAOImpl instance=new SMemberDAOImpl();

    public static SMemberDAOImpl getInstance() {

        return instance;

    }

    private Connection getConnection() throws Exception{

        Context initCtx=new InitialContext();

        Context envCtx=(Context) initCtx.lookup("java:comp/env");

        DataSource ds=(DataSource) envCtx.lookup("jdbc/member"); //context.xml의 name을 jdbc/member로 바꾸기

        return ds.getConnection();

    }

    

    //회원가입

    public void memberInsert(MemberDTO vo) {

        Connection con=null;

        PreparedStatement ps=null;

        

        try {

            con=getConnection();

            String sql="INSERT INTO jmember VALUES(?,?,?,?,?,?)";

            ps=con.prepareStatement(sql);

            ps.setString(1, vo.getUserid());

            ps.setString(2, vo.getName());

            ps.setString(3, vo.getPwd());

            ps.setString(4, vo.getEmail());

            ps.setString(5, vo.getPhone());

            ps.setInt(6, vo.getAdmin());

            ps.executeUpdate();

        } catch (Exception e) {

            e.printStackTrace();

        } finally {

            closeConnection(con, ps);

        }

    }

    @Override

    public ArrayList<MemberDTO> memberList() {

        // TODO Auto-generated method stub

        return null;

    }

    @Override

    public int memberUpdate(MemberDTO vo) {

        // TODO Auto-generated method stub

        return 0;

    }

    @Override

    public MemberDTO memberView(String userid) {

        // TODO Auto-generated method stub

        return null;

    }

    @Override

    public void memberDel(String userid) {

        // TODO Auto-generated method stub

        

    }

    @Override

    public String idCheck(String userid) {

        // TODO Auto-generated method stub

        return null;

    }

    //로그인체크 (비밀번호 오류: 2, 회원아님: -1, 관리자: 1, 일반회원: 0)

    public int loginCheck(String userid, String pwd) {

        Connection con=null;

        Statement st=null;

        ResultSet rs=null;

        int flag=-1;

        try {

            con=getConnection();

            String sql="select pwd, admin from jmember where userid='"+userid+"'";

            st=con.createStatement();

            rs=st.executeQuery(sql);

            if(rs.next()) { //id 맞음

                if(rs.getString("pwd").equals(pwd)) { //비번 일치

                    flag=rs.getInt("admin");

                }else { //비번 오류

                    flag=2;

                }

            }

        } catch (Exception e) {

            e.printStackTrace();

        } finally {

            closeConnection(con, st, rs);

        }

        return flag;

    }

    

    @Override

    public int memberCount() {

        // TODO Auto-generated method stub

        return 0;

    }

    

    //닫기 closeConnection

    private void closeConnection(Connection con, PreparedStatement ps) {

        try {

            if(ps!=null) ps.close();

            if(con!=null) con.close();

        } catch (SQLException e) {

            e.printStackTrace();

        }

    }

    private void closeConnection(Connection con, Statement st, ResultSet rs) {

        try {

            if(st!=null) st.close();

            if(con!=null) con.close();

            if(rs!=null) rs.close();

        } catch (SQLException e) {

            e.printStackTrace();

        }

    }

    

}


 

  • MemberDTO.java: 객체생성 자바 빈즈

 

package com.member.model;

public class MemberDTO {

    private String name;

    private String userid;

    private String pwd;

    private String email;

    private String phone;

    private int admin;

    

    public String getName() {

        return name == null ? "" : name.trim();

    }

    public void setName(String name) {

        this.name = name;

    }

    public String getUserid() {

        return userid == null ? "" : userid.trim();

    }

    public void setUserid(String userid) {

        this.userid = userid;

    }

    public String getPwd() {

        return pwd == null ? "" : pwd.trim();

    }

    public void setPwd(String pwd) {

        this.pwd = pwd;

    }

    public String getEmail() {

        return email == null ? "" : email.trim();

    }

    public void setEmail(String email) {

        this.email = email;

    }

    public String getPhone() {

        return phone == null ? "" : phone.trim();

    }

    public void setPhone(String phone) {

        this.phone = phone;

    }

    public void setAdmin(int admin) {

        this.admin = admin;

    }

    public int getAdmin() {

        return admin;

    }

}


 

 

  • MemberDAO.java: 인터페이스 파일

 

package com.member.model;

import java.util.ArrayList;

public interface MemberDAO {

    //CRUD(create read update delete)라고 함

    //추가 (MemberVO 형의 vo 객체를 추가)

    public void memberInsert(MemberDTO vo);

    //전체보기 (전체리스트를 보려면? select에 들어가는 값 MemberVO 형의 ArrayList를 본다.)

    public ArrayList<MemberDTO>memberList();

    //수정

    public int memberUpdate(MemberDTO vo);

    //상세보기 (하나를 보려면? return값이 있다는 뜻. MemberVO형)

    public MemberDTO memberView(String userid);

    //삭제

    public void memberDel(String userid);

    //아이디 중복 체크 (리턴값은 userid)

    public String idCheck(String userid);

    //로그인 체크 (리턴값은 flag)

    public int loginCheck(String userid, String pwd);

    //전체회원 수

    public int memberCount();

}

 

'Learning > JSP' 카테고리의 다른 글

게스트북 (평가리스트) 만들기  (0) 2020.08.06
로그인, 회원가입, 게시판 만들기 2  (0) 2020.07.30
서블릿: 출력경로 통일하기  (0) 2020.07.29
서블릿으로 주소록 만들기  (0) 2020.07.28
JSTL  (0) 2020.07.27
  • New Dynamic Web Project 만들기: 이름은 ServletTest01

  • Generate web.xml deployment descriptor에 체크

 

 

  • FirstServlet에서 adder2.jsp, bbs.jsp, personForm2.jsp, personResult2.jsp를 복사해서 ServletTest01의 WebContent에 붙여넣기. lib폴더에 jstl-1.2.jar도 붙여넣기

 


 

  • adder2.jsp: 숫자 덧셈 폼

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

</head>

<body>

<form action="adder.go">

첫번째 수 : <input type="text" name="num1"><br>

두번째 수 : <input type="text" name="num2"><br>

<input type="submit" value="더하기">

</form>

</body>

</html>

 


  • bbs.jsp: 간단한 글쓰기 폼

 

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

</head>

<body>

<h1>글쓰기</h1>

<form action="bbs.go" method="post">

이름 : <input type="text" name="name"><br>

제목 : <input type="text" name="title"><br>

내용 : <br>

<textarea rows="5" cols="20" name="content"></textarea><br>

<input type="submit" value="전송">

</form>

</body>

</html>

 


 

  • personForm2.jsp: 간단한 개인정보 입력 폼

 

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

</head>

<body>

<h2>개인 정보 입력</h2>

<form action="person2.go" method="post">

이름: <input type="text" name="name"><br>

아이디: <input type="text" name="id"><br>

패스워드 : <input type="password" name="password"><br>

성별:

 <label for="man">  남</label>

 <input type="radio" name="gender" id="man"  value="남" checked >

  여 <input type="radio" name="gender" value="여"><br>

메일수신여부:

<input type="checkbox" name="notice" value="공지메일">공지메일

<input type="checkbox" name="notice" value="광고메일">광고메일

<input type="checkbox" name="notice" value="배송확인메일">배송확인메일<br><br>

직업:

<select name="job">

  <option value="회사원">회사원

  <option value="학생">학생

   <option value="기타">기타

</select><br><br>

<input type="submit" value="확인">

<input type="reset"  value="취소">

</form>

</body>

</html>

 


 

  • personResult2.jsp: jstl경로 처리

 

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>   

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

</head>

<body>

이름11 : ${p.name }<br>

아이디11 : ${p.id }<br>

성별11 : ${p.gender }<br>

직업11 : ${p.job }<br>

메일11 :

<c:forEach items="${p. notice}" var="mail">

  ${mail }

</c:forEach><br>

${msg }

</body>

</html>

 


  • adder2.jsp와 bbs.jsp, personForm2.jsp에서 form action의 경로를 전부 .go로 끝나도록 수정한다.

 

 

 

 


  • Java Resources에 src폴더 안에 org.controller와 org.model 패키지 만들기.

  • org.model안에 Person.java 파일 붙여넣기

 

  • Person.java

 

package org.model;

public class Person {

    private String name;

    private String id;

    private String paswword;

    private String job;

    private String[] notice;

    private String gender;

   

 

    public String getName() {

        return name;

    }

    public void setName(String name) {

        this.name = name;

    }

    public String getId() {

        return id;

    }

    public void setId(String id) {

        this.id = id;

    }

    public String getPaswword() {

        return paswword;

    }

    public void setPaswword(String paswword) {

        this.paswword = paswword;

    }

    public String getJob() {

        return job;

    }

    public void setJob(String job) {

        this.job = job;

    }

    public String[] getNotice() {

        return notice;

    }

    public void setNotice(String[] notice) {

        this.notice = notice;

    }

    public String getGender() {

        return gender;

    }

    public void setGender(String gender) {

        this.gender = gender;

    }

   

   

}

 


  • web.xml에 display name, servlet name,  servlet class, servlet mapping, url pattern 지정. servlet name을 doController라 선언. servlet class 경로를 CommonController로 지정. .go로 끝나는 파일들은 모두 이 web.xml을 거친다.

 

 


  • org.controller 패키지에 CommonController.java 클래스 파일 생성하기. HttpServlet을 extends해주고 doGet, doPost 오버라이딩하기. doGet에는 doPost(req,resp)을 써서 doPost로 가도록 경로를 잡아준다. 

  • if else문으로 adder2, bbs, person2 jsp 파일들의 출력 경로를 잡아준다.

 

package org.controller;

import java.io.IOException;

import javax.servlet.ServletException;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

public class CommonController extends HttpServlet{

    @Override

    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

        doPost(req, resp);

    }

    

    @Override

    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

        String requestURI=req.getRequestURI();

        String contextPath=req.getContextPath();

        String command=requestURI.substring(contextPath.length());

//      System.out.println("requestURI:"+requestURI);

//      System.out.println("command:"+command);

        if(command.equals("/adder.go")) {

            new AdderServlet().execute(req,resp);

        }else if(command.equals("/bbs.go")){

            new BbsServlet().execute(req,resp);

        }else if(command.equals("/person2.go")) {

            new PersonServlet().execute(req,resp);

        }

        

    }

}


 

 

  • org.controller에서 Action.java라는 인터페이스를 만든다. execute라는 메소드를 만든다. execute의 인자에는 req, resp가 들어가고 throws로 예외처리를 해준다. (CommonController의  인자와 예외처리 복사해서 붙여줌) CommonController를 거치는 jsp 파일들이 doGet으로 갈지 doPost로 갈지 모르기 때문에 execute 메소드를 대신 부르는 것이다.

  • Action.java

package org.controller;

import java.io.IOException;

import javax.servlet.ServletException;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

public interface Action {

    public void execute(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException;

}

 


 

  • Action.java 인터페이스 파일을 상속받는 AdderServlet.java파일을 생성한다. implements로 Action 상속받고 execute메소드를 오버라이딩한다.

  • AdderServlet.java

package org.controller;

import java.io.IOException;

import java.io.PrintWriter;

import javax.servlet.ServletException;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

public class AdderServlet implements Action{

    @Override

    public void execute(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

          req.setCharacterEncoding("utf-8");

          int num1 = Integer.parseInt(req.getParameter("num1"));

          int num2= Integer.parseInt(req.getParameter("num2"));

          int sum = num1+num2;

         

          resp.setContentType("text/html;charset=utf-8");

          PrintWriter out = resp.getWriter();

          out.println("<html>");

          out.println("<head><title>결과</title></head>");

          out.println("<body>");

          out.println("<body>");

          out.println("덧셈결과 :" + sum);

          out.println("</body>");

          out.println("</html>");

    }

}


 

  • bbs.jsp를 실행했을때 결과값을 얻기 위해서 위와 마찬가지로 BbsServlet.java파일을 생성한다. implements로 Action을 상속받고 execute메소드를 오버라이딩한다.

  • BbsServlet.java

 

package org.controller;

import java.io.IOException;

import java.io.PrintWriter;

import javax.servlet.ServletException;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

public class BbsServlet  implements Action{

    @Override

    public void execute(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

          req.setCharacterEncoding("utf-8");

          String name = req.getParameter("name");

          String title = req.getParameter("title");

          String content = req.getParameter("content");

         

          resp.setContentType("text/html;charset=utf-8");

          PrintWriter out = resp.getWriter();

          out.println("<html>");

          out.println("<head><title>결과</title></head>");

          out.println("<body>");

          out.println("이름:" + name+"<br>");

          out.println("제목:" + title+"<br>");

          out.println("내용:" + content+"<br>");

          out.println("</body>");

          out.println("</html>");

    }

}


 

 

  • personForm2.jsp도 마찬가지로 결과값을 얻기 위해 PersonServlet.java를 만들고 implements로 Action을 상속받고 execute메소드를 오버라이딩한다.

  • PersonServlet.java

 

package org.controller;

import java.io.IOException;

import java.io.PrintWriter;

import javax.servlet.RequestDispatcher;

import javax.servlet.ServletException;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import org.model.Person;

public class PersonServlet  implements Action{

    @Override

    public void execute(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

          req.setCharacterEncoding("utf-8");

          String name = req.getParameter("name");

          String id = req.getParameter("id");

          String gender = req.getParameter("gender");

          String[] notice = req.getParameterValues("notice");

          String job = req.getParameter("job");

         

          Person person = new Person();

          person.setGender(gender);

          person.setId(id);

          person.setJob(job);

          person.setName(name);

          person.setNotice(notice);

          

          req.setAttribute("p", person);

          RequestDispatcher rd = req.getRequestDispatcher("personResult2.jsp");

          rd.forward(req, resp);        

    }

}

 


  • web.xml에서 servlet처리 부분을 주석처리 한다면? CommonController랑 연결이 안됨. 이걸 대신할 수 있는 어노테이션은? CommonController.java에서 WebServlet을 어노테이션하고 ("*.go")을 부르면 됨

 

 

 

'Learning > JSP' 카테고리의 다른 글

로그인, 회원가입, 게시판 만들기 2  (0) 2020.07.30
로그인, 회원가입, 게시판 만들기 1  (0) 2020.07.29
서블릿으로 주소록 만들기  (0) 2020.07.28
JSTL  (0) 2020.07.27
서블릿  (0) 2020.07.27

 

  • 톰캣이 안잡힐때.. 해당 작업중인 Project 마우스 우클릭 properties에서 java build path에서 jre remove 후 add library해서 다시 넣어줌

 

 

 

 

 

 


 

  • insert.jsp: 주소록 입력 폼

 

 

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Insert title here</title>

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

<script>

$(document).ready(function(){

    $("#zipBtn").on("click",function(){

        window.open("zip.do","","width=700 height=400");

    })

})

</script>

</head>

<body>

<a href="list.do">전체보기</a>

<form action="insert.do" method="post" name="frm">

<table>

        <tr>

                <td colspan="2">주소록 등록하기</td>

        </tr>

        <tr>

                <td>이름</td>

                <td><input type="text" name="name"></td>

        </tr>

        <tr>

                <td>우편번호</td>

                <td><input type="text" name="zipcode" id="zipcode" size=7>

                        <input type="button" value="검색" id="zipBtn">

                </td>

        </tr>

        <tr>

                <td>주소</td>

                <td><input type="text" name="addr" id="addr" size=50></td>

        </tr>

        <tr>

                <td>전화번호</td>

                <td><input type="text" name="tel"></td>

        </tr>

        <tr>

        <td colspan="2">

                <input type="submit" value="등록">

                <input type="reset" value="취소">

        </td>

        </tr>

</table>

</form>

</body>

</html>


  • InsertAction.java: 주소록 등록 관련 서블릿

package com.address.action;

import java.io.IOException;

import javax.servlet.RequestDispatcher;

import javax.servlet.ServletException;

import javax.servlet.annotation.WebServlet;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import com.address.model.SAddressDAO;

import com.address.model.SAddressDTO;

/**

 * Servlet implementation class InsertAction

 */

@WebServlet("/address/insert.do")

public class InsertAction extends HttpServlet {

    private static final long serialVersionUID = 1L;

      

    /**

     * @see HttpServlet#HttpServlet()

     */

    public InsertAction() {

        super();

        // TODO Auto-generated constructor stub

    }

    /**

     * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)

     */

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        RequestDispatcher rd=request.getRequestDispatcher("insert.jsp");

        rd.forward(request, response);

    }

    /**

     * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)

     */

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        request.setCharacterEncoding("utf-8");

        SAddressDTO dto = new SAddressDTO();

        dto.setAddr(request.getParameter("addr"));

        dto.setName(request.getParameter("name"));

        dto.setTel(request.getParameter("tel"));

        dto.setZipcode(request.getParameter("zipcode"));

        SAddressDAO dao = SAddressDAO.getInstance();

        dao.insertAddress(dto);

        response.sendRedirect("list.do");

    }

}

 


 

  • list.jsp: 주소록 전체보기

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>   

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

</head>

<body>

<table>

<div align="right">

    <a href="insert.do">회원등록 </a>/주소록 개수: <span id="cntSpan">${count}</span>

</div>

    <thead>

        <tr>

            <td>번호</td>

            <td>이름</td>

            <td>주소</td>

            <td>전화번호</td>

        </tr>

    </thead>

    <tbody>

    <c:forEach items="${listArr}" var="address">

        <tr>

            <td>${address.num}</td>

            <td><a href="detail.do?num=${address.num}">${address.name }</a></td>

            <td>${address.addr}</td>

            <td>${address.tel}</td>

        </tr>

    </c:forEach>

    </tbody>

</table>

    <select name="field" id="field">

    <option value="name">이름</option>

    <option value="tel">전화</option>

    </select>

    <input type="text" name="word" id="word">

    <input type="button" value="검색" id="searchBtn">

    <script type="text/javascript">

        $("#searchBtn").click(function(){

            if($("#word").val()==""){

                alert("검색어를 입력하세요");

                $("#word").focus();

                return false;

            }

            $.getJSON("search.do",

                    {"field":$("#field").val(),

                     "word":$("#word").val()},

                    function(data){

                        var htmlStr="";

                        $.each(data.searchArr,function(key,val){

                            htmlStr+="<tr>";

                            htmlStr+="<td>"+val.num+"</td>";

                            htmlStr+="<td>"+val.name+"</td>";

                            htmlStr+="<td>"+val.addr+"</td>";

                            htmlStr+="<td>"+val.tel+"</td>";

                            htmlStr+="</tr>"

                        })//each

                        $("table tbody").html(htmlStr);

                        $("#cntSpan").text(data.searchCount.scount);

                    }//콜백함수

            )//getJSON

        })//searchBtn

    </script>

</body>

</html>

 


 

  • ListAction.java: 전체보기 서블릿 (list.jsp가 아니라 이 파일을 실행해야 함)

 

package com.address.action;

import java.io.IOException;

import java.util.ArrayList;

import javax.servlet.RequestDispatcher;

import javax.servlet.ServletException;

import javax.servlet.annotation.WebServlet;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import com.address.model.SAddressDAO;

import com.address.model.SAddressDTO;

/**

 * Servlet implementation class ListAction

 */

@WebServlet("/address/list.do")

public class ListAction extends HttpServlet {

    private static final long serialVersionUID = 1L;

      

    /**

     * @see HttpServlet#HttpServlet()

     */

    public ListAction() {

        super();

        // TODO Auto-generated constructor stub

    }

    /**

     * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)

     */

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        request.setCharacterEncoding("utf-8");

        SAddressDAO dao = SAddressDAO.getInstance();

        int count=dao.getCount();

        ArrayList<SAddressDTO> arr =dao.addressList();

        request.setAttribute("listArr", arr);

        request.setAttribute("count", count);

        

        RequestDispatcher rd = request.getRequestDispatcher("list.jsp");

        rd.forward(request, response);

    }

    /**

     * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)

     */

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        // TODO Auto-generated method stub

        doGet(request, response);

    }

}

 

 


 

  • detail.jsp: 주소록 상세보기 및 수정하기 폼

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

</head>

<body>

<form action="update.do" method="post" name="frm">

<input type="hidden" name="num" value="${dto.num}">

<table>

    <tr>

        <td colspan="2">주소록 수정하기</td>

    </tr>

    <tr>

        <td>이름</td>

        <td><input type="text" name="name"

        value="${dto.name}"></td>

    </tr>

    <tr>

        <td>우편번호 </td>

        <td><input type="text" name="zipcode" size=10

        value="${dto.zipcode}">

        <input type="button" name="search" value="검색" onclick="zipfinder()"></td>

    <tr>

        <td>주소

        <td><input type="text" name="addr" size=30

        value="${dto.addr}"></td>

    </tr>

    <tr>

        <td>전화번호</td>

        <td><input type="text" name="tel"

        value="${dto.tel}"></td>

    </tr>

    <tr>

        <td colspan="2">

        <input type="submit" value="수정" onclick="location.href='update.do?num=${dto.num}'">

        <input type="button" value="삭제" onclick="location.href='delete.do?num=${dto.num}'"> <!-- del()이라는 함수를 부른다. -->

        <input type="reset" value="취소">

        </td>

    </tr>

</table>

</form>

</body>

</html>

 


 

  • DetailAction.java 만들기: 패키지 우클릭-New-Servlet

 

 

  • DeatilAction - Next>

 

 

  • Edit... 클릭

 

 

  • url mappings를 /address/detail.do 로 설정. detail.do는 어디서 나온 것이냐? 

  • list.jsp에서 name에 링크를 걸고 클릭했을때 넘어가는 경로 이름.

 

 

 

  • 다시 Servlet 만드는 창으로 와서.. doPost, doGet등 만들기 원하는 부분에 체크

 

 

  • DetailAction.java에 자동으로 불러온 모습

 

package com.address.action;

import java.io.IOException;

import java.util.ArrayList;

import javax.servlet.RequestDispatcher;

import javax.servlet.ServletException;

import javax.servlet.annotation.WebServlet;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import com.address.model.SAddressDAO;

import com.address.model.SAddressDTO;

/**

 * Servlet implementation class DetailAction

 */

@WebServlet("/address/detail.do")

public class DetailAction extends HttpServlet {

    private static final long serialVersionUID = 1L;

      

    /**

     * @see HttpServlet#HttpServlet()

     */

    public DetailAction() {

        super();

        // TODO Auto-generated constructor stub

    }

    /**

     * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)

     */

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        request.setCharacterEncoding("utf-8");

        int num=Integer.parseInt(request.getParameter("num"));

        SAddressDAO dao = SAddressDAO.getInstance();

        SAddressDTO dto = dao.addressDetail(num);

        request.setAttribute("dto", dto);

        RequestDispatcher rd=request.getRequestDispatcher("detail.jsp");

        rd.forward(request, response);

    }

    /**

     * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)

     */

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        // TODO Auto-generated method stub

        doGet(request, response);

    }

}

 

 


 

  • 같은 방식으로 DeleteAction.java를 서블릿으로 생성. url mappings는 /address/delte.do

 

package com.address.action;

import java.io.IOException;

import javax.servlet.RequestDispatcher;

import javax.servlet.ServletException;

import javax.servlet.annotation.WebServlet;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import com.address.model.SAddressDAO;

/**

 * Servlet implementation class DeleteAction

 */

@WebServlet("/address/delete.do")

public class DeleteAction extends HttpServlet {

    private static final long serialVersionUID = 1L;

      

    /**

     * @see HttpServlet#HttpServlet()

     */

    public DeleteAction() {

        super();

        // TODO Auto-generated constructor stub

    }

    /**

     * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)

     */

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        request.setCharacterEncoding("utf-8");

        int num=Integer.parseInt(request.getParameter("num"));

        SAddressDAO dao=SAddressDAO.getInstance();

        dao.addressDelete(num);

        response.sendRedirect("list.do");

    }

    /**

     * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)

     */

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        doGet(request, response);

    }

}

  • 메소드: SAddressDAO의 addressDelete(num)

  • list.do를 호출하여 list.jsp로 

 


 

  • UpdateAction.java 서블릿 생성. url mappings는 /address/update.do

 

package com.address.action;

import java.io.IOException;

import javax.servlet.ServletException;

import javax.servlet.annotation.WebServlet;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import com.address.model.SAddressDAO;

import com.address.model.SAddressDTO;

/**

 * Servlet implementation class UpdateAction

 */

@WebServlet("/address/update.do")

public class UpdateAction extends HttpServlet {

    private static final long serialVersionUID = 1L;

      

    /**

     * @see HttpServlet#HttpServlet()

     */

    public UpdateAction() {

        super();

        // TODO Auto-generated constructor stub

    }

    /**

     * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)

     */

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        request.setCharacterEncoding("utf-8");

        SAddressDTO dto=new SAddressDTO();

        dto.setNum(Integer.parseInt(request.getParameter("num")));

        dto.setAddr(request.getParameter("addr"));

        dto.setName(request.getParameter("name"));

        dto.setTel(request.getParameter("tel"));

        dto.setZipcode(request.getParameter("zipcode"));

        

        SAddressDAO dao=SAddressDAO.getInstance();

        dao.addressUpdate(dto);

        response.sendRedirect("list.do");

    }

    /**

     * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)

     */

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        // TODO Auto-generated method stub

        doGet(request, response);

    }

}

 

 

  • 메소드: SAddressDAO의 addressUpdate(SAddressDTO dto)

 


 

  • 우편번호 검색하기. insert.jsp에 우편번호 검색 버튼에 id="zipBtn". 상단에 자바스크립트 불러오고 zipBtn을 눌렀을때 window.open으로 zip.do 불러오도록 하기

  • 서블릿으로 ZipAction.java 생성. url mappings는 /address/zip.do

 

package com.address.action;

import java.io.IOException;

import java.io.PrintWriter;

import java.util.ArrayList;

import javax.servlet.RequestDispatcher;

import javax.servlet.ServletException;

import javax.servlet.annotation.WebServlet;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import org.json.simple.JSONArray;

import org.json.simple.JSONObject;

import com.address.model.SAddressDAO;

import com.address.model.ZipcodeDTO;

/**

 * Servlet implementation class ZipAction

 */

@WebServlet("/address/zip.do")

public class ZipAction extends HttpServlet {

    private static final long serialVersionUID = 1L;

      

    /**

     * @see HttpServlet#HttpServlet()

     */

    public ZipAction() {

        super();

        // TODO Auto-generated constructor stub

    }

    /**

     * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)

     */

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

//      response.sendRedirect("zipCheck.jsp");

        RequestDispatcher rd=request.getRequestDispatcher("zipCheck.jsp");

        rd.forward(request, response);

    }

    /**

     * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)

     */

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        request.setCharacterEncoding("utf-8");

        String dong=request.getParameter("dong");

        SAddressDAO dao=SAddressDAO.getInstance();

        ArrayList<ZipcodeDTO>arr=dao.zipSearch(dong);

        

        JSONObject mainObj=new JSONObject();

        JSONArray jarr=new JSONArray();

        

        for (ZipcodeDTO zip:arr) {

            JSONObject obj=new JSONObject();

            obj.put("zipcode", zip.getZipcode());

            obj.put("sido", zip.getSido());

            obj.put("gugun", zip.getGugun());

            obj.put("dong",zip.getDong());

            obj.put("bunji",zip.getBunji());

            jarr.add(obj);

        }

        mainObj.put("jarr",jarr);

        response.setContentType("text/html;charset=utf-8");

        PrintWriter out=response.getWriter();

        out.println(mainObj.toString());

    }

}

 

  • doGet에서 zipCheck.jsp를 디스패처로 호출

  • zipCheck.jsp: 검색 버튼 id는 send라 명명. 제이슨 형식으로 zip.do 부르기

 

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

<script>

$(document).ready(function(){

    $("#send").click(function(){

        if($("#dong").val()==""){

            alert("동이름을 입력하세요");

            $("#dong").focus();

            return false;

        }

        $.post("zip.do",{"dong":$("#dong").val()},

            function(data){

                data=JSON.parse(data); //파싱

                var htmlStr="";

                htmlStr+="<table>";

                for(var i=0;i<data.jarr.length;i++){

                    htmlStr+="<tr>";

                    htmlStr+="<td>"+data.jarr[i].zipcode+"</td>";

                    htmlStr+="<td>"+data.jarr[i].sido+"</td>";

                    htmlStr+="<td>"+data.jarr[i].gugun+"</td>";

                    htmlStr+="<td>"+data.jarr[i].dong+"</td>";

                    htmlStr+="<td>"+data.jarr[i].bunji+"</td>";

                    htmlStr+="</tr>";

                }

                htmlStr+="</table>";

                $("#area").html(htmlStr);

            }   

        );//post

    }) //send

    

    $("#area").on("click","tr",function(){

        var address = $("td:eq(1)",this).text()+" " +

                      $("td:eq(2)",this).text()+" " +

                      $("td:eq(3)",this).text()+" " +

                      $("td:eq(4)",this).text();

        $(opener.document).find("#zipcode").val($("td:eq(0)",this).text());

        $(opener.document).find("#addr").val(address);

        self.close();

    }); //area

    

}) //document

</script>

</head>

<body>

<table>

    <tr>

        <td> 동이름입력: <input type="text" name="dong" id="dong">

        <input type="button" value="검색" id="send">

        </td>

    </tr>

</table>

<div id="area"></div>

</body>

</html>

 

  • 메소드: SAddressDAO의 zipSearch


  • 주소 bunji 부분에 null 값이 나오는게 싫다면

  • 이클립스 메뉴 window-preference-java-code style-code templates-getter body-edit

  • return ${field}==null?"":${field}.trim(); 으로 고쳐줌

 

 

 


 

  • json-simple-1.1.1.jar파일을 lib에 넣는다.

  • 자바스크립트가 인식할 수 있는 코드로 바꿔주기위해 필요함

 

 

 


 

  • 검색 SearchAction.java

 

package com.address.action;

import java.io.IOException;

import java.io.PrintWriter;

import java.util.ArrayList;

import javax.servlet.ServletException;

import javax.servlet.annotation.WebServlet;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import org.json.simple.JSONArray;

import org.json.simple.JSONObject;

import com.address.model.SAddressDAO;

import com.address.model.SAddressDTO;

/**

 * Servlet implementation class SearchAction

 */

@WebServlet("/address/search.do")

public class SearchAction extends HttpServlet {

    private static final long serialVersionUID = 1L;

      

    /**

     * @see HttpServlet#HttpServlet()

     */

    public SearchAction() {

        super();

        // TODO Auto-generated constructor stub

    }

    /**

     * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)

     */

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

            request.setCharacterEncoding("utf-8");

            String field=request.getParameter("field");

            String word=request.getParameter("word");

            SAddressDAO dao=SAddressDAO.getInstance();

            ArrayList<SAddressDTO> arr=dao.addressSearch(field, word);

            int count=dao.searchCount(field,word);

            

            JSONObject mainObj=new JSONObject();

            JSONArray jarr=new JSONArray();

            for(SAddressDTO dto:arr) {

                JSONObject obj=new JSONObject();

                obj.put("num", dto.getNum());

                obj.put("name", dto.getName());

                obj.put("addr", dto.getAddr());

                obj.put("tel", dto.getTel());

                obj.put("zipcode", dto.getZipcode());

                jarr.add(obj);

            }

            JSONObject objCount=new JSONObject();

            objCount.put("scount", count);

            

            mainObj.put("searchArr", jarr);

            mainObj.put("searchCount", objCount);

            response.setContentType("text/html;charset=utf-8");

            PrintWriter out=response.getWriter();

            out.println(mainObj.toString());

    }

    /**

     * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)

     */

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        // TODO Auto-generated method stub

        doGet(request, response);

    }

}


 

  • SAddressDAO.java

 

package com.address.model;

import java.sql.Connection;

import java.sql.PreparedStatement;

import java.sql.ResultSet;

import java.sql.SQLException;

import java.sql.Statement;

import java.util.ArrayList;

import javax.naming.Context;

import javax.naming.InitialContext;

import javax.sql.DataSource;

public class SAddressDAO {

    private static SAddressDAO instance = new SAddressDAO();

    public static SAddressDAO getInstance() {

        return instance;

    }

    //디비연결

    private Connection getConnection() throws Exception {

        Context initCtx = new InitialContext();

        Context envCtx = (Context) initCtx.lookup("java:comp/env");

        DataSource ds = (DataSource) envCtx.lookup("jdbc/member");

        return ds.getConnection();

    }

    //추가

    public void insertAddress(SAddressDTO ad) {

        Connection con = null;

        PreparedStatement ps = null;

        try {

            con = getConnection();

            String sql = "insert into address "

            + "values(address_seq.nextval,?,?,?,?)";

            ps = con.prepareStatement(sql);

            ps.setString(1, ad.getName());

            ps.setString(2, ad.getZipcode());

            ps.setString(3, ad.getAddr());

            ps.setString(4, ad.getTel());

            ps.executeUpdate();

        } catch (Exception e) {

            e.printStackTrace();

        } finally {

            closeConnection(con, ps);

        }

    }

    //상세보기

    public SAddressDTO addressDetail(int num) {

        Connection con = null;

        Statement st = null;

        ResultSet rs = null;

        SAddressDTO dto=null;

        try {

            con=getConnection();

            st=con.createStatement();

            String sql="select * from address where num="+num;

            rs=st.executeQuery(sql);

            if(rs.next()) {

                dto=new SAddressDTO();

                dto.setNum(rs.getInt("num"));

                dto.setAddr(rs.getString("addr"));

                dto.setName(rs.getString("name"));

                dto.setNum(rs.getLong("num"));

                dto.setTel(rs.getString("tel"));

                dto.setZipcode(rs.getString("zipcode"));

            }

        } catch (Exception e) {

            e.printStackTrace();

        } finally {

            closeConnection(con, st, rs);

        }

        return dto;

    }

    

    //전체보기

    public ArrayList<SAddressDTO> addressList(){

            Connection con = null;

            Statement st = null;

            ResultSet rs = null;

            ArrayList<SAddressDTO> arr = new ArrayList<>();

            try {

                con = getConnection();

                String  sql ="select * from address";

                st = con.createStatement();

                rs = st.executeQuery(sql);

                while(rs.next()) {

                    SAddressDTO ad= new SAddressDTO();

                    ad.setAddr(rs.getString("addr"));

                    ad.setName(rs.getString("name"));

                    ad.setNum(rs.getLong("num"));

                    ad.setTel(rs.getString("tel"));

                    ad.setZipcode(rs.getString("zipcode"));

                    arr.add(ad);

                }

            } catch (Exception e) {

                    e.printStackTrace();

            }finally {

                closeConnection(con, st, rs);

            }

            return arr;

        }

    

    //삭제하기

    public void addressDelete(int num) {

        Connection con=null;

        Statement st=null;

        

        try {

            con=getConnection();

            st=con.createStatement();

            String sql="delete from address where num="+num;

            st.executeUpdate(sql);

        } catch (Exception e) {

            e.printStackTrace();

        } finally {

            closeConnection(con, st, null);

        }

    }

    

    //수정하기

    public SAddressDTO addressUpdate(SAddressDTO dto) {

        Connection con=null;

        PreparedStatement ps=null;

        

        try {

            con=getConnection();

            String sql="update address set name=?, zipcode=?, tel=?, addr=? where num=?";

            ps=con.prepareStatement(sql);

            ps.setString(1, dto.getName());

            ps.setString(2, dto.getZipcode());

            ps.setString(3, dto.getTel());

            ps.setString(4, dto.getAddr());

            ps.setLong(5, dto.getNum());

            ps.executeUpdate();

        }catch (Exception e){

            e.printStackTrace();

        }finally {

            closeConnection(con, ps);

        }

        return dto;

    }

    

    //개수출력

    public int getCount() {

        Connection con=null;

        Statement st=null;

        ResultSet rs=null;

        int count=0;

        

        try {

            con=getConnection();

            String sql="select count(*) from address";

            st=con.createStatement();

            rs=st.executeQuery(sql);

            if(rs.next()) {

                count=rs.getInt(1);

            }

        } catch (Exception e) {

            e.printStackTrace();

        }

        return count;

    }

    

    //검색 개수출력

    public int searchCount(String field, String word) {

        Connection con=null;

        Statement st=null;

        ResultSet rs=null;

        int count=0;

        

        try {

            con=getConnection();

            String sql="select count(*) from address where "+field+" like '%"+word+"%'";

            st=con.createStatement();

            rs=st.executeQuery(sql);

            if(rs.next()) {

                count=rs.getInt(1);

            }

        } catch (Exception e) {

            e.printStackTrace();

        } finally {

            closeConnection(con, st, rs);

        }

        return count;

    }

    

    //우편번호 검색

    public ArrayList<ZipcodeDTO> zipSearch(String dong){

        Connection con = null;

        Statement st = null;

        ResultSet rs = null;

        ArrayList<ZipcodeDTO> arr = new ArrayList<>();

        try {

            con = getConnection();

            String  sql ="select * from zipcode where dong like '%"+dong+"%'";

            st = con.createStatement();

            rs = st.executeQuery(sql);

            while(rs.next()) {

                ZipcodeDTO zip= new ZipcodeDTO();

                zip.setBunji(rs.getString("bunji"));

                zip.setDong(rs.getString("dong"));

                zip.setGugun(rs.getString("gugun"));

                zip.setSido(rs.getString("sido"));

                zip.setZipcode(rs.getString("zipcode"));

                arr.add(zip);

            }

        } catch (Exception e) {

                e.printStackTrace();

        }finally {

            closeConnection(con, st, rs);

        }

        return arr;

    }

    

    //검색

    public ArrayList<SAddressDTO > addressSearch(String field, String word) {

        Connection con=null;

        Statement st=null;

        ResultSet rs=null;

        ArrayList<SAddressDTO> arr=new ArrayList<SAddressDTO>();

        try {

            con=getConnection();

            String sql="select * from address where "+field+" like '%"+word+"%'";

            st=con.createStatement();

            rs=st.executeQuery(sql);

            while(rs.next()) {

                SAddressDTO sd=new SAddressDTO();

                sd.setNum(rs.getInt("num"));

                sd.setName(rs.getString("name"));

                sd.setAddr(rs.getString("addr"));

                sd.setTel(rs.getString("tel"));

                sd.setZipcode(rs.getString("zipcode"));

                arr.add(sd);

            }

        } catch (Exception e) {

            e.printStackTrace();

        } finally {

            closeConnection(con, st, rs);

        }

        return arr;

    }

    

    //닫기

    private void closeConnection(Connection con, PreparedStatement ps) {

        try {

            if (ps != null)

                ps.close();

            if (con != null)

                con.close();

        } catch (SQLException e) {

            e.printStackTrace();

        }

    }

    private void closeConnection(Connection con, Statement st, ResultSet rs) {

        try {

            if (rs != null)

                rs.close();

            if (st != null)

                st.close();

            if (con != null)

                con.close();

        } catch (SQLException e) {

            e.printStackTrace();

        }

    }

}




 

  •  SAddressDTO.java

 

package com.address.model;

public class SAddressDTO {

    private long num;

    private String name;

    private String zipcode;

    private String tel;

    private String addr;

    public long getNum() {

        return num;

    }

    public void setNum(long num) {

        this.num = num;

    }

    public String getName() {

        return name;

    }

    public void setName(String name) {

        this.name = name;

    }

    public String getZipcode() {

        return zipcode;

    }

    public void setZipcode(String zipcode) {

        this.zipcode = zipcode;

    }

    public String getTel() {

        return tel;

    }

    public void setTel(String tel) {

        this.tel = tel;

    }

    public String getAddr() {

        return addr;

    }

    public void setAddr(String addr) {

        this.addr = addr;

    }

    

    

}

 


 

  • ZipcodeDTO.java

 

package com.address.model;

public class ZipcodeDTO {

    private String zipcode;

    private String sido;

    private String gugun;

    private String dong;

    private String bunji;

    private int seq;

    public String getZipcode() {

        return zipcode == null ? "" : zipcode.trim();

    }

    public void setZipcode(String zipcode) {

        this.zipcode = zipcode;

    }

    public String getSido() {

        return sido == null ? "" : sido.trim();

    }

    public void setSido(String sido) {

        this.sido = sido;

    }

    public String getGugun() {

        return gugun == null ? "" : gugun.trim();

    }

    public void setGugun(String gugun) {

        this.gugun = gugun;

    }

    public String getDong() {

        return dong == null ? "" : dong.trim();

    }

    public void setDong(String dong) {

        this.dong = dong;

    }

    public String getBunji() {

        return bunji == null ? "" : bunji.trim();

    }

    public void setBunji(String bunji) {

        this.bunji = bunji;

    }

    public void setSeq(int seq) {

        this.seq = seq;

    }

}

 

'Learning > JSP' 카테고리의 다른 글

로그인, 회원가입, 게시판 만들기 1  (0) 2020.07.29
서블릿: 출력경로 통일하기  (0) 2020.07.29
JSTL  (0) 2020.07.27
서블릿  (0) 2020.07.27
게시판 2  (0) 2020.07.23
  • WebContent에 jstl이라는 폴더 만들고 adder.jsp 복사 붙여넣기. action에 addResult_jstl 로 변경

  • jstl 라이브러리 다운받기

https://mvnrepository.com/artifact/javax.servlet/jstl/1.2 에서 jar 파일 다운로드, WEB-INF에 넣기

 

 

 

 

 


 

  • adder.jsp

 

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

</head>

<body>

<form action="addResult_jstl.jsp">

첫번째 수 : <input type="text" name="num1"><br>

두번째 수 : <input type="text" name="num2"><br>

<input type="submit" value="더하기">

</form>

</body>

</html>

  • addResult_jstl.jsp

 

  • set: 변수 지정 키워드

  • choose & when: 조건문

 

 

 

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

</head>

<body>

    첫번째: ${param.num1}<br/>

    첫번째: ${param.num2}<br/>

    <hr/>

    결과: ${param.num1+param.num2}<br/>

    <c:set var="no" value="${param.num1}"/>

    no: ${no }

    <hr/>

    <c:choose>

    <c:when test="${no mod 2==0}">

        짝수

    </c:when>

    <c:otherwise>

        홀수

    </c:otherwise>

    </c:choose>

    <hr>

    

    <c:if test="${no%2==0 }">

        짝수

    </c:if>

    <c:if test="${no%2!=0 }">

        홀수

    </c:if>

</body>

</html>

 


 

  • color.jsp

 

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

</head>

<body>

<form action="colorResult.jsp">

ID:<input type="text" name="id"><br>

Color:

<select name="color">

    <option value="yellow">노랑</option>

    <option value="blue">blue</option>

    <option value="orange">orange</option>

    <option value="pink">pink</option>  

</select>

<input type="submit" value="보내기">

</form>

</body>

</html>

 


  • colorResult.jsp:출력값 (choose를 써야 when을 쓸 수 있음)

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

</head>

<body>

    <c:if test="${param.id!=null}">

        <c:set var="id" value="${param.id }"/>

    </c:if>

    <c:if test="${param.id==null || param.id==''}">

        <c:set var="id" value="GUEST"/>

    </c:if>

    color:${param.color} <br>

    <c:choose>

    <c:when test="${param.color=='yellow'}">

        <c:set var="c" value="노랑"/>

    </c:when>

    <c:when test="${param.color=='blue'}">

        <c:set var="c" value="파랑"/>

    </c:when>

    <c:when test="${param.color=='pink'}">

        <c:set var="c" value="분홍"/>

    </c:when>

    <c:when test="${param.color=='orange'}">

        <c:set var="c" value="주황"/>

    </c:when>

    </c:choose>

    ${id}님이 좋아하는 색깔은

    <span style="background-color: ${param.color}">${c}</span>입니다.

</body>

</html>

 


 

 

 

'Learning > JSP' 카테고리의 다른 글

서블릿: 출력경로 통일하기  (0) 2020.07.29
서블릿으로 주소록 만들기  (0) 2020.07.28
서블릿  (0) 2020.07.27
게시판 2  (0) 2020.07.23
게시판 1  (0) 2020.07.22

Dynamic Web Project-FirstSevlet

Next> 누르다가 체크

 

기존 프로젝트의 META-INF에 있는 context.xml 파일을 복사해서 붙여넣기

 

 


 

  • exam이라는 폴더를 만들고 adder라고 하는 jsp만들기. addResult.jsp를 하나더 만들어서 입력한 num1과 num2의 덧셈결과 뽑기.

 

  • adder.jsp: 숫자 덧셈 폼

 

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

</head>

<body>

<form action="addResult.jsp">

첫번째 수 : <input type="text" name="num1"><br>

두번째 수 : <input type="text" name="num2"><br>

<input type="submit" value="더하기">

</form>

</body>

</html>

  • addResult.jsp: 덧셈결과 로직

 

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<%

    request.setCharacterEncoding("utf-8");

    int num1=Integer.parseInt(request.getParameter("num1"));

    int num2=Integer.parseInt(request.getParameter("num2"));

    int result=num1+num2;

%>

</head>

<body>

    덧셈결과: <%=result%><br>

    뺄셈결과: <%=num1-num2 %><br>

</body>

</html>

 

  • adder2.jsp 만들고 form action="adder" 라고 바꾸기. adder를 어떻게 찾을까? 

 

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

</head>

<body>

<form action="adder">

첫번째 수 : <input type="text" name="num1"><br>

두번째 수 : <input type="text" name="num2"><br>

<input type="submit" value="더하기">

</form>

</body>

</html>

 

  • FirstServlet의 WEB-INF 폴더에 있는 web.xml 파일을 다음과 같이 수정하기

<?xml version="1.0" encoding="UTF-8"?>

<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd" id="WebApp_ID" version="4.0">

  <display-name>FirstServlet</display-name>

  <!-- adder -->

  <servlet>

      <servlet-name>adder-servlet</servlet-name>

      <servlet-class>com.exam.action.AdderServlet</servlet-class>

  </servlet>

  <servlet-mapping>

      <servlet-name>adder-servlet</servlet-name>

      <url-pattern>/exam/adder</url-pattern>

  </servlet-mapping>

  <welcome-file-list>

    <welcome-file>index.html</welcome-file>

    <welcome-file>index.htm</welcome-file>

    <welcome-file>index.jsp</welcome-file>

    <welcome-file>default.html</welcome-file>

    <welcome-file>default.htm</welcome-file>

    <welcome-file>default.jsp</welcome-file>

  </welcome-file-list>

</web-app>

 

  • java 패키지 com.exam.action 생성 후 AdderServlet.java 만들기

package com.exam.action;

import java.io.IOException;

import java.io.PrintWriter;

import javax.servlet.ServletException;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

public class AdderServlet extends HttpServlet{

    @Override

    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

        req.setCharacterEncoding("utf-8");

        int num1=Integer.parseInt(req.getParameter("num1"));

        int num2=Integer.parseInt(req.getParameter("num2"));

        int sum=num1+num2;

        resp.setContentType("text/html;charset=utf-8");

        PrintWriter out=resp.getWriter(); //출력객체

        out.println("<html>");

        out.println("<head><title>결과</title></head>");

        out.println("<body>");

        out.println("덧셈결과:"+sum);

        out.println("</body>");

        out.println("</html>");

    }

}

  • adder2.jsp에서 jsp는 더이상 필요없고 자바 파일인 AdderServlet이 덧셈을 수행한다. 

 

 

 


 

  • bbs.jsp: 메모 작성 폼 (작성자, 제목, 내용)

 

 

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

</head>

<body>

<form action="bbs.do" method="post">

이름: <input type="text" name="name"><br>

제목: <input type="text" name="title"><br>

내용: <br>

<textarea rows="5" cols="20" name="content"></textarea>

<input type="submit" value="전송">

</form>

</body>

</html>


 

  • web.xml

 

<?xml version="1.0" encoding="UTF-8"?>

<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd" id="WebApp_ID" version="4.0">

  <display-name>FirstServlet</display-name>

  <!-- bbs -->

  <servlet>

    <servlet-name>bbs-servlet</servlet-name>

      <servlet-class>com.exam.action.BbsServlet</servlet-class>

  </servlet>

  <servlet-mapping>

    <servlet-name>bbs-servlet</servlet-name>

    <url-pattern>/exam/bbs.do</url-pattern>

  </servlet-mapping>

 

  <!-- adder -->

  <servlet>

    <servlet-name>adder-servlet</servlet-name>

    <servlet-class>com.exam.action.AdderServlet</servlet-class>

  </servlet>

  <servlet-mapping>

    <servlet-name>adder-servlet</servlet-name>

    <url-pattern>/exam/adder</url-pattern>

  </servlet-mapping>

  <welcome-file-list>

    <welcome-file>index.html</welcome-file>

    <welcome-file>index.htm</welcome-file>

    <welcome-file>index.jsp</welcome-file>

    <welcome-file>default.html</welcome-file>

    <welcome-file>default.htm</welcome-file>

    <welcome-file>default.jsp</welcome-file>

  </welcome-file-list>

</web-app>

 


 

  • BbsServlet.java: 결과값 출력

 

 

package com.exam.action;

import java.io.IOException;

import java.io.PrintWriter;

import javax.servlet.ServletException;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

public class BbsServlet extends HttpServlet{

    @Override

    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

        req.setCharacterEncoding("utf-8");

        String name=req.getParameter("name");

        String title=req.getParameter("title");

        String content=req.getParameter("content");

        resp.setContentType("text/html;charset=utf-8");

        PrintWriter out=resp.getWriter();

        out.println("<html>");

        out.println("<head><title></title></head>");

        out.println("<body>");

        out.println("작성자: "+name+"<br>");

        out.println("제목: "+title+"<br>");

        out.println("내용: "+content+"<br>");

        out.println("</body>");

        out.println("</html>");

    }

}

 

 

 

 

'Learning > JSP' 카테고리의 다른 글

서블릿으로 주소록 만들기  (0) 2020.07.28
JSTL  (0) 2020.07.27
게시판 2  (0) 2020.07.23
게시판 1  (0) 2020.07.22
회원가입2  (0) 2020.07.22

 

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>맛보기 예제</title>

</head>

<body>

    <script>

        var age = prompt("당신의 나이는?", "0");

        if(age >= 20){

            document.write("당신은 성인입니다.");

        }else{

            document.write("당신은 미성년자입니다.");

        }

    </script>

</body>

</html>

 

 

 


 

 

<!DOCTYPE html>

<html lang="ko">

<head>

    <meta charset="UTF-8">

    <title>선언문</title>

    <script src="js/example.js"></script>

    <script>

        document.write("선언문");

    </script>

</head>

<body>

</body>

</html>

 

 

 

 


 

<!DOCTYPE html>

<html lang="ko">

<head>

    <meta charset="UTF-8">

    <title> 외부 자바스크립트 연동 </title>

    <script>

        var box;

        box=100;

        box=30;

        document.write(box, "<br>");

        var a="javascript";

        document.write(a, "<br>");

        var str="자바스크립트";

        var num=100;

        document.write(typeof num, "<br>");

        document.write(typeof str);

    </script>

</head>

<body>

</body>

</html>

 

 

 


 

<!DOCTYPE html>

<html lang="ko">

<head>

    <meta charset="UTF-8">

    <title> 산술 연산자 </title>

    <script>

        var num1 = 15;

        var num2 = 2;

        var result;

        result=num1+num2;

        document.write(result, "<br>");

        result=num1*num2;

        document.write(result, "<br>");

        result=num1/num2;

        document.write(result, "<br>");

        result=num1%num2;

        document.write(result, "<br>");

        var t1="학교종이";

        var t2="땡땡땡";

        result=t1+t2;

        document.write(result, "<br>");

        

        var num1=10;

        var num2=3;

        num1+=num2;

        document.write(num1);

    </script>

</head>

<body>

</body>

</html>

 

 


 

 

<!DOCTYPE html>

<html lang="ko">

<head>

<meta charset="UTF-8">

<title> 복합대입 연산자-테이블 만들기 </title>

<script>

    var str="<table border='1'>";

        str+="<tr>"

        str+="<td>1</td><td>2</td><td>3</td>";

        str+="</tr>"

        str+="</table>"

    document.write(str);

</script>

</head>

<body>

</body>

</html>

 

 

 


 

 

<!DOCTYPE html>

<html lang="ko">

<head>

    <meta charset="UTF-8">

    <title> 비교 연산자 </title>

    <script>

        var a = 10;

        var b = 20;

        var c = 10;

        var f = "20";

        var result;

        

        result=a>b;

        document.write(result,"<br>");

        result=a<=b;

        document.write(result,"<br>");

        result=a!=b;

        document.write(result,"<br>");

        result=b===f;

        document.write(result,"<br>");

    </script>

</head>

<body>

</body>

</html>

 

스크립트에서 '같다'표시는 === 이다.

 

 

 

 


<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> 삼항 조건 연산자 </title>
<script>
	var a = 10;
	var b = 3;
	//var result;

	var result=a>b? "자바스크립트":"hello";
	document.write(result,"<br>");
</script>
</head>
<body>
</body>
</html>


 

 

<!DOCTYPE html>

<html lang="ko">

<head>

<meta charset="UTF-8">

<title> 적정 몸무게 구하기 </title>

<script>

    var name=prompt("이름:","");

    var weight=prompt("몸무게:","0");

    var height=prompt("키:","0");



    var normal_w=(height-100)*0.9;

    var result=weight>=normal_w-5 && weight<=normal_w+5;

    result=result? "적정체중":"적정체중이 아닙니다.";

    document.write(name+"님은 "+result);

</script>

</head>

<body>

</body>

</html>

 

 

 

 

 


<!DOCTYPE html>

<html lang="ko">

<head>

<meta charset="UTF-8">

<title> 종합실습1-1 </title>

<script>

    var price1 = 3000;

    var price2 = 6000;

    var price3 = 3000;



    var total=price1+price2+price3;

    

    total=total>10000? total-10000+"원 초과":"관리잘함";

    document.write(total);

</script>

</head>

<body>

</body>

</html>

 


 

'Learning > HTML&JavaScript' 카테고리의 다른 글

자바스크립트 객체  (0) 2020.07.31
자바스크립트 제어문  (0) 2020.07.31
CSS3 선택자  (0) 2020.07.24
HTML 멀티미디어  (0) 2020.07.24
HTML5 시멘틱 태그  (0) 2020.07.24

 

<!doctype html>

<html lang="ko">

<head>

<meta charset="utf-8">

<title>속성 선택자</title>

<style>

    ul{

        list-style-type: none;

    }

    li{

        width: 120px;

        display: inline-block;

        margin: 10px;

    }

    li a{

        padding: 5px 10px;

        font-size: 14px;

        color: blue;

        text-decoration: none;

    }

    a[href]{

        background-color: yellow;

    }

</style>

</head>



<body>

    <ul>

        <li><a>메인 메뉴 : </a></li>

        <li><a href="#">메뉴 1</a></li>

        <li><a href="#">메뉴 2</a></li>

        <li><a href="#">메뉴 3</a></li>

        <li><a href="#">메뉴 4</a></li>

    </ul>

  </body>

 </html>



 

 


 

<!doctype html>

<html lang="ko">

  <head>

        <meta charset="utf-8">

    <title> 가상 클래스 </title>

    <style>

            body {

                background-color:#fff; 

            }

            form fieldset{

                margin-bottom:25px; 

            }    

            form legend{

                font-size:15px;

                font-weight:600; 

            }

            input:disabled{

                background: #ccc;

                border: 1px #ddd solid;

            }

            input:checked+span{

                color: blue;

            }

            

        </style>

  </head>

  <body>

        <form>

            <fieldset>

                <legend>사용자 정보</legend>

                <label>이름 <input type="text" disabled></label>

            </fieldset>

            <fieldset>

                <legend>신청 과목</legend>

                <p>이 달에 신청할 과목을 선택하세요</p>

                <label><input type="radio" name="subject" value="speaking"><span>회화</span></label>

                <label><input type="radio" name="subject" value="grammar"><span>문법</span></label>

                <label><input type="radio" name="subject" value="writing"><span>작문</span></label> 

            </fieldset>     

        </form>

  </body>

</html>



 


 

<!DOCTYPE HTML>

<html lang="ko">

<head>

  <meta charset="utf-8">

  <title>CSS 선택자</title>  

  <style>

    .top-img:hover{

      border: 4px solid black;

    }

  </style>

</head>

<body>

  <p>이미지 위로 마우스 포인터를 올려보세요</p>

  <img src="images/tangerines.jpg" class="top-img">

</body>

</html>

 

 

 

'Learning > HTML&JavaScript' 카테고리의 다른 글

자바스크립트 제어문  (0) 2020.07.31
자바스크립트  (0) 2020.07.24
HTML 멀티미디어  (0) 2020.07.24
HTML5 시멘틱 태그  (0) 2020.07.24
CSS 레이아웃  (0) 2020.07.21
  • 비디오

 

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

<body>

    <h1>SUMMER BEACH</h1>

    <video width="400" height="220" controls autoplay>

        <source src="media/Beach.mp4" type="video/mp4">

        <source src="media/Beach.webm" type="video/webm">

    </video>

</body>

</html>

 


 

  • 오디오

 

 

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>멀티미디어 재생</title>

    <style>

        #con{

            width: 600px;

            margin: 0 auto;

            padding: 20px;

        }

    </style>

</head>

<body>

    <div id="con">

        <h1>오디오 재생하기</h1>

        <audio src="media/bgsound2.mp3" controls>

        </audio>

    </div>

</body>

</html>

 

 

 

'Learning > HTML&JavaScript' 카테고리의 다른 글

자바스크립트  (0) 2020.07.24
CSS3 선택자  (0) 2020.07.24
HTML5 시멘틱 태그  (0) 2020.07.24
CSS 레이아웃  (0) 2020.07.21
CSS와 박스 모델  (0) 2020.07.21
  • <header>: 머리말

  • <nav>: 네비게이션 링크

  • <section>: 주제별 콘텐츠 영역

  • <article>: 콘텐츠 내용

  • <aside>: 본문 이외의 내용

  • <iframe>: 외부 문서 삽입

  • <footer>: 제작 정보와 저작권 정보

  • <address>: 제작자 정보와 연락처 정보

 

 


 

<!doctype html>

<html lang="ko">

<head>

<meta charset="utf-8">

<title>요안도라</title>



<link href="css/style3.css" rel="stylesheet" type="text/css"><!--[if lt IE 9]>

<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

<![endif]-->

</head>



<body>

    <div class="container">

    <header>

        <h1>Joandora</h1>

        <h2>가장 제주다운 수산리집</h2>

    </header>

    <nav class="navi">

        <ul>

            <li><a href="#">이용 안내</a></li>

            <li><a href="#">객실 소개</a></li>

            <li><a href="#">예약 방법</a></li>

            <li><a href="#">예약 하기</a></li>

        </ul>

    </nav>

    <section class="content">

        <h2>요안도라 소개</h2>    

        <h3>¤ 요안도라는 게스트 하우스(Guest House) 형식의 농어촌 민박입니다</h3>

        <p>성산의 날씨는 다음주 내내 높은 구름에 햇살 가득이라고 합니다. 목요일이면 섭씨 27도까지 오른다고 하지만, 늘 부는 바람이 쾌적한 균형을 잡아 마당에 마당에 나가 앉아 있는 시간이 많아질듯 합니다.</p>

        <p>오늘은 사진에 보이는 긴 돌담을 따라 들어오는 요안도레 올레 입구에 특곤색의 대문을 달았습니다.</p>

        <p>내일은 두달 여동안 밖거리에 만든 데스트 하우스에 연백색의 황토 페인트를 칠할 예정입니다.<br>

        그리고 이것저것 사소한 저이를 마치고 나면, 나이 드시고 젊고 한 미지의 새식구들을 설렘으로 만나고 함께하고, 도시의 바븐 생활로 소원해진 오래된 친구와의 우정을 이 제주에서 새롭게 열어나가기 위해 요안도라를 세상에 알리려고 합니다.</p>

        <img src="images/banner2.png" width="700" height="233" alt="요안도라">

    </section>

    <aside class="sidebar">

        <h3>¤ 알립니다</h3>

        <p>게스트하우스 예약은 전화 070-###-#### 로 직접 통화하시는게 가장 정확하고 빠릅니다.

        인터넷 전화이므로 시외 전화 요금이 부과되지 않습니다. </p>

        <img src="images/2.jpg" alt="">

        <img src="images/1.jpg" alt="">

        <img src="images/4.jpg" alt="">

    </aside>

    <footer>

        <address>

            <p>제주특별자치도 남제주군 성산읍 수산리 000 번지 요안도라 </p>

            <p>yoan##@naver.com</p>

        </address>

            <p> Copyright ⓒ. All rights reserved.</p>      

    </footer>

    </div>

</body>

</html>

 

@charset "utf-8";

body {
	font: 14px 맑은 고딕;
}
.container {
	position:absolute;
	width: 960px;
	margin : 0 auto;
	background-color:#fff;
	border:1px solid #E7E7E7
}
header {
	position:relative;
	height: 280px;
	background-image: url('../images/bg.png');
	background-repeat: no-repeat;
	background-position: left top;
}
header h1{
	position:absolute;
	right:20px;
	bottom:70px;
	font-size:3em;		
	color:#FFC;	
	text-shadow:1px 2px 2px #000;		
}
header h2{
	position:absolute;
	right:20px;
	bottom:30px;
	font-size:2em;
	color:#FF0;	
	text-shadow:0px 1px 1px #000;	
}
.navi{
	position:relative;
	background:#271717;
	margin-top:-15px;
	width:960px;
	height:60px;
}

.navi ul{
	list-style: none; 
	height:40px;
	padding-top:10px;
	padding-bottom:5px;
}
.navi ul li {
	display:inline;
	font-size:15px;
}
.navi a, .navi a:visited {
	padding: 10px 5px 5px 35px;
	display: inline;
	color:#fff;
	width: 150px; 
	text-decoration: none;

}
.navi a:hover, .navi a:active, .navi a:focus {
		text-shadow:0px 2px 2px #000;
		color:#FC0;
}

.sidebar {
	float: right;
	width: 200px;
	height:550px;
	background-color:#DFD;
	padding-top:20px;
	padding-left:10px;
	padding-right:10px;
}

.sidebar img {
	margin-bottom: 5px;
	border: 1px solid #ccc;
	opacity:0.5; 
	text-align:center;
}

.sidebar img:hover{
	border:1px solid #000;	
	opacity:1.0;
}
.content {
	background-color: #FFFFFF;	
	padding-top:5px;
	padding-left:10px;
	width: 720px;
	float: left;
}

footer {
	padding: 10px 0;
	background-color:#030;
	color:#fff;
	text-align:center;
	clear: both;
}

header, section, footer, aside, article, figure {
	display: block;
}

.banner {
	margin: 0 10px 15px 10px;
	padding:0;	
}

 

 


 

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="utf-8">
	<title>HTML5 레이아웃</title>
<style>
	h1{font-size: 2em;}
	h2{font-size: 1.5em;}
	h3{font-size: 1.0em;}
	p{
		line-height: 20px;
		font-size: 12px;
	}
	body{
		font-family: "맑은 고딕", "고딕", "굴림";
	}
	#con{
		width: 800px;
		margin: 0 auto;
	}
	header{
		width: 100%;
		height: 150px;
		background-color: #f46075;
		background-image: url(images/nav2.png);
		background-repeat: no-repeat;
		background-position: right center;
	}
	header nav{
		float: left;
		width: 70%;
		margin-top: 50px;
	}
	nav ul{
		list-style-type: none;
	}
	nav ul li{
		display: inline;
		float: left;
		font-weight: bold;
		margin: 10px;
	}
	nav ul li a{
		color: white;
		text-decoration: none;
	}
	a:hover{
		color: yellow;
	}
	section{
		float: left;
		width: 580px;
		padding: 5px;
	}
	section article{
		float: left;
		height: 250px;
		width: 220px;
		margin: 5px;
		padding: 15px;
		border: 1px dotted #ccc;
	}
	aside{
		float: right;
		width: 250px;
		height: auto;
		border: 1px solid darkgreen;
		text-align: center;
	}
	.at1, .at2, .at3, .at4{
		transition: 2s;
		-webkit-transition: 2s;
		-moz-transition: 2s;
		-o-transition: 2s;
		-ms-transition: 2s;
	}
	.at1:hover{
		background-color: #cf9;
		border:1px solid green;
	}
	.at2:hover{
		background-color: #a2d0ff;
		border:1px solid blue;
	}
	.at3:hover{
		background-color: #ebcbfe;
		border:1px solid purple;
	}
	.at4:hover{
		background-color: #fc3;
		border:1px solid red;
	}
	footer{
		clear: both;
		width: 800px;
		margin-bottom: 0;
		background-color: #333;
		color: white;
		text-align: center;
		height: 50px;
	}
</style>
</head>
<body>
	<header>
		<nav>
			<ul>
				<li><a href="#">애완견 종류</a></li>
				<li><a href="#">입양하기</a></li>
				<li><a href="#">건강돌보기</a></li>
				<li><a href="#">더불어살기</a></li>
			</ul>
		</nav>
	</header>
	<section>
		<div id="con"></div>
			<h2>강아지 용품 준비하기</h2>
			<article class="at1">
				<h3>강아지 집 </h3>
				<p>강아지가 편히 쉴 수 있는 포근한 집이 필요합니다. 강아지의 집은 강아지가 다 큰 후에도 계속 쓸 수 있는 집으로 구입하세요.집을 구입하실 때는 박음질이 잘 되어 있는지, 세탁이 간편한 제품인지 꼭 확인하시고 고르시는 것이 좋습니다.</p>
			</article>
			<article class="at2">
				<h3>강아지 먹이 </h3>
				<p>강아지의 먹이는 꼭 어린 강아지용으로 나와있는 사료를 선택하세요. 강아지들은 사람에 비해 성장속도가 8배정도 빠르답니다. 따라서 강아지에게는 성장속도에 맞는 사료를 급여하셔야 합니다. 사람이 먹는 음식을 먹게 되면 양념과 향신료에 입맛이 익숙해지고, 비만이 될 가능성이 매우 높아집니다. 강아지용 사료는 생후 12개월까지 급여하셔야 합니다.</p>
			</article>
			<article class="at3">
				<h3>밥그릇, 물병 </h3>
				<p>밥그릇은 쉽게 넘어지지 않도록 바닥이 넓은 것이 좋습니다.물병은 대롱이 달린 것으로 선택하세요. 밥그릇에 물을 주게 되면 입 주변에 털이 모두 젖기 때문에 비위생적이므로 대롱을 통해서 물을 먹을 수 있는 물병을 마련하시는 것이 좋습니다.</p>
			</article>
			<article class="at4">
				<h3>이름표, 목줄</h3> 
				<p>강아지를 잃어버릴 염려가 있으니 산책할 무렵이 되면 이름표를 꼭 목에 걸어주도록 하세요. 그리고 방울이 달린 목걸이를 하고자 하실 때는 신중하셔야 합니다. 움직일 때마다 방울이 딸랑 거리면 신경이 예민한 강아지들에게는 좋지 않은 영향을 끼칠 수 있기 때문입니다.</p>
			</article>
		</div>
	</section>
	<aside>
		<img src="images/1.png" alt="리트리버">
		<img src="images/2.png" alt="코카">
		<img src="images/3.png" alt="비글">
	</aside>
	<footer>
		<p>Copyright 2012 funnycon</p>
	</footer>
</body>
</html>

 

 

 


<!DOCTYPE html>

<html lang="ko">

<head>

    <meta charset="utf-8">

    <title>애완견 돌보기</title>  

    <link rel="stylesheet" href="css/layout-result.css" type="text/css">

</head>

<body>

    <header>

        <nav>

            <ul>

                <li><a href="#">애완견 종류</a></li>

                <li><a href="#">입양하기</a></li>

                <li><a href="#">건강돌보기</a></li>

                <li><a href="#">더불어살기</a></li>

            </ul>

        </nav>

    </header>

    <article>

        <h2>애완견 종류</h2>

        <section>

            <h3>활달한 강아지</h3>

            <dl>

                <dt>요크셔 테리어</dt>

                <dd>생기있고 활달한 성질을 가지고 있으며 자신보다 몸집이 큰 개나 집에 들어온 침입자를 겁내는 일이 없어 좋은 번견이고 우리나라 최고의의 가정견으로 자리 잡고 있다.</dd>

                <dt>말티즈</dt>

                <dd>애정이 많고, 충실하며 활발한 성격을 소유하고있다. 이 종은 1급 가정견으로 요크셔테리어와 함께 우리나라 최고의 가정견으로 자리잡고 있다.</dd>

                <dt>포메 라이언</dt>

                <dd>활기차고 명랑한 개로 유명하고, 걷는 모습이 우아하다.충실하고 우호적인 성격이 가장 먼저 거론된다. </dd>

                <dt>골든 리트리버</dt>

                <dd>이 견종은 충성심이 강하고 성격이 활달하여 어린아이나 여성이 상대하기에 적합한 견종이다.참을성 또한 강하여 현재는실내에서도 많이 길러지고 있다.</dd>

            </dl>

        </section>

        <section>

            <h3>온순한강아지</h3>

            <dl>

                <dt>쉬즈</dt>

                <dd>얼굴에서 풍기는 모습처럼 온순, 쉽게 친숙해지고 우호적이며,어린아이나 여성들이 기르기에 적합한 견종이다.</dd>

                <dt>퍼그</dt>

                <dd>매우 사려가 깊고 사랑스러운 견종이며 그다지 손질이 필요하지 않고 식사량에 비해 많은 운동량이 필요하지 않다.</dd>

                <dt>래브라도 리트리버</dt>

                <dd>침착하고 영리하여 어린이들을 안심하고 맡길 수 있다. 사람을 즐겁게 해주려는 성질이 있다 공을 가지고 노는 것을 가장  좋아한다. 현재 맹인 안내견과 마약견으로 사용중이다. 온순한 강아지를 좋아하는 분에게는 적합한 견종이다.</dd>

            </dl>

        </section>

        <section>

            <h3>사납지만 복종적인 강아지</h3>

            <dl>

                <dt>미니어쳐핀셔</dt>

                <dd>경계심이 강하고 영리하며 작은 몸집에 비해 매우 용감하다. 주인에게 매우 복종적이며 작은 몸집에 보디가드 역할을 충실히 수행한다.</dd>

                <dt>푸들</dt>

                <dd>사납진 않으나, 상당히 복종적이며, 지능지수가 애완견종 중 가장 뛰어나다.</dd>

                <dt>폭스테리어</dt>

                <dd>가정에서 키우기에 적합한 품종이다.  보호본능이 강하고 정이 많다. 하지만 사냥을 하던 본능이 조금은 남아있어 사나운 면이 있다. 이종을 좋은 품종으로 기르기 위해서는 어릴 때부터 엄한 훈련이 필요하기도 하다.</dd>

            </dl>

        </section>

    </article>

    <aside>

        <h3>건강한 강아지는</h3>

        <ul>

            <li>코가 젖어있고 눈꼽이 없어야 합니다.</li>

            <li>털에 윤기가 있는 것을 골라야 합니다.</li>

            <li>입에서 고약한 냄새가 나면 병이 있다는 증거입니다.</li>

            <li>가장 활발하게 움직이는 녀석을 고르는게 좋습니다.</li>

            <li>강아지들 중에서 적당한 체구를 유지한 강아지가 좋습니다.</li>

        </ul>

    </aside>

    <footer>

        <p>Copyright 2012 funnycom</p>

    </footer>

</body>

</html>

body{
    font-family: "맑은 고딕", "고딕", "굴림";
}
header{
    width: 80%;
    margin-right: auto;
    margin-left: auto;
    background-color: #069;
    padding: 10px;
    text-align: center;
    overflow: hidden; /*크기보다 내용이 많은 경우 넘쳐나는 부분을 감춤*/
}
header nav{
    width: 60%;
    margin-left: auto;
    margin-right: auto;
}
nav ul{
    list-style-type: none;
}
nav ul li{
    display: inline;
    margin: 15px;
}
nav ul li a{
    color: white;
    text-decoration: none;
}
article{
    width: 80%;
    margin-right: auto;
    margin-left: auto;
    border: 5px solid #333;
    padding: 5px;
    overflow: hidden;
}
article section{
    width: 30%;
    height: 650px;
    float: left;
    margin: 5px;
    padding: 5px;
    border: 1px dotted #333;
}
section h3{
    background: url(../images/bg-note.png) no-repeat left center;
    padding-left: 30px;
}
aside{
    clear: both;
    margin: 0 auto;
    width: 80%;
    height: auto;
    padding: 10px;
    background-color: #99cc33;

}
footer{
    clear: both;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    padding: 10px;
    background-color: #333;
    color: white;
    text-align: center;
}

 

 

'Learning > HTML&JavaScript' 카테고리의 다른 글

CSS3 선택자  (0) 2020.07.24
HTML 멀티미디어  (0) 2020.07.24
CSS 레이아웃  (0) 2020.07.21
CSS와 박스 모델  (0) 2020.07.21
스타일과 스타일시트 글꼴  (0) 2020.07.17

+ Recent posts