반응형

안녕들 하시죠!

이번시간에는 Bootstrap 사용법에 대해 알아보겠습니다.

 

1. Bootstrap 라이브러리 다운

 

Bootstrap 공식 홈페이지에 가면 다운받을 수 있습니다.

http://bootstrapk.com/getting-started/

아래에 파일을 첨부했고, 저는 3.3.2 버전을 사용했습니다.

bootstrap-3.3.2-dist.zip
0.25MB
bootstrap-4.3.1-dist.zip
0.68MB

2. eclipse에 Bootstrap 라이브러리 폴더 만들기

 

WebContent 밑에 resources라는 폴더를 만들고 라이브러리를 압축 풀어 드래그해 넣었습니다.

3. Bootstrap 샘플 얻기

 

여러 사이트가 있지만 저는 https://www.bootdey.com/ 에서 샘플을 찾아보았습니다.

원하는 샘플을 찾아 클릭해 들어갑니다.

저는 개인프로필 샘플을 찾아들어갔습니다.

https://www.bootdey.com/snippets/view/gray-profile

 

 

 

4. HTML code 복사

 

원하는 .jsp나 .html 파일에 HTML code를 복사해 <body>태그 안에 붙여넣기 합니다.

 

5. CSS 파일 만들기

CSS code 부분 복사 -> 아까 만들어 둔 eclipse의 resources 폴더의 css 폴더에 .css 파일을 하나 만들기 -> 붙여넣기.

 

6. Bootstrap CDN 추가

 

HTML code를 복사 붙여넣기 했던 페이지에 CDN 코드 추가.

<link rel="stylesheet" href="resources/css/bootstrap.css">
<!-- CSS code를 복사해 붙여넣은 PersonInfo, 본인 파일명과 root를 작성해주세요 --!>
<link rel="stylesheet" href="resources/css/PersonInfo.css"> 
<script src="resources/js/bootstrap.js"></script>

7. 결과화면

 

 

오늘은 여기까지입니다.

궁금한점 있으시면 댓글이나 쪽지 부탁드려요 감사합니다.

'웹 프로그래밍' 카테고리의 다른 글

Jsp/Servlet을 이용한 개인 홈페이지 만들기(로그인, 회원가입,중복체크) -- 2  (0) 2019.09.30
Spring에서 Servlet 매핑하기  (0) 2019.09.03
Spring - Maven 프로젝트 생성 및 설정  (0) 2019.09.03
Jsp/Servlet을 이용한 개인 홈페이지 만들기(로그인, 회원가입,중복체크) -- 1  (0) 2019.09.01
Javascript의 문서객체모델(DOM)  (0) 2019.07.13
반응형

안녕들 하시죠!

저번시간부터 개인 홈페이지 프로젝트에 기능들을 하나 하나 추가해보고 있습니다.

저번 게시물에 dao, vo, servlet, service, exception 패키지를 추가하고 가겠습니다.

다음 게시물부터는 기능을 하나씩만 추가할 생각이라 글이 좀 짧아질 것 같습니다.

 

사용언어와 문법

Oracle database, HTML5, Javascript, JSP/Servlet, JQuery, EL, JSTL 등

 

MVC 패턴

 

DupchkServlet(중복체크), JoinServlet, LoginServlet -> CustomerService -> CustomerDAO

 

SearchZipServlet(우편번호찾기) -> ZipService -> ZipDAO

 

뒷단 구성에 사용될 클래스들

 

DupchkServlet(중복체크), JoinServlet, LoginServlet -> CustomerService -> CustomerDAO

DupchkServlet

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
package Servlet;
 
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 my.service.CustomerService;
 
 
@WebServlet("/dupchk")
public class DupchkServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;
    private CustomerService service;
    
    public DupchkServlet() {
        service = new CustomerService();
    }
 
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String id = request.getParameter("id");
        
        // Service 단 연결
        CustomerService service = new CustomerService();
        String str;
        str = service.dupchk(id);
                        
        request.setAttribute("result", str);
        String path= "/result.jsp";
        RequestDispatcher rd = request.getRequestDispatcher(path);
        rd.forward(request, response);
        
    }
}
 cs

JoinServlet

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
package Servlet;
 
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 my.service.CustomerService;
import my.vo.Customer;
 
@WebServlet("/join")
public class JoinServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;
    private CustomerService service;
    
    public JoinServlet() {
        super();
        service = new CustomerService();
    }
 
    protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String id = request.getParameter("id");
        String pwd = request.getParameter("pwd");
        String name = request.getParameter("name");
        String buildingno = request.getParameter("buildingno");
        String addr = request.getParameter("zipcode") + "/" + request.getParameter("addr1") + "/" + request.getParameter("addr2");
        
        Customer c = new Customer();
        c.setId(id);
        c.setPwd(pwd);
        c.setName(name);
        c.setBuildingno(buildingno);
        c.setAddr(addr);
        
        String str = service.join(c);
        request.setAttribute("result",  str);
        
        String path = "/result.jsp";    
        RequestDispatcher rd = request.getRequestDispatcher(path);
        rd.forward(request, response);
        
    }
}
 cs

LoginServlet

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
package Servlet;
 
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 org.json.simple.JSONObject;
import org.json.simple.parser.JSONParser;
import org.json.simple.parser.ParseException;
 
import my.service.CustomerService;
 
@WebServlet("/login") // servlet url,로그인 요청을 하게 되면 가장 먼저 LoginServlet을 호출하게 된다.
public class LoginServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;
    private CustomerService service;
    
    public LoginServlet() { // 생성자에서 service객체 자동 생성
        service = new CustomerService();
    }
 
    protected void doPost(HttpServletRequest request, HttpServletResponse response) 
            throws ServletException, IOException {
 
        String path = "/result.jsp";
        
        String id = request.getParameter("id");
        String pwd = request.getParameter("pwd");
        
        HttpSession session = request.getSession();
        session.removeAttribute("loginInfo");
        
        String str = service.login(id, pwd);
        /*--로그인성공시 HttpSession객체의 속성으로 추가 --*/
        JSONParser parser = new JSONParser();
        try {
            Object obj = parser.parse(str);
            JSONObject jsonObj = (JSONObject)obj;
            if((Long)jsonObj.get("status") == 1) {//로그인 성공!
                session.setAttribute("loginInfo", id);
            }
        } catch (ParseException e) {
            e.printStackTrace();
        }
        request.setAttribute("result", str);
        RequestDispatcher rd = request.getRequestDispatcher(path);            
        rd.forward(request, response);        
    }
}
 cs

CustomerService

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
package my.service;
 
import java.sql.SQLException;
 
import org.json.simple.JSONObject;
 
import my.dao.CustomerDAO;
import my.exception.NotFoundException;
import my.vo.Customer;
 
public class CustomerService {
    private CustomerDAO dao;
 
    public CustomerService() {
        dao = new CustomerDAO();
    }
    
    public String login(String id, String pwd) { 
        int status = -1;
        
        try {
            Customer c = dao.selectById(id);
            if (c.getPwd().equals(pwd) && c.getStatus() == 1) {
                status = 1;    
            } 
            else if(c.getStatus() == 0){
                status = -1;     
            }
                 
        } catch (SQLException | NotFoundException e) {
            e.printStackTrace();
        }
        
        JSONObject jsonObj = new JSONObject();
        jsonObj.put("status", status);
        jsonObj.put("id", id);
        String str = jsonObj.toString();
        return str;
    }
 
    public String join(Customer c) {
        int status = -1;
        try {
            status = dao.joinMember(c);
        } catch (NotFoundException e) {
            e.printStackTrace();
            status = -1;
        }
        String str = "{\"status\":\"" + status + "\"}";
        return str;
    }
 
    public String dupchk(String id) {
        int status = 1;
        try {
            dao.selectById(id);
            status = -1;
        } catch (SQLException | NotFoundException e) {
            e.printStackTrace();
            status = 1;
        }
        
        JSONObject jsonObj = new JSONObject();
        jsonObj.put("status", status);
 
        String str = jsonObj.toString();
        return str;
    }
}    
 cs

CustomerDAO

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
package my.dao;
 
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
import java.util.ArrayList;
 
import my.exception.NotFoundException;
import my.vo.Customer;
import my.dao.CustomerDAO;
 
public class CustomerDAO {
    // oracle db와의 연동
    Connection con = null;
    PreparedStatement pstmt = null;
    ResultSet rs = null;
 
    String url = "jdbc:oracle:thin:@localhost:1521:xe";
    String user = "C##ora_user";
    String pw = "hong";
 
    public CustomerDAO() {
        try {
            Class.forName("oracle.jdbc.driver.OracleDriver");
        } catch (ClassNotFoundException e) {
            e.printStackTrace();
        }
    }
 
    public void CloseDB() throws SQLException {
        if (rs != null)
            rs.close();
        if (pstmt != null)
            pstmt.close();
        if (con != null)
            con.close();
    }
 
    public Customer selectById(String id) throws SQLException, NotFoundException { // login, dupchk할때 SELECT문으로 DB에서 ID를 찾는다.
        Customer customer = new Customer();
        String SelectSQL = "Select * from customers where Customer_id=?";
 
        con = DriverManager.getConnection(url, user, pw);
        pstmt = con.prepareStatement(SelectSQL);
        pstmt.setString(1, id);
        rs = pstmt.executeQuery();
 
        String dbid = null;
        String dbpwd = null;
        String dbaddr = null;
        String dbname = null;
        String dbbuildingno = null;
        int customerStatus = 0;
 
        if (rs.next()) {
            dbid = rs.getString("customer_id");
            dbpwd = rs.getString("customer_pwd");
            customerStatus = rs.getInt("customer_status");
            dbaddr = rs.getString("CUSTOMER_ADDR");
            dbname = rs.getString("CUSTOMER_NAME");
            dbbuildingno = rs.getString("customer_buildingno");
 
            customer.setId(dbid);
            customer.setPwd(dbpwd);
            customer.setStatus(customerStatus);
            customer.setAddr(dbaddr);
            customer.setName(dbname);
            customer.setBuildingno(dbbuildingno);
 
        } else {
            throw new NotFoundException("아이디가 존재하지 않습니다 !");
        }
        CloseDB();
        return customer;
    }
 
    public int joinMember(Customer c) throws NotFoundException { // join 할때 DB에 INSERT문으로 삽입
 
        int status = -1;
        String query = "INSERT INTO CUSTOMERS(CUSTOMER_ID,CUSTOMER_STATUS,CUSTOMER_PWD,CUSTOMER_NAME,CUSTOMER_BUILDINGNO,CUSTOMER_ADDR) VALUES ( ?, ?, ?, ?, ?, ?)";
 
        try {
            con = DriverManager.getConnection(url, user, pw);
            pstmt = con.prepareStatement(query);
            pstmt.setString(1, c.getId());
            pstmt.setInt(2, 1);
            pstmt.setString(3, c.getPwd());
            pstmt.setString(4, c.getName());
            pstmt.setString(5, c.getBuildingno());
            pstmt.setString(6, c.getAddr());
            pstmt.executeUpdate();
            status = 1;
        } catch (SQLException e) {
            e.printStackTrace();
            status = -1;
        }
        try {
            CloseDB();
        } catch (SQLException e) {
            e.printStackTrace();
        }
        return status;
    }
}
 cs

 

SearchZipServlet(우편번호찾기) -> ZipService -> ZipDAO

SearchZipServlet

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
package Servlet;
 
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 my.service.ZipService;
 
@WebServlet("/searchzip")
public class SearchZipServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;
    
    public SearchZipServlet() {
        super();
       
    }
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String input = request.getParameter("doro");
        ZipService service = new ZipService();
        String str = service.searchZip(input);
        
        request.setAttribute("result", str);
        String path= "/result.jsp";
        RequestDispatcher rd = request.getRequestDispatcher(path);
        rd.forward(request, response);
    }
}
 
 cs

ZipService

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
package my.service;
 
import java.util.ArrayList;
import java.util.HashMap;
import java.util.Iterator;
import java.util.List;
import java.util.Map;
import java.util.Set;
 
import org.json.simple.JSONArray;
import org.json.simple.JSONObject;
 
import my.dao.ZipDAO;
 
public class ZipService {
    private ZipDAO zdao;
    public ZipService(){
        zdao = new ZipDAO() ;
    }
    
    public String searchZip(String doro) {
        List<Map<String,String>> addrlist = new ArrayList<Map<String,String>>();
        Map<String, String> addrmap;
        addrlist = zdao.selectByDoro(doro);
        
        JSONArray jsonArr = new JSONArray();
        
        for(int i = 0 ; i < addrlist.size(); i++) {
            addrmap = addrlist.get(i);
            JSONObject obj = new JSONObject();
            obj.put("zipcode", addrmap.get("zipcode"));
            obj.put("doroaddr", addrmap.get("doroaddr"));
            obj.put("buildingaddr", addrmap.get("buildingaddr"));
            obj.put("buildingno", addrmap.get("buildingno"));
                
            jsonArr.add(obj);
        }
        return jsonArr.toString();
    }
}
 cs

ZipDAO

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
package my.dao;
 
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
 
public class ZipDAO {
    String url = "jdbc:oracle:thin:@localhost:1521:xe";
    String user = "C##ora_user";
    String pw = "hong";
 
    public List<Map<String, String>> selectByDoro(String doro){
        
        List<Map<String,String>> addrlist = new ArrayList<Map<String,String>>();
        Connection conn = null;    
        PreparedStatement pstmt = null;
        ResultSet rs = null;
        String doroname  = "SELECT zipcode,  \r\n" + 
                "sido||' ' \r\n" + 
                "|| sigungu ||NVL2(sigungu,' ', '')\r\n" + 
                "|| eupmyun ||NVL2(eupmyun,' ', '')\r\n" + 
                "|| doro ||' ' \r\n" + 
                "|| building1\r\n" + 
                "|| DECODE(building2,'0', '', '-'||building2) ||' ' \r\n" + 
                "|| '('|| dong || ri || DECODE(building, '', '', ',' ||building) ||')'" + 
                ","+
                "sido ||' ' \r\n" + 
                "|| sigungu ||NVL2(sigungu,' ', '')\r\n" + 
                "|| eupmyun ||NVL2(eupmyun,' ', '')\r\n" + 
                "|| dong || ri ||' ' ||  zibun1 || DECODE(zibun2, '0', '',  '-'|| zibun2)    || DECODE(building, '', '', ' (' ||building ||')') " +
                ","+
                "buildingno \r\n" +
                "FROM post\r\n" + 
                "WHERE (doro || ' ' || building1 || DECODE(building2,'0', '', '-'||building2)) LIKE ?";
        try {
            Class.forName("oracle.jdbc.driver.OracleDriver");
            
            conn = DriverManager.getConnection(url,    user, pw);
            pstmt =  conn.prepareStatement(doroname);
            pstmt.setString(1, "%" + doro + "%");
            rs = pstmt.executeQuery();
            
            String zipcode ="";
            String doroaddr="";
            String buildingaddr="";
            String buildingno="";
        
            while(rs.next()) {
                zipcode = rs.getString(1);
                doroaddr = rs.getString(2);
                buildingaddr = rs.getString(3);
                buildingno = rs.getString(4);
                
                Map<String, String> resultMap = new HashMap<String, String>();
                resultMap.put("zipcode", zipcode);
                resultMap.put("doroaddr", doroaddr);
                resultMap.put("buildingaddr", buildingaddr);
                resultMap.put("buildingno", buildingno);
                addrlist.add(resultMap);
            }
        } catch(ClassNotFoundException e) {
            e.printStackTrace();
        } catch (SQLException e) {
            e.printStackTrace();
        } finally {
            if(rs != null) {
                try {
                    rs.close();
                }
                catch (SQLException e) {}
            }
            if(pstmt != null) {
                try {
                    pstmt.close();
                }
                catch (SQLException e) {}
            }
            if(conn != null) {
                try {
                    conn.close();
                }
            catch (SQLException e) {}
            }
        }
        return addrlist;
    }
}
 cs

 

 

 

NotFoundException, vo (Customer, Post)

NotFoundException

1
2
3
4
5
6
7
8
9
10
11
12
13
package my.exception;
 
public class NotFoundException extends Exception{
 
    // 예외 전송용 에러 클래스
    public NotFoundException() {
        super();
    }
 
    public NotFoundException(String message) {
        super(message);
    }
}
 cs

Customer

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
package my.vo;
 
public class Customer {
    // 고객에 대한 정보가 담겨있다
    // 오라클의 customer table의 한행의 자료를 표현하기위해 
    // JVM에서 일할 클래스를 만든다
    private String id;
    private String pwd;
    private String name;
    private String buildingno;
    // 객체와 객체사이에서도 관계를 맺을 필요가 있다
    // 현재 customer table과  post table 과 일대다 관계이므로 이를 표현할 필요가 있다
    // 다시 말해 테이블간의 관계가 있다면 클래스간의 관계로 표현해줘야 한다
    private Post post;
    // has a 관계
    private String addr;
    // is a 관계
    private int status;
    // 기본생성자
    public Customer() {
        super();
    }
    
    // 모든 인스턴스 변수 초기화 생성자
    public Customer(String id, String pwd, String name, String buildingno, Post post, String addr, int status) {
        super();
        this.id = id;
        this.pwd = pwd;
        this.name = name;
        this.buildingno = buildingno;
        this.post = post;
        this.addr = addr;
        this.status = status;
    }
    
    // Setter & Getter
    public String getId() {
        return id;
    }
    public void setId(String id) {
        this.id = id;
    }
    public String getPwd() {
        return pwd;
    }
    public void setPwd(String pwd) {
        this.pwd = pwd;
    }
    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
    public String getBuildingno() {
        return buildingno;
    }
    public void setBuildingno(String buildingno) {
        this.buildingno = buildingno;
    }
    public Post getPost() {
        return post;
    }
    public void setPost(Post post) {
        this.post = post;
    }
    public String getAddr() {
        return addr;
    }
    public void setAddr(String addr) {
        this.addr = addr;
    }
    public int getStatus() {
        return status;
    }
    public void setStatus(int status) {
        this.status = status;
    }
}
 cs

Post

package my.vo;

public class Post {
	// Post 테이블의 자료를 JVM 자료로 만든다
	private String zipcode;
	private String sido;
	private String sidoe;
	private String sigungu;
	private String sigungue;
	private String eupmyun;
	private String eupmyune;
	private String dorocode;
	private String doro;
	private String doroe;
	private String jiha;
	private String building1;
	private String building2;
	private String buildingno;
	private String daryang;
	private String building;
	private String dongcode;
	private String dong;
	private String ri;
	private String dongadmin;
	private String san;
	private String zibun1;
	private String zibunserial;
	private String zibun2;
	private String zipoldcode;
	private String zipcodeserial;

	// 기본 생성자
	public Post() {
		super();
	}

	// 모든 매개변수 생성자
	public Post(String zipcode, String sido, String sidoe, String sigungu, String sigungue, String eupmyun,
			String eupmyune, String dorocode, String doro, String doroe, String jiha, String building1,
			String building2, String buildingno, String daryang, String building, String dongcode, String dong,
			String ri, String dongadmin, String san, String zibun1, String zibunserial, String zibun2,
			String zipoldcode, String zipcodeserial) {
		super();
		this.zipcode = zipcode;
		this.sido = sido;
		this.sidoe = sidoe;
		this.sigungu = sigungu;
		this.sigungue = sigungue;
		this.eupmyun = eupmyun;
		this.eupmyune = eupmyune;
		this.dorocode = dorocode;
		this.doro = doro;
		this.doroe = doroe;
		this.jiha = jiha;
		this.building1 = building1;
		this.building2 = building2;
		this.buildingno = buildingno;
		this.daryang = daryang;
		this.building = building;
		this.dongcode = dongcode;
		this.dong = dong;
		this.ri = ri;
		this.dongadmin = dongadmin;
		this.san = san;
		this.zibun1 = zibun1;
		this.zibunserial = zibunserial;
		this.zibun2 = zibun2;
		this.zipoldcode = zipoldcode;
		this.zipcodeserial = zipcodeserial;
	}

	// Setter & Getter
	public String getZipcode() {
		return zipcode;
	}

	public void setZipcode(String zipcode) {
		this.zipcode = zipcode;
	}

	public String getSido() {
		return sido;
	}

	public void setSido(String sido) {
		this.sido = sido;
	}

	public String getSidoe() {
		return sidoe;
	}

	public void setSidoe(String sidoe) {
		this.sidoe = sidoe;
	}

	public String getSigungu() {
		return sigungu;
	}

	public void setSigungu(String sigungu) {
		this.sigungu = sigungu;
	}

	public String getSigungue() {
		return sigungue;
	}

	public void setSigungue(String sigungue) {
		this.sigungue = sigungue;
	}

	public String getEupmyun() {
		return eupmyun;
	}

	public void setEupmyun(String eupmyun) {
		this.eupmyun = eupmyun;
	}

	public String getEupmyune() {
		return eupmyune;
	}

	public void setEupmyune(String eupmyune) {
		this.eupmyune = eupmyune;
	}

	public String getDorocode() {
		return dorocode;
	}

	public void setDorocode(String dorocode) {
		this.dorocode = dorocode;
	}

	public String getDoro() {
		return doro;
	}

	public void setDoro(String doro) {
		this.doro = doro;
	}

	public String getDoroe() {
		return doroe;
	}

	public void setDoroe(String doroe) {
		this.doroe = doroe;
	}

	public String getJiha() {
		return jiha;
	}

	public void setJiha(String jiha) {
		this.jiha = jiha;
	}

	public String getBuilding1() {
		return building1;
	}

	public void setBuilding1(String building1) {
		this.building1 = building1;
	}

	public String getBuilding2() {
		return building2;
	}

	public void setBuilding2(String building2) {
		this.building2 = building2;
	}

	public String getBuildingno() {
		return buildingno;
	}

	public void setBuildingno(String buildingno) {
		this.buildingno = buildingno;
	}

	public String getDaryang() {
		return daryang;
	}

	public void setDaryang(String daryang) {
		this.daryang = daryang;
	}

	public String getBuilding() {
		return building;
	}

	public void setBuilding(String building) {
		this.building = building;
	}

	public String getDongcode() {
		return dongcode;
	}

	public void setDongcode(String dongcode) {
		this.dongcode = dongcode;
	}

	public String getDong() {
		return dong;
	}

	public void setDong(String dong) {
		this.dong = dong;
	}

	public String getRi() {
		return ri;
	}

	public void setRi(String ri) {
		this.ri = ri;
	}

	public String getDongadmin() {
		return dongadmin;
	}

	public void setDongadmin(String dongadmin) {
		this.dongadmin = dongadmin;
	}

	public String getSan() {
		return san;
	}

	public void setSan(String san) {
		this.san = san;
	}

	public String getZibun1() {
		return zibun1;
	}

	public void setZibun1(String zibun1) {
		this.zibun1 = zibun1;
	}

	public String getZibunserial() {
		return zibunserial;
	}

	public void setZibunserial(String zibunserial) {
		this.zibunserial = zibunserial;
	}

	public String getZibun2() {
		return zibun2;
	}

	public void setZibun2(String zibun2) {
		this.zibun2 = zibun2;
	}

	public String getZipoldcode() {
		return zipoldcode;
	}

	public void setZipoldcode(String zipoldcode) {
		this.zipoldcode = zipoldcode;
	}

	public String getZipcodeserial() {
		return zipcodeserial;
	}

	public void setZipcodeserial(String zipcodeserial) {
		this.zipcodeserial = zipcodeserial;
	}
}

 

HomeEx1.war
4.10MB

 

오늘은 여기까지입니다 감사합니다 !

'웹 프로그래밍' 카테고리의 다른 글

Bootstrap 사용법 (초급)  (0) 2019.10.29
Spring에서 Servlet 매핑하기  (0) 2019.09.03
Spring - Maven 프로젝트 생성 및 설정  (0) 2019.09.03
Jsp/Servlet을 이용한 개인 홈페이지 만들기(로그인, 회원가입,중복체크) -- 1  (0) 2019.09.01
Javascript의 문서객체모델(DOM)  (0) 2019.07.13
반응형

안녕들 하시죠!

이번시간에는 설정해놓은 Spring 프로젝트에서 Servlet을 매핑해보겠습니다.

 

web project를 만들었다면 프로젝트 내에 web.xml 파일이 있을것입니다.

열어보게되면 현재는 welcome-file만 존재합니다.

 

아래의 코드를 이용해 Servlet과 url 을 매핑해보겠습니다.

<servlet>
	<servlet-name>mySpring1</servlet-name>
	<servlet-class>
		org.springframework.web.servlet.DispatcherServlet</servlet-class>
</servlet>

<servlet-mapping>
	<servlet-name>mySpring1</servlet-name>
	<url-pattern>/</url-pattern>
</servlet-mapping>
</web-app>

DispatcherServlet은 앞단에서 들어온 모든 요청을 받는 Servlet 입니다.

후에 클래스에 추가할 어노테이션을 통해 찾아갈 타겟을 설정합니다.

 

이제 servlet-name 으로 사용했던 mySpring1 이름을 이용해 xml 파일을 만들겠습니다.

WebContent -> WEB-INF -> new -> other

 

Spring -> Spring Bean Configuration File -> next

 

 

 

mySpring1-servlet.xml -> next

beans, context 체크 -> finish

이제 beans 영역에 context 입력.

<context:annotation-config/>
<context:component-scan base-package="control"/>

 

annotation-config : 스프링 컨테이너에서 annotation 태그(@Autowired)를 활성화 해 사용하겠다.

component-scan base-package="control" : control 패키지 내에서 @Component, @Service 등의 어노테이션을 활성화 해 스캔하겠다.

 

다음 게시물에서는 어노테이션에 대해 정리해보겠습니다. 

오늘은 여기까지입니다 감사합니다 !

'웹 프로그래밍' 카테고리의 다른 글

Bootstrap 사용법 (초급)  (0) 2019.10.29
Jsp/Servlet을 이용한 개인 홈페이지 만들기(로그인, 회원가입,중복체크) -- 2  (0) 2019.09.30
Spring - Maven 프로젝트 생성 및 설정  (0) 2019.09.03
Jsp/Servlet을 이용한 개인 홈페이지 만들기(로그인, 회원가입,중복체크) -- 1  (0) 2019.09.01
Javascript의 문서객체모델(DOM)  (0) 2019.07.13
반응형

안녕들 하시죠!

이번시간부터는 Spring framework에 대해 공부해보겠습니다.

우선 프로젝트를 만들고 이전에 작성했던 dao service servlet vo 패키지를 가져와 바꿔보는 형식으로 진행할 생각입니다.

 

1. Spring Tools 설치 및 프로젝트 생성

 

Eclipse 상단 바의 help -> Eclipse MarketPlace -> spring 검색 후 Spring Tools 3 버전 Install

 

 

Apach Tomcat v8.5이 깔려있는 상태이고 web module은 2.5버전으로 만들었습니다.

 

 

2. convert to Maven Project

자바 프로젝트의 build, dependency, compile, deploy 등을 수행하며 라이브러리의 사용을 위해 Maven 프로젝트로 전환. 

빌드 툴이자 의존성 관리 역할로 사용. ( 라이브러리 관리에 용이함 )

 

프로젝트 전환 시 생성되는 pom.xml

 

 

 

 

pom.xml 기본 태그들

* 프로젝트당 한개만 있는 프로젝트 객체 모델. . 프로젝트의 설정, 버전, 의존성 등을 알 수 있다.

1
2
3
4
5
6
7
8
9
  <modelVersion>4.0.0</modelVersion> <!-- pom.xml의 버전 -->
  <groupId>mySpring1</groupId> <!-- 제작자를 식별하기위한 프로젝트 그룹 ID -->
  <artifactId>mySpring1</artifactId> <!-- 이 프로젝트에 할당된 고유 ID -->
  <version>0.0.1-SNAPSHOT</version> <!-- 프로그램의 버전 -->
  <packaging>war</packaging> <!-- 프로젝트의 패키지 종류. 현재는 web프로젝트의 war파일 -->
  
  <build>
    <sourceDirectory>src</sourceDirectory> <!-- src 역할을 하는 디렉터리 위치 -->
    <plugins> <!-- build에서 사용할 plugin -->
 cs

Dependency 관리

실제 라이브러리 파일이 있는 저장소 서버의 위치를 지정하고, 이 프로젝트에서 사용할 라이브러리가 무엇인지 지정 및 관리

dependency 태그로 정의만 해두면 maven이 repository에서 검색해 자동으로 추가해준다.

- 이번 프로젝트에서 사용할 라이브러리들

spring-mvc 5.0.2
spring-jdbc 5.0.2
mybatis 3.5.2
mybatis-spring 1.3.2
jstl 1.2
simple-json 1.1.1

 

1) maven repository 페이지로 이동

https://mvnrepository.com/

2) 원하는 라이브러리 검색

3) 원하는 버전 클릭

4) dependency 코드 영역 클릭 (복사)

5) <dependencies></dependencies> 코드 안에 붙여넣기 

* 한개의 dependencis 태그 안에 여러 라이브러리들을 붙여 넣어야합니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<project xmlns="http://maven.apache.org/POM/4.0.0"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion> <!-- pom.xml의 버전 -->
    <groupId>mySpring1</groupId> <!-- 제작자를 식별하기위한 프로젝트 그룹 ID -->
    <artifactId>mySpring1</artifactId> <!-- 이 프로젝트에 할당된 고유 ID -->
    <version>0.0.1-SNAPSHOT</version> <!-- 프로그램의 버전 -->
    <packaging>war</packaging> <!-- 프로젝트의 패키지 종류. 현재는 web프로젝트의 war파일 -->
 
    <dependencies>
        <!-- https://mvnrepository.com/artifact/org.springframework/spring-webmvc -->
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-webmvc</artifactId>
            <version>5.0.2.RELEASE</version>
        </dependency>
 
    </dependencies>
 cs

 

오늘은 프로젝트 생성과 라이브러리를 추가하는 부분까지 진행했습니다.

다음 게시물에서 이어서 진행하겠습니다. 

오늘은 여기까지입니다 감사합니다 !

'웹 프로그래밍' 카테고리의 다른 글

Jsp/Servlet을 이용한 개인 홈페이지 만들기(로그인, 회원가입,중복체크) -- 2  (0) 2019.09.30
Spring에서 Servlet 매핑하기  (0) 2019.09.03
Jsp/Servlet을 이용한 개인 홈페이지 만들기(로그인, 회원가입,중복체크) -- 1  (0) 2019.09.01
Javascript의 문서객체모델(DOM)  (0) 2019.07.13
Javascript addEventListener를 이용한 간단한 계산기 만들기  (0) 2019.07.13
반응형

안녕들 하시죠 !

이번시간 부터는 Jsp/Servlet 등의 기술을 이용하여 개인 홈페이지를 구축해보겠습니다.

이번 게시물에서는 전체적인 앞단을, 다음 게시물부터는 뒷단위주로 작성하며 기능들을 추가해 보겠습니다.

오로지 기능구현에만 초점을 맞춘 게시물입니다.

사용언어와 문법

Oracle database, HTML5, Javascript, JSP/Servlet, JQuery, EL, JSTL 등

 

MVC 패턴사용

Servlet -> Service -> DAO 순으로 비지니스 로직을 분리하는 디자인 패턴을 사용.

 

앞단 구성에 사용될 .jsp와 .jar 파일들

 

Jsp/Servlet을 이용한 개인 홈페이지 만들기 --1의 결과물

메인 화면

로그인 화면

회원가입 화면

 

Database 구성

향후 게시판이나 관리자 페이지 등을 진행할 예정이지만 여기에선 회원(Customers), 우편번호(Post)만 만들겠습니다.

http://www.epost.go.kr/search/zipcode/cmzcd002k01.jsp 에서 우편번호파일 다운로드

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
CREATE TABLE Customers(    
    customer_id VARCHAR2(50), -- 사용자 id
    customer_pwd VARCHAR2(50) NOT NULL, -- 사용자 pwd 
    customer_status NUMBER, -- 사용자 상태검사
    customer_addr VARCHAR2(100), -- 사용자 주소 + 상세주소
    customer_name VARCHAR2(30), -- 사용자 이름
    customer_buildingno VARCHAR2(100), -- 상세건물번호 
    constraint customers_pk PRIMARY KEY(customer_id) -- 사용자 id p키로 설정
);
 
CREATE TABLE post(
    zipcode varchar2(5),
    sido varchar2(21),
    sidoe varchar2(40),
    sigungu varchar2(20),
    sigungue varchar2(40),
    eupmyun varchar2(20),
    eupmyune varchar2(40),
    dorocode varchar2(12),  --도로명코드
    doro varchar2(80),  --도로명
    doroe varchar2(80),
    jiha varchar2(1),
    building1 varchar2(5), --건물번호 본번
    building2 varchar2(5), --건물번호 부번
    buildingno varchar2(25),  --건물관리번호
    daryang varchar2(40),
    building varchar2(200), --시군구용건물명
    dongcode varchar2(10),
    dong varchar2(20), --법정동명
    ri varchar2(20),
    dongadmin varchar2(40),
    san varchar2(1),
    zibun1 varchar2(4),
    zibunserial varchar2(2),
    zibun2 varchar2(4),
    zipoldcode varchar2(6),
    zipcodeserial varchar2(3));
 cs

 

 

main.jsp

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:set var="contextPath" value="${pageContext.request.contextPath}"/>
<style>
a{
text-decoration: none;
}
</style>
<body>
<header>
                                    <!-- 페이지 타이틀을 클릭하면 메인화면으로 이동 -->
    <p  style="text-align: center; "><a href='${contextPath}/main/main.jsp'> 
    <font color="black" id="HOME"> HONGPOSSIBLE HOMEPAGE </font></a></p>
    <div style="text-align: right;">
 
    <jsp:include page="menu.jsp"/> <!-- 상세메뉴인 menu.jsp를 include해 사용 -->
    </div>
    <hr>
    <br>
    <br>
</header>
<section><p style="text-align: center;">안녕하세요</p></section>
</body>
 cs

 

menu.jsp

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:set var="contextPath" value="${pageContext.request.contextPath}"/>
<script>
var loadMenu = function(u, callback){
    $.ajax({
        url: u,
        method: 'GET',
        success: function(data){
            callback(data);
        }
    });
};
 
var loadLogin = function(data){ // section 영역을 비우고 그 자리에 Login 페이지를 넣는다.
    $("section").empty();
    $("section").html(data);
};
var loadJoin = function(data){ 
    $("section").empty();
    $("section").html(data);
};
 
 
$(function(){
    var $menuArr = $("#coreTopMenu>span>a"); // 메뉴(Login, Join) 페이지를 찾아 배열형태로 변수에 저장.
    $menuArr.click(function(event){        
        var url = $(this).attr('href');
        switch(url){
        case '${contextPath}/main/login.jsp':
            loadMenu(url, loadLogin);
            break;
        case '${contextPath}/main/join.jsp':
            loadMenu(url, loadJoin);
            break;
        };
    return false;  //이벤트전달 중지
    });
});
</script>    
 
<div>
<ul  id="coreTopMenu">
<span><a href='${contextPath}/main/login.jsp'><font color="black"> 로그인 </font></a></span>&nbsp;&nbsp;
<span><a href='${contextPath}/main/join.jsp'><font color="black"> 회원가입 </font></a></span>
</ul>
</div>
 cs

 

login.jsp

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
    <c:set var="contextPath" value="${pageContext.request.contextPath}"/>
<script>
$(function(){
    $("#loginbtn").click(function(){
        if($("#idid").val().trim() == 0){ // id 입력란이 공백인 상태로 로그인 버튼이 
                                          // 눌리게 되면 .focus()를 이용해 입력유도.
            $("#idid").focus();
        } else if($("input[name=pwd]").val().trim() == 0){
            $("input[name=pwd]").focus();
        } 
        else{
            $.ajax({ // 입력이슈가 발생하지 않는다면 ajax 요청
                url: '${contextPath}/login', //EL문법을 이용하여 경로지정, 
                                             // login Servlet으로 데이터 전송.
                method:'post', // post 방식으로 요청.
                data:$('form').serialize(), // form 태그안에 있는 입력된 값을 싹 긁어 전송. 
                                // 데이터 전달을 위해 name 속성을 꼭 작성해야한다.(다음게시물에서 설명)
                success: function(data){
                    var jsonObj = JSON.parse(data);
                    var msg = jsonObj.id + "님 로그인 ";
                    if(jsonObj.status == 1){ // 로그인 여부를 판단해주는 Service에서 설정한 status 
                                             //값이 1이면 로그인 성공. (다음게시물에서 설명)
                        msg += "성공";
                            location.href='${contextPath}/main/main.jsp';
                        alert(msg);
                    }else {
                        msg += "실패";
                        alert(msg);
                    }
                }
            });
         } 
        return false;
    });
});    
</script>
 
<div style="text-align: center;">
<form>
    <div>
        아이디 &nbsp;&nbsp; 
        <input type="text" placeholder="아이디를 입력하세요."  name="id" id="idid" 
        style="height: 30px; margin-left: 30px;"/>
    </div>
    <br>
    <div>
        비밀번호 &nbsp;&nbsp;
        <input type="password" placeholder="비밀번호를 입력하세요." name="pwd" 
        style="height: 30px; margin-left: 15px;"/>
    
    </div>
    <br>
    <div>
        <button type="submit" id="loginbtn">로그인</button>&nbsp;&nbsp;
        <button>회원가입</button>
    </div>
    </form>
</div>
 cs

 

join.jsp

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:set var="contextPath" value="${pageContext.request.contextPath}"/>
<script>
$(function() {
       var $idObj = $("input[name=id]");
       var $submitObj = $("input[type=submit]");
       $submitObj.hide();
       
       $submitObj.click(function() {
        // 비밀번호 + 비밀번호 확인 검사
          if ( $("input[name=pwd]").val() != $("input[name=pwd1]").val()){ 
             alert("비밀번호가 일치하지 않습니다");
             return false;
          }
          $.ajax({
             url : '${contextPath}/join',
             method : 'POST',
             data : $("#joinform").serialize(),
             success : function(data) {
                var jsonObj = JSON.parse(data);
                if (jsonObj.status == 1) {
                      alert("회원가입 완료");
                   // 트리거이벤트 메인화면으로
                   var $main = $("#HOME");
                   $main.trigger('click');
                } else {
                   alert("필수 항목을 입력해 주세요!");
                }
             }
          });
          return false;
       });
       
       var $dupchkObj =  $("#dupchk");
       $dupchkObj.click(function(){ // 아이디 중복검사
          $.ajax({
             url:'${contextPath}/dupchk',
             method:'post',
             data:'id='+$("input[name=id]").val(),
             success:function(data){
                var jsonObj = JSON.parse(data);
                if(jsonObj.status == 1){
                   alert("사용할 수 있는 아이디 입니다");
                   $submitObj.show();                   
                }
                else if(jsonObj.status == -1){
                   alert("중복된 아이디 입니다 !!");
                   return false;
                }
             }
          });
       });
 
       var $searchZipObj = $("#searchZip");
       $searchZipObj.click(function() { // 우편번호 검색버튼 클릭
          $("#divSearchZip").show();
       });
       
       $("#divSearchZip form").submit(function(){ // 우편번호 검색 세부창
          $.ajax({
          url : '${contextPath}/searchzip',
          method : 'POST',
          data : 'doro='+ $("#divSearchZip .search_pop input[type=text]").val(),
          success : function(data) {
             var jsonObj = JSON.parse(data);
             var trs = "<tr><th>우편번호</th><th>주소</th></tr>";
             for (var i = 0; i < jsonObj.length; i++) {
                trs += "<tr id="+jsonObj[i].buildingno+"><td>"
                      + jsonObj[i].zipcode
                      + "</td>"
                      + "<td><div>"
                      + jsonObj[i].doroaddr
                      + "</div>"
                      + "<div>"
                      + jsonObj[i].buildingaddr
                      + "</div></td></tr>";
             }
             $("#divSearchZip>div>table").html(trs);
          }
          });
          return false;
       });
        // 검색 후 원하는 주소 클릭했을떄 값을 가져오는 기능.
       $("#divSearchZip>div>table").on("click","tr:not(:first-child)", function() {
             var children = $(this).children();
             var zipcode = children.eq(0).html();
             var doroaddr = children.find("div:first-child");
 
             $("input[name=zipcode]").val(zipcode);
             $("input[name=addr1]").val(doroaddr.html());
 
             $("#divSearchZip").hide();
             $("input[name=buildingno]").val($(this).attr("id"));
             console.log("빌딩번호 : " + $("input[name=buildingno]").val());
       });
       
       $("input[name=cancel]").click(function(){ // 취소버튼 클릭
          var $main = $("#HOME");
          $main.trigger('click');
       });
    });
</script>    
<style>
#divSearchZip {
   display: none;
}
 
#divSearchZip {
   padding: 8px;
   width: 300px;
   height: 300px;
   position: absolute;
   top: 150px;
   left: 750px;
   border: 1px solid transparent;
   background-color: #F5EDED;
}
 
#divSearchZip .search_pop input[type=text] {
   width: 80%;
   height: 36px;
   font-size: 14px;
   line-height: 16px;
   padding: 8px;
   margin: 0px;
   border: 2px solid #ee2e24;
   box-sizing: border-box;
   float: left;
}
 
#divSearchZip .search_pop button {
   width: 20%;
   height: 36px;
   background-color: #ee2e24;
   font-size: 14px;
   color: #fff;
   font-weight: bold;
   text-align: center;
   line-height: 32px;
   display: block;
   padding: 0px;
   margin: 0px;
   border: 0px;
   border: 2px solid #ee2e24;
   box-sizing: border-box;
   float: left;
}
 
#divSearchZip table {
   width: 100%;
   padding: 0px;
   margin: 10px 0px 20px 0px;
   border-bottom: 2px solid #888;
   color: #707070;
}
 
#divSearchZip tr:not (:first-child ):hover {
   cursor: pointer;
   font-weight: bold;
}
 
th, td {
   vertical-align: middle;
}
 
#divSearchZip>div {
   clear: both;
   overflow: auto;
   height: 80%;
}
</style>
<form id="joinform">
   <div>
      <div></div>
      <div class="joinTitle">
         <!-- 회원가입 텍스트 -->
         <div>
            <h2 style="margin-left: 230px;">회원 가입</h2>
         </div>
      </div>
      <!-- 회원가입 텍스트 -->
 
      <!-- <h4 style="margin : 20px 0 10px 5px; margin-left: 230px;" >필수 입력 정보</h4> -->
      <p class="required" style="text-align: right;  margin-right: 160px;">
         <font size="1px;">필수입력사항</font><img src="../images/ico_required.gif" alt="required Field">
      </p>
 
      <div class="joinInputArea">
         <!-- 가입 영역 -->
         <!-- 비밀번호 힌트 추가 ? -->
         <table width="940" style="padding: 5px 0 5px 0;" align="center">
 
            <tbody>
               <tr height="2" bgcolor="#FFC8C3">
                  <td colspan="2"></td>
               </tr>
               <tr>
               <tr>
                  <th scope="row">아이디 <img src="../images/ico_required.gif"
                     alt="required Field">
                  </th>
                  <td><input type="text" name="id" maxlength="16" required>
                     <button type="button" id="dupchk">중복확인</button>
                     <span style="font-size: 10px; margin-left: 7px; font-weight: bold;">
                     <img src="../images/ico_required.gif" alt="required Field">
                     중복확인을 성공해야 회원가입 버튼이 생성됩니다.</span></td>
               </tr>
 
               <tr>
                  <th scope="row">비밀번호 <img src="../images/ico_required.gif"
                     alt="required Field">
                  </th>
                  <td><input type="password" name="pwd" maxlength="16" required>
                  <span style="font-size: 10px; margin-left: 7px; font-weight: bold; margin-left: 83px;">
                     <img src="../images/ico_required.gif" alt="required Field">
                     중복확인 후에는 아이디를 수정할 수 없습니다.</span>
                  </td>
               </tr>
               
               <tr>
                  <th scope="row">비밀번호 확인 <img src="../images/ico_required.gif"
                     alt="required Field">
                  </th>
                  <td><input type="password" name="pwd1" maxlength="16"
                     required></td>
               </tr>
                <tr>
                  <th scope="row">이름 <img src="../images/ico_required.gif"
                     alt="required Field">
                  </th>
                  <td><input type="text" name="name" maxlength="16" required>
                     <br></td>
               </tr>
               <tr>
                  <th scope="row">주소 <img src="../images/ico_required.gif"
                     alt="required Field">
                  </th>
                  <td><input type="text" name="zipcode" readonly name="zipcode">
                     <button type="button" id="searchZip">우편번호 검색</button></td>
               </tr>
 
               <tr>
                  <th></th>
                  <td><input type="text" name="addr1" readonly name="addr1"
                     style="width: 270px;"></td>
               </tr>
 
               <tr>
                  <th></th>
                  <td><input type="text" name="addr2" style="width: 270px;" placeholder="나머지 주소"></td>
               </tr>
 
               <tr height="2" bgcolor="#FFC8C3">
                  <td colspan="2"></td>
               </tr>
               <tr>
                  <td colspan="2" align="center"><br> <input type="submit"
                     value="가입완료"> <input type="button" name="cancel"
                     value="취소"> <input type="hidden" name="buildingno"
                     value=""></td>
               </tr>
         </table>
      </div>
   </div>
</form>
<%-- 우편번호 찾기 영역 --%>
 
<div id="divSearchZip">
   <form>
      <div class="search_pop">
         <input type="text" placeholder="도로명 + 건물번호">
         <button>검색</button>
      </div>
 
   </form>
   <div>
      <table></table>
   </div>
</div>
 cs

 

아마 위의 코드만 붙여넣기한다면 Servlet, Service, dao 가 없어 에러가 날 것입니다. 

당장 회원가입, 로그인 기능이 필요하신분들은 아래의 war 파일을 사용하시면 될 것 같습니다.

HomeEx.war
4.11MB

 

2019/09/01 - [꿀팁] - eclipse 프로젝트 war파일로 import, export 하기

 

다음 게시물에서 이어서 진행하겠습니다.

오늘은 여기까지입니다 감사합니다 !

 

 

 

'웹 프로그래밍' 카테고리의 다른 글

Spring에서 Servlet 매핑하기  (0) 2019.09.03
Spring - Maven 프로젝트 생성 및 설정  (0) 2019.09.03
Javascript의 문서객체모델(DOM)  (0) 2019.07.13
Javascript addEventListener를 이용한 간단한 계산기 만들기  (0) 2019.07.13
HTML Tables  (0) 2019.07.08
반응형

안녕들 하시죠 !

이번시간에는 자바스크립트의 문서 객체 모델(DOM)에 대해 알아보겠습니다.

 

문서 객체 모델(Document Object Model)

HTML 문서에 접근하고 그 안에 내용물을 마음대로 바꾸거나 새로운 객체를 직접 만들어 문서의 원하는 부위에 삽입 삭제를 할 수 있다.

 

참조 https://poiemaweb.com/js-dom

 

DOM 트리의 노드

 

문서 노드(Document Node)

트리의 최상위에 존재하며 각각 요소, 어트리뷰트, 텍스트 노드에 접근하려면 문서 노드를 통해야 한다. 즉, DOM tree에 접근하기 위한 시작점(entry point)이다.

 

요소 노드(Element Node)

요소 노드는 HTML 요소를 표현한다. HTML 요소는 중첩에 의해 부자 관계를 가지며 이 부자 관계를 통해 정보를 구조화한다. 따라서 요소 노드는 문서의 구조를 서술한다고 말 할 수 있다. 어트리뷰트, 텍스트 노드에 접근하려면 먼저 요소 노드를 찾아 접근해야 한다. 모든 요소 노드는 요소별 특성을 표현하기 위해 HTML Element 객체를 상속한 객체로 구성된다. (그림: DOM tree의 객체 구성 참고)

 

어트리뷰트 노드(Attribute Node)

어트리뷰트 노드는 HTML 요소의 어트리뷰트를 표현한다. 어트리뷰트 노드는 해당 어트리뷰트가 지정된 요소의 자식이 아니라 해당 요소의 일부로 표현된다. 따라서 해당 요소 노드를 찾아 접근하면 어트리뷰트를 참조, 수정할 수 있다.

 

텍스트 노드(Text Node)

텍스트 노드는 HTML 요소의 텍스트를 표현한다. 텍스트 노드는 요소 노드의 자식이며 자신의 자식 노드를 가질 수 없다. 즉, 텍스트 노드는 DOM tree의 최종단이다.

참조 https://poiemaweb.com/js-dom

 

DOM | PoiemaWeb

브라우저는 웹 문서(HTML, XML, SVG)를 로드한 후, 파싱하여 DOM(문서 객체 모델. Document Object Model)을 생성한다. 파일로 만들어져 있는 웹 문서를 브라우저에 렌더링하기 위해서는 웹 문서를 브라우저가 이해할 수 있는 구조로 메모리에 올려야 한다. 브라우저의 렌더링 엔진은 웹 문서를 로드한 후, 파싱하여 웹 문서를 브라우저가 이해할 수 있는 구조로 구성하여 메모리에 적재하는데 이를 DOM이라 한다. 즉, 모든 요소와 요소의

poiemaweb.com

 

document 객체

document 객체는 window 객체에 포함되며 특정한 엘리먼트들을 포함하고 있다.

주로 문서유형, 색깔, 포맷과 같은 문서 정보에 접근하는 방법을 제공하고있다.

ex) document.body 속성으로 <body> 엘리먼트에 접근할 수 있다.

 

document 객체의 메서드

getElementById("엘리먼트 id") : id 속성이 일치하는 하나의 엘리먼트를 반환한다.

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
 
function selectId(){    
    var getId = document.getElementById("a"); // 변수 getId에 a라는 Id를 가진 엘리먼트를 가져와라.
    getId.style.backgroundColor = "yellow"; // getId가 가지고 있는 엘리먼트의 배경색을 yellow로 바꿔라.
}
 
</script>
</head>
<body>
<button onclick = "selectId();">id 'a'인 객체 선택하기</button> <!-- 버튼을 클릭하면 selectId 함수 실행 -->
<div>
<span id="a">1번</span>&nbsp;&nbsp;
<span id="b">2번</span>&nbsp;&nbsp;
<span id="c">3번</span>&nbsp;&nbsp;
</div>
</body>
</html>
 cs

 

버튼 클릭 후 

document.createElement("엘리먼트 이름")

새로운 엘리먼트를 생성한다.

 

document.querySelector("CSS 선택자")

특정 엘리먼트 속성등의 정보를 얻기위해 사용하는 document 객체의 메서드.

 

document.ElementsByTagName("엘리먼트 이름")

태그 이름이 일치하는 모든 엘리먼트를 배열의 형태로 반환.

 

document.ElementsByName("name 속성값") 

id 대신 name을 사용하지만 name은 중복 가능하므로 위에있는 ByTagName처럼 배열 형태로 저장됨.

 

document.write()

문서에 내용을 추가한다.

 

document.createTextNode('텍스트')

새로운 텍스트 노드를 생성한다.

 

 

 

'웹 프로그래밍' 카테고리의 다른 글

Spring - Maven 프로젝트 생성 및 설정  (0) 2019.09.03
Jsp/Servlet을 이용한 개인 홈페이지 만들기(로그인, 회원가입,중복체크) -- 1  (0) 2019.09.01
Javascript addEventListener를 이용한 간단한 계산기 만들기  (0) 2019.07.13
HTML Tables  (0) 2019.07.08
Apache Tomcat 설치  (0) 2019.07.08
반응형

안녕들 하시죠!

얼마전부터 javascript 공부를 시작했는데요.

이번시간에는 javascript를 이용하여 간단한 계산기를 만들어보며 핵심 기능들을 알아보겠습니다.

 

elementObj.addEventListener(  "이벤트 이름", Fucntion(){}  );

특정 이벤트가 발생 했을 시 특정 함수를 실행할 수 있게 해주는 기능

 

사용할 이벤트 종류

click   :   변동이 있을 때 발생.

load   :   HTML문서나 이미지 등을 불러올 때 발생.

 

querySelector("CSS 선택자");

특정 엘리먼트 속성등의 정보를 얻기위해 사용하는 document 객체의 메서드.

 

ex) var element = document.querySelector("div");

     var elements = document.querySelector("CSS 선택자");

 

- 태그 : 엘리먼트의 태그 이름을 기준으로 검색.

- #아이디 : 엘리먼트의 속성 중 id 속성으로 검색.

- .클래스 : 엘리먼트의 속성 중 className 속성으로 검색.

- [속성=속성값] : 엘리먼트의 특정 속성을 지정하여 해당 속성의 값을 비교하여 검색.

 

<body>

1
2
3
4
5
6
7
8
9
10
11
<body>
 
    <input type="number" id="a"> <!-- a라는 id를 가진 number 타입의 엘리먼트  -->
    <br>
    <input type="number" id="b">
    <br>
    <button id="plus">+</button> <!-- plus라는 id를 가진 button 생성 -->
    <button id="minus">-</button>
    <div>결과</div> <!--  계산결과를 나타내는 div 영역 -->
 
</body>
 cs

 

아래와 같은 UI 생성.

 

<script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<script type="text/javascript">
    addEventListener("load", function() {
 
        var aObj = document.querySelector("#a"); // 변수 aObj에 a라는 id를 가진 입력 엘리먼트를 대입.
        var bObj = document.querySelector("#b");
        var divObj = document.querySelector("div"); // 변수 divObj에 CSS div영역을 대입.
 
        var plusObj = document.querySelector("#plus"); // 변수 plusObj에 plus라는 id를 가진 버튼 엘리먼트를 대입.
        plusObj.addEventListener("click", function() { // plus 버튼을 click 했을때 발생하는 이벤트 작성부.
 
            divObj.innerHTML = parseInt(aObj.value) + parseInt(bObj.value);
            // aObj 와 bObj의 값을 정수형으로 바꿔준 후 div영역에 HTML 코드를 삽입하는 부분.
        });
 
        var minusObj = document.querySelector("#minus");
        minusObj.addEventListener("click", function() {
 
            divObj.innerHTML = parseInt(aObj.value) - parseInt(bObj.value);
 
        });
    });
</script>
 cs

 

 

 

 

실행결과

전체코드

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>caltest</title>
<script type="text/javascript">
    addEventListener("load", function() {
 
        var aObj = document.querySelector("#a"); // 변수 aObj에 a라는 id를 가진 입력 엘리먼트를 대입.
        var bObj = document.querySelector("#b");
        var divObj = document.querySelector("div"); // 변수 divObj에 CSS div영역을 대입.
 
        var plusObj = document.querySelector("#plus"); // 변수 plusObj에 plus라는 id를 가진 버튼 엘리먼트를 대입.
        plusObj.addEventListener("click", function() { // plus 버튼을 click 했을때 발생하는 이벤트 작성부.
 
            divObj.innerHTML = parseInt(aObj.value) + parseInt(bObj.value);
            // aObj 와 bObj의 값을 정수형으로 바꿔준 후 div영역에 HTML 코드를 삽입하는 부분.
        });
 
        var minusObj = document.querySelector("#minus");
        minusObj.addEventListener("click", function() {
 
            divObj.innerHTML = parseInt(aObj.value) - parseInt(bObj.value);
 
        });
    });
</script>
 
</head>
<body>
 
    <input type="number" id="a">
    <!-- a라는 id를 가진 number 타입의 엘리먼트  -->
    <br>
    <input type="number" id="b">
    <br>
    <button id="plus">+</button>
    <!-- plus라는 id를 가진 button 생성 -->
    <button id="minus">-</button>
    <div>결과</div>
    <!--  계산결과를 나타내는 div 영역 -->
 
</body>
</html>
 cs

 

오늘은 여기까지입니다 감사합니다!

 

참고서적 김천호 「No More Copy&Paste 자바스크립트」

'웹 프로그래밍' 카테고리의 다른 글

Jsp/Servlet을 이용한 개인 홈페이지 만들기(로그인, 회원가입,중복체크) -- 1  (0) 2019.09.01
Javascript의 문서객체모델(DOM)  (0) 2019.07.13
HTML Tables  (0) 2019.07.08
Apache Tomcat 설치  (0) 2019.07.08
HTML 기본 태그  (0) 2019.07.08
반응형

안녕들 하시죠!

이번시간에는 HTML로 테이블을 만들어보겠습니다.

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td> 
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td> 
    <td>94</td>
  </tr>
 cs

 

 

이런식으로 출력됩니다.

테이블 사이에 선을 추가해 주려면 <head></head>에 border 스타일을 추가해줍니다.

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<html>
<head>
<title>Table Ex</title>
 
<style>
table, th, td {
  border: 1px solid black;
}
</style>
 
</head>
<body>
 
<table style="width:5%;">
   <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td> 
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td> 
    <td>94</td>
  </tr>
 
</body>
</html>
 
 cs

 

 

 

 

 

2개의 선이 아닌 깔끔한 1개의 선으로 테이블을 만들고 싶다면 collapse를 추가해줍니다.

 

1
2
3
4
5
6
<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
</style>
 cs

 

 

HTML rowspan

테이블에서 열을 합칠 때 사용합니다.

 

1
<th rowspan ="2">Firstname</th>
 cs

 

Fisrtname 만 rowspan을 사용해보겠습니다.

 

이런식으로 열이 합쳐지게됩니다.

조금 깔끔하게 만들어 보겠습니다.

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<table style="width:5%;">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td >Jill </td>
    <td>Smith</td> 
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td> 
    <td>94</td>
  </tr>
 
<tr>
    <th rowspan="2">Steven</th>
    <th rowspan="2">King</th>
    <td>10</td>
  </tr>
<tr>
   <td>33</td>
</tr>
 cs

 

이런식으로 열을 합하거나 colspan을 사용하여 행을 합하여 사용하면 될 것 같습니다.

오늘은 여기까지입니다 감사합니다 !

'웹 프로그래밍' 카테고리의 다른 글

Jsp/Servlet을 이용한 개인 홈페이지 만들기(로그인, 회원가입,중복체크) -- 1  (0) 2019.09.01
Javascript의 문서객체모델(DOM)  (0) 2019.07.13
Javascript addEventListener를 이용한 간단한 계산기 만들기  (0) 2019.07.13
Apache Tomcat 설치  (0) 2019.07.08
HTML 기본 태그  (0) 2019.07.08

+ Recent posts

티스토리툴바