1. 원하는 데이터 조회하기


1
SELECT First_name, Last_name , DEPARTMENT_ID FROM EMPLOYEES WHERE DEPARTMENT_ID= 60;
cs



2. BETWEEN 연산자 


1
SELECT First_name, Last_name , SALARY FROM EMPLOYEES WHERE SALARY BETWEEN 5000 AND 10000;
cs




3. IN연산자 


1
SELECT First_name, Last_name FROM EMPLOYEES WHERE FIRST_NAME IN ('John' , 'Luis');
cs


4. 

4. LIKE 연산자 (주로 검색에 활용함)


 LIKE 연산자에는 % 와 _ 두가지가 있는데 

% : 글자수 제한없이 검색

_ : 글자수는 한 글자만 검색


1
SELECT First_name, Last_name FROM EMPLOYEES WHERE FIRST_NAME LIKE ('A%');
cs



1
SELECT First_name, Last_name FROM EMPLOYEES WHERE FIRST_NAME LIKE ('A__t');
cs





5. 여러 검색 조건을 한번에 검색할 때


1
SELECT First_name, Last_name ,SALARY,DEPARTMENT_ID  FROM EMPLOYEES WHERE SALARY > 5000 AND DEPARTMENT_ID= 60;
cs






6. ORDER BY 절을 이용해 정렬하기

* 문장의 마지막에 작성해야함
디폴트 값은 ASC
 ASC (오름차순) 
DESC( 내림차순)

1
SELECT First_name, Last_name , SALARY FROM EMPLOYEES WHERE SALARY > 5000 ORDER BY  SALARY DESC;
cs

 



'데이터베이스 > Oracle' 카테고리의 다른 글

4. 오라클 (숫자관련 함수)  (0) 2018.02.20
3. 오라클 기초 (문자함수)  (0) 2018.02.18
1. 오라클 기초 익히기  (0) 2018.02.18
2. 가상 컬럼 만들기  (0) 2018.02.16
1. 테이블 복사하기  (0) 2018.02.16

1. 테이블 구조 파악하기

1
DESC EMPLOYEES;
cs


2. 데이터 조회하기

1
SELECT * FROM EMPLOYEES;
cs




3. 특정 데이터 조회하기

1
SELECT First_name, Last_name , Email FROM EMPLOYEES;
cs



4. 컬럼 대신 문자 사용하기


1
SELECT First_name, Last_name , 'Hello~~' FROM EMPLOYEES;
cs



5. 컬럼 별칭 사용하기


1
SELECT First_name AS "성", Last_name AS "이름" FROM EMPLOYEES;

cs





6. 연결 연산자로 컬럼 붙이기

1
SELECT First_name || Last_name   FROM EMPLOYEES;
cs




7. 중복 데이터 제거 후 출력


1
SELECT distinct department_id from EMPLOYEES;
cs






'데이터베이스 > Oracle' 카테고리의 다른 글

4. 오라클 (숫자관련 함수)  (0) 2018.02.20
3. 오라클 기초 (문자함수)  (0) 2018.02.18
2. 오라클 기초 익히기 (WHERE)  (0) 2018.02.18
2. 가상 컬럼 만들기  (0) 2018.02.16
1. 테이블 복사하기  (0) 2018.02.16

우선 설명부터 하자면 

이런식으로 판매가 데이터를 입력하고 수량 데이터를 입력하면 합계에는 수식만 걸어두는 계산되게 하는 하는것이라

이해하면 될것같다


우선 테이블을 먼져 생성해보자

1
2
3
4
CREATE table vtb_01(
    no1 NUMBER,
    no2 NUMBER,
    no3 NUMBER GENERATED ALWAYS AS (no1 * no2) VIRTUAL);
cs

위 엑셀 처럼 no1이 판매가라 생각하고 no2는 수량 이라생각하고 no3컬럼에 두개의 곱을 계산하여 넣게 하기위해 테이블을 만들었다.

1
INSERT into tvb_01 VALUES (1000,2,2000);

cs 


만약 이렇게 no3 컬럼에 까지 값을 넣으려한다면


이렇게 에러를 발생시킬 것이다..


1
INSERT INTO vtb_01 (no1,no2) VALUES (2000,1);
cs

no1 no2 컬럼에 데이터만 입력하고  조회를 해보면


이렇게 no3 컬럼에 곱해서 잘 들어가는것을 볼수있다.


1
update vtb_01 set no1 = 3000;
cs

만약 데이터를 수정한다면 no3의 값 또한 변경되는 것을 확인 할 수 있다.









'데이터베이스 > Oracle' 카테고리의 다른 글

4. 오라클 (숫자관련 함수)  (0) 2018.02.20
3. 오라클 기초 (문자함수)  (0) 2018.02.18
2. 오라클 기초 익히기 (WHERE)  (0) 2018.02.18
1. 오라클 기초 익히기  (0) 2018.02.18
1. 테이블 복사하기  (0) 2018.02.16

기존 테이블


1
2
3
4
5
6
7
8
9
10
CREATE TABLE CRUD
(
    CRNO            INT               NOT NULL
    CRTITLE         VARCHAR2(255)     NULL
    USERNO          INT               NULL
    CRMEMO          VARCHAR2(1000)    NULL
    CRDATE          DATE              NULL
    CRDELETEFLAG    CHAR(1)           NULL
    CONSTRAINT CRUD_PK PRIMARY KEY (CRNO)
)
cs



1. 모든 컬럼 및 데이터 복사하기


1
2
3
4
CREATE TABLE CRUD1
 AS 
SELECT * FROM CRUD
 
cs



2. 특정 컬럼 만 복사하기


1
2
3
4
5
CREATE TABLE CRUD2
 AS 
SELECT CRTITLE , CRMEMO
FROM CRUD
 
cs



3. 테이블 구조만 가져오고 데이터는 안가져오기


1
2
3
4
CREATE TABLE CRUD3
AS
SELECT * FROM CRUD
WHERE 1=2;
cs


컬럼은 그대로 가져왔는데 데이터는 없다!!

'데이터베이스 > Oracle' 카테고리의 다른 글

4. 오라클 (숫자관련 함수)  (0) 2018.02.20
3. 오라클 기초 (문자함수)  (0) 2018.02.18
2. 오라클 기초 익히기 (WHERE)  (0) 2018.02.18
1. 오라클 기초 익히기  (0) 2018.02.18
2. 가상 컬럼 만들기  (0) 2018.02.16

1. w3schools

https://www.w3schools.com/html/



대중적으로 이용하는 사이트 이다 . 단계별로 기초부터 잘 정리되어있고 예제가 어렵지 않아 영어로 되어있긴하나

어렵지 않습니다.


2. poiemaweb

http://poiemaweb.com/



이론부터 자세하게 설명되어있고 UI/UX가 잘 되어있다 ㅎㅎ 

무엇보다 가장 큰 장점은 한글로 되어있다 ㅎㅎ 



추가적으로 

jsbin

http://jsbin.com/?html,css,output


텍스트 에디터를 설치하여 연습해도 되지만 정말 프로그램 처음 완전 처음 시작하신다면  JSBIN을 추천드립니다.


로그인이 필요없으며 ,우측 상단에 Run with JS 버튼을 누르면  작성된 내용이 바로 출력 되는점이 매력이다.


'웹 프론트엔드 > HTML' 카테고리의 다른 글

1강 HTML5  (0) 2018.02.04
웹 디자인 Text 에디터  (0) 2018.02.04

설 연휴가 시작 되었습니다. 모두 새해 복 많이 받으세요 ~~~~~


오늘은 게시판 글 작성하기입니다.


제목, 내용을 입력하고 데이터베이스에 저장하기 입니다.



1
2
3
4
5
6
7
8
9
10
11
12
13
14
CREATE TABLE `tbl_notice` (
    `nno` INT(11) NOT NULL AUTO_INCREMENT COMMENT 'pk',
    `ntitle` VARCHAR(200) NULL DEFAULT NULL COMMENT '제목',
    `ncontent` TEXT NULL DEFAULT NULL COMMENT '내용',
    `nwriter` VARCHAR(50) NULL DEFAULT NULL COMMENT '작성자',
    `nrdate` TIMESTAMP NULL DEFAULT '',
    `nviewcnt` INT(11) NULL DEFAULT '',
    `nisdelete` CHAR(1) NULL DEFAULT 'N' COMMENT '삭제여부',
    PRIMARY KEY (`nno`)
)
cs


테이블을 이렇게 생성해주세요 


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
<body>
<div class="page-wrapper">
    <div class="container-fluid">
        <div class="col-lg-8"><!--게시판 넓이 -->
            <div class="col-lg-12">
                <h1 class="page-header">공지사항 관리</h1>
            </div>
            <div class="row">
                  <div class="col-lg-12">
                  
                  </div>
              </div>
            <div class="panel panel-default">
                <div class="panel-heading">공지사항 </div>
                <div class="panel-body">
                    <form id="boardFrm" name="boardFrm" action="/board/boardSave.do" method="post">
                        <div class="row form-group">
                            <label class="col-lg-2">제목</label>
                            <div class="col-lg-8">
                                <input type="text" class="form-control" id="ntitle" name="ntitle" min="1" max="3">
                             </div>
                        </div>
                           <div class="row form-group">
                           <label class="col-lg-2">내용</label>
                           <div class="col-lg-8">
                               <textarea class="form-control" id="ncontent" name="ncontent"></textarea>
                           </div>
                       </div>
                  </form>
                       <button class="btn btn-outline btn-info" onclick="fn_MoveToUrl('/board/boardSave.do','저장')">저장하기</button>
                          <button class="btn btn-outline btn-primary" onclick="location.href='/board/boardList.do'">리스트</button>
                </div>
            </div>
        </div>
    </div>
</div>
cs



Contoller

1
2
3
4
5
6
7
8
9
10
11
12
    @RequestMapping(value="/boardWrite.do", method=RequestMethod.GET)
    public String boardWrite() {
        return "board/boardwrite";
    }
    
    @RequestMapping(value="/boardSave.do", method=RequestMethod.POST)
     public String boardSave(BoardVO boardVO) {
        
        service.boardSave(boardVO);
        
        return "redirect:boardList.do";
    }
cs


우선 게시판 작성 화면을 띄여줄 boardWrite.do 

저장처리를 할 boardSave.do 


이제 Service/DAO단은 생략하겠습니다.  :D (앞부분 부터 보셨다면 이제 익술해지셨으리라ㅎㅎㅎ)

이후에 게시판 작성과, 수정? 한번에 처리하기 에서 서비스단이랑 DAO단은 다시 다루겠으니

이번엔 생략하겠습니다.


1
2
3
4
5
6
7
8
9
10
11
12
<insert id="boardSave">
            INSERT INTO tbl_notice(
                ntitle,
                ncontent,
                nwriter
            )VALUES(
                #{ntitle},
                #{ncontent},
                '관리자'
            )
                
</insert>
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
<script type="text/javascript">
    function fn_MoveToUrl(url,msg){
        var ntitle = $("#ntitle").val();
        var ncontent = $("#ncontent").val();
        
        if(ntitle.length == 0){
             alert("제목을 입력해 주세요");  
            $("#ntitle").focus();
            return false;
    
        }
        
        if(ncontent.length == 0){
             alert("내용을 입력해 주세요");  
            $("#ncontent").focus();
            return false;
        }
        
        if(msg){
            if(confirm(msg + "하시겠습니까???"))
            $("#boardFrm").submit();
            return;
        }
        location.href=url;
    }
</script>
cs


우선 공백 확인을 하고 

fn_MoveToUrl('/board/boardSave.do','저장')

fn_MoveToUrl 에 Url과 msg 두개의 두개의 매개변수를 념겨줍니다.

그럼 msg = 저장 + 하시겠습니까 의 alert메시지를 확인할 수 있어 편리합니다. 사실 따로 빼서 관리하면 

fn_MoveToUrl 를 써서 수정하시겠습니까 ? 삭제하시겠습니까? 자장하시겠습니까 ? 등 

메시지와 url을 사용할 수 있어 엄청 편합니다. ~ 


다음엔 게시글 상세조회 처리에대하여 올리겟습니다~


스타트업에 필수인 홈페이지 제작하기에 앞서 본인에게 맞는 홈페이지 제작해야 비용을 절약하거나 의미를 정확하게 

전달할 수 있다 생각합니다.


우선 홈페이지는 크게


1
홈페이지

cs


회사 조직 또는 개인 홈페이지로 가장 큰 의미라고 볼 수 있습니다.  일반적으로 브라우져에서 검색했을 때 클릭해서

들어가지는 페이지가 홈페이지라고 보시면 되겠습니다.  


회사를 검색했을 때 회사의 전반적인 내용들이 들어가게 됩니다. 기업정보라던지 , 채용정보 등?


2
Welcome Page
cs

두번째는 Welcome Page(시작페이지)
웹의 접속자가 많을 때 주로 제작하며 , 빠르게 의미를 전달하기 위함입니다. 

보통 위에 이미지 처럼 기능위주로 강조 할 부분을 한페이지에 넣어서 제작을 합니다. 

장점은 제작비용이 아주 적거나 , 몇시간의 학습으로도 제작이 가능하다는 것입니다. 무료호스팅 업체도 많으니 

쉽고 간단하게 만들어 SNS를 활용하여 홍보하는 것도 좋은 방법일것 같습니다.


3
Landing page(랜딩 페이지)
cs


랜딩페이지는 홈페이지와 ,  Welcome Page 중간정도로 생각하시면 될것같습니다.

일반적으로 포탈이나 구글애드? 같은 광고를 클릭하여 사용자가 들어오는 페이지를 말합니다.

이는 고객으로 하여금 회사, 제품, 등을 소개하고 이용하게끔 하는 중간 다리역할을 하는 페이지라고 보시면 됩니다.

회사의 정보도 전달하며 , 상품광고까지하는 국내에 대부분 스타트업 예비창업자 분들이라면 랜딩페이지를 먼져 제작했을 것이라 생각됩니다. 비교적 제작이 간단하고 , 제작비용또한 저렴하여 예비창업자분들이 선호하는 페이지 입니다.




4
Web Page (웹 페이지)
cs

d
웹페이지는 상호 연결된 많은 웹 페이지 모음? 
서비스를 제공하기 위해 고객 정보를 수집하고 , 서비스를 제공하는 페이지?


사실 딱 나눠서 이거 만들겠다. 경계가 불분명한건 사실입니다. 나눠서 정리하는 저또한 정리가 잘 안되네요 ㅠㅠ
하지만 각각 사용하려는 목적은 분명합니다.  스타트업을 진행하시기 전 제가 추천드리는 것은
시작페이지 - 랜딩페이지 - 홈페이지 - 웹페이지  순으로 
간단한 페이지로 사용자로하여금 반응을 보고 순차척으로 진항하시는게 후에 서비스를 시작했을 때 불필요한
문제가 없다고 생각합니다. 우선 자신이 하고자 하는 서비스의 핵심시능이 무엇인지 , 우리회사는 어떤 회사인지,
정리하시면서 홈페이지 제작을 하시면 좋이리라 생각되어 정리해봤습니다. ㅠㅠ
부족하지만 많은 도움 되었으면 좋겠습니다 ~


'스타트업 > 기획' 카테고리의 다른 글

웹 기획 프로세스  (0) 2020.06.01

주말에 지방에 잠시다녀와 해산물을 좀 먹었더니 ㅠㅠ 장염에 걸려 조금 늦게 올렸습니다. ~ 

오늘은 아주 기본적인 게시판(공지사항) 만들기에대해 작성하겠습니다.


우선 게시판 폼을 디자인합니다~

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
<%@ 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">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<title>boardList</title>
</head>
<body>
<div class="page-wrapper">
    <div class="container-fluid">
        <div class="col-lg-8"><!--게시판 넓이 -->
            <div class="col-lg-12">
                <h1 class="page-header">공지사항 관리</h1>
            </div>
            <div class="row">
                  <div class="col-lg-12">
                      <button type="button" class="btn btn-outline btn-primary pull-right">
                          <i class="fa fa-edit fa-fw"></i> 공지사항 작성
                      </button>
                  </div>
              </div>
            <div class="panel panel-default">
                <div class="panel-heading">공지사항 </div>
                <div class="panel-body">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>No.1</th>
                                <th>제목</th>
                                <th>작성자</th>
                                <th>작성일</th>
                                <th>조회수</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>1</td>
                                <td>제목</td>
                                <td>작성자</td>
                                <td>작성일</td>
                                <td>조회수</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>
cs


VO


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//pk
    private Integer nno;
    //  제목
    private String ntitle;
    //  내용
    private String ncontent;
    //  작성자
    private String nwriter;
    //  작성일
    private Date nrdate;
    //  조회수
    private Integer nviewcnt;
    //  삭제여부
    private String nisdelete;
 
getter/setter ...
 
 
cs

저같은 경우에는 nrdate를 Date 타입으로 받았습니다.

이럴경우 

작성일 타입이 저렇게 출력이 됩니다 . 정상적으로 2018-02-13 21:04 이런식으로 출력하기 위해서는 

화변단에서 패턴을 사용해서 처리해야합니다.


1
2
3
4
5
6
7
8
9
10
11
12
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
//jstl 추가
 
 <c:forEach items="${list}" var="boardVO">
    <tr>
      <td>${boardVO.nno}</td>
      <td>${boardVO.ntitle}</td>
      <td>${boardVO.nwriter}</td>
      <td><fmt:formatDate pattern="yyyy-MM-dd HH:mm" value="${boardVO.nrdate}"/></td>
      <td>${boardVO.nviewcnt}</td>
     </tr>
</c:forEach>
cs

JSTL을 추가하고 fmt:formDate pattern을 사용해서 출력해야만 정상적으로 출력이 됩니다. 

또다른 방법은 


1
2
3
4
5
6
7
8
9
10
11
12
13
14
//pk
    private Integer nno;
    //  제목
    private String ntitle;
    //  내용
    private String ncontent;
    //  작성자
    private String nwriter;
    //  작성일
    private String nrdate;
    //  조회수
    private Integer nviewcnt;
    //  삭제여부
    private String nisdelete;
cs

nrdate를 String 타입으로 바꾸고 쿼리에서 처리하는 방법입니다.


1
2
3
4
SELECT
    nno,ntitle,ncontent,nwriter,date_format(nrdate,'%Y-%m-%d') nrdate,nviewcnt,nisdelete
FROM 
    tbl_notice
cs


date_format(nrdate,'%Y-%m-%d') nrdate 이렇게 쿼리에서 처리하는 방법또한 있으니 상황에 맞게 쓰시면 됩니다.


Controller

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
@Controller
@RequestMapping("/board/*")
public class BoardCotroller {
    
    @Inject
    private BoardService service;
 
    @RequestMapping(value="/boardList.do", method=RequestMethod.GET)
    public String boardList(BoardVO boardVO, Model model) {
        
        List<BoardVO> list = service.boardList(boardVO);
        model.addAttribute("list", list);
        
        return "board/boardlist";
    }
    
cs

리스트에 넣어서 화면으로 날려주고



Service


1
2
3
4
5
public interface BoardService {
    //게시판 리스트
    public List<BoardVO> boardList(BoardVO boardVO);
 
}
cs

ServiceImpl

1
2
3
4
5
6
7
8
9
10
@Service
public class BoardServiceImpl implements BoardService{
 
    @Inject
    private BoardDAO dao;
 
    @Override
    public List<BoardVO> boardList(BoardVO boardVO) {
        return dao.boardList(boardVO);
    }
cs


DAO

1
2
3
4
5
6
 
public interface BoardDAO {
    //게시판 리스트
    public List<BoardVO> boardList(BoardVO boardVO);
 
}
cs


DAOImpl

1
2
3
4
5
6
7
8
9
10
11
@Repository
public class BoardDAOImpl implements BoardDAO{
 
    @Inject
    private SqlSession session;
 
    @Override
    public List<BoardVO> boardList(BoardVO boardVO) {
        return session.selectList("boardList",boardVO);
    }
 
cs


BoardMapper


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<?xml version="1.0" encoding="UTF-8"?>
 
<!DOCTYPE mapper
  PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
  "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
  
<mapper namespace="board">
    
        <select id="boardList" resultType="com.sjh.board.BoardVO">
            SELECT
                 nno,ntitle,ncontent,nwriter,nrdate,nviewcnt,nisdelete
             FROM
                  tbl_notice
        </select>
        
      
</mapper>
cs


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
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c"      uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<title>boardList</title>
</head>
<body>
<div class="page-wrapper">
    <div class="container-fluid">
        <div class="col-lg-8"><!--게시판 넓이 -->
            <div class="col-lg-12">
                <h1 class="page-header">공지사항 관리</h1>
            </div>
            <div class="row">
                  <div class="col-lg-12">
                      <button type="button" class="btn btn-outline btn-primary pull-right">
                          <class="fa fa-edit fa-fw"></i> 공지사항 작성
                      </button>
                  </div>
              </div>
            <div class="panel panel-default">
                <div class="panel-heading">공지사항 </div>
                <div class="panel-body">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>No.1</th>
                                <th>제목</th>
                                <th>작성자</th>
                                <th>작성일</th>
                                <th>조회수</th>
                            </tr>
                        </thead>
                        <tbody>
                        <c:forEach items="${list}" var="boardVO">
                            <tr>
                                <td>${boardVO.nno}</td>
                                <td>${boardVO.ntitle}</td>
                                <td>${boardVO.nwriter}</td>
                                <td><fmt:formatDate pattern="yyyy-MM-dd HH:mm" value="${boardVO.nrdate}"/></td>
                                <td>${boardVO.nviewcnt}</td>
                            </tr>
                        </c:forEach>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>
cs


MVC를 기본적으로 이해하고 계시다면 어렵지 않은 부분입니다.

 model.addAttribute("list", list);분 DB에서 불러온 리스트를 모델에 넣어 jsp로 넘겨주고 JSP단에서는

JSTL을 forEach를 활용해서 리스트로 뿌져줬습니다.

JSTL을 사용하시기 위해서

<%@ taglib prefix="c"      uri="http://java.sun.com/jsp/jstl/core" %>  상단에 써주셔야합니다


아직 공지사항 작성을 하지 않았으니 임시로 데이터를 넣겠습니다

1
2
3
4
5
 INSERT INTO tbl_notice(ntitle,ncontent,nwriter    )
 values('반갑습니다 ','많은 이용 바랍니다.','관리자');
  
INSERT INTO tbl_notice(ntitle,ncontent,nwriter    )
values('공지사항 테스트 입니다 ','잘부탁드립니다.','관리자');
cs



서버를 재시작하여 확인하면 !!! 잘 출력됩니다.  조회수는 아직 처리하지 않았습니다. 다음 포스팅에서는 

조회수 처리와 공지사항 작성에대해 올리겠습니다.~


저도 Ajax는 아직 완벽하게 이해한게 아니라 시간이 좀 걸렸네요 ㅠㅠ 400에러 404에러 415에러 500에러 

안본게 없네요 ㅎㅎ


부족하더라도 정리해보겠습니다. ~


우선 동기와 비동기 방식이 있는데 음.. 

이해하기 쉽게 설명드리자면 .. 음 동기는 이어달리기 ? 비동기는 그냥 달리기 시합 이라고 생각하시면 

쉬울것같아요 

동기방식은 요청이 들어오면 응답을 받기전까지 다음 요청을 처리하지 않습니다. 

이어달리기에서 바톤을 받아야 다음 주자가 뛸 수 있는것과 비슷하죠 ??ㅎㅎㅎ

비동기는 그냥 달리기 시합과 같습니다 ~

그냥 다같이 뛰는거죠 먼져 도착한사람이 먼져 응답을 주는 식? 이렇게 하면 이해가 쉽겟죠 ?

흔한 예제에서는 

은행 업무를 많이 들고 있습니다.  

나의 잔고가 10만원인데 . 친구에게 10만원을 입금해줍니다. 그런데 중간에 자동이체로 후르륵 빠져나가면

큰일 나겠죠 ? 그래서 이럴땐 10만원이 이체완료 후에 자동이체가 진행되는 동기 방식을 쓰는거죠 

비동기는 엄청나게 매력적이에요 node.js를 잠깐 해봤는데 단일 페이지에서 이것저것 하는것은 

사용자로 하여금 엄청나게 매력을 줍니다 ㅠㅠ 하지만 저는 이게 왜이렇게 어려운지 한번만 이해하면 쉽다고하는데

ㅠㅠ 각설하고 코드로 설명드리겠습니다.


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
<script type="text/javascript">
//아이디 체크여부 확인 (아이디 중복일 경우 = 0 , 중복이 아닐경우 = 1 )
var idck = 0;
$(function() {
    //idck 버튼을 클릭했을 때 
    $("#idck").click(function() {
        
        //userid 를 param.
        var userid =  $("#userid").val(); 
        
        $.ajax({
            async: true,
            type : 'POST',
            data : userid,
            url : "idcheck.do",
            dataType : "json",
            contentType: "application/json; charset=UTF-8",
            success : function(data) {
                if (data.cnt > 0) {
                    
                    alert("아이디가 존재합니다. 다른 아이디를 입력해주세요.");
                    //아이디가 존제할 경우 빨깡으로 , 아니면 파랑으로 처리하는 디자인
                    $("#divInputId").addClass("has-error")
                    $("#divInputId").removeClass("has-success")
                    $("#userid").focus();
                    
                
                } else {
                    alert("사용가능한 아이디입니다.");
                    //아이디가 존제할 경우 빨깡으로 , 아니면 파랑으로 처리하는 디자인
                    $("#divInputId").addClass("has-success")
                    $("#divInputId").removeClass("has-error")
                    $("#userpwd").focus();
                    //아이디가 중복하지 않으면  idck = 1 
                    idck = 1;
                    
                }
            },
            error : function(error) {
                
                alert("error : " + error);
            }
        });
    });
});
 
 
</script>
cs


우선 Ajax부터 작성했습니다.

var idck = 0; 우선 아이디 체크를했는지 안했는지 안했다면 회원가입이 불가하게 처리하기 위해

변수를 먼져 선언했습니다. 아이디 체크 여부에 따라 1 or 0 으로 처리할것입니다. 


컨트롤러


1
2
3
4
5
6
7
8
9
10
11
12
13
 @RequestMapping("/idcheck.do")
    @ResponseBody
    public Map<Object, Object> idcheck(@RequestBody String userid) {
        
        int count = 0;
        Map<Object, Object> map = new HashMap<Object, Object>();
 
        count = signupService.idcheck(userid);
        map.put("cnt", count);
 
        return map;
    }
 
cs


Ajax사용을 위해 @ResponseBody 위를 어노테이션을 써줘야하구요 

JSON으로 넘어온 userid를 매개변수로 받습니다.


signupService.idcheck(userid); 쿼리를 먼져 확인해보면 


1
2
3
4
5
<select id="idcheck" parameterType="String" resultType="Integer">
      SELECT COUNT(*) FROM tbl_member
      WHERE
          userid = #{userid}
</select>
cs

 

테이블에 저장되어 있는 userid의 COUNT를 가져옵니다.  


다시 컨트롤러에서 count = 1 이 될것입니다. 

이렇게 맵에 넣어서 다시 jsp로 넘겨줍니다. 다시 AJAX 작성한것을 보면 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
if (data.cnt > 0) {    
        alert("이미 아이디가 존재합니다.");               
    //아이디가 존제할 경우 빨깡으로 , 아니면 파랑으로 처리하는 디자인
        $("#divInputId").addClass("has-error")
        $("#divInputId").removeClass("has-success")
        $("#userid").focus();
                    
                
else {
         alert("사용가능한 아이디입니다.");
     //아이디가 존제할 경우 빨깡으로 , 아니면 파랑으로 처리하는 디자인
        $("#divInputId").addClass("has-success")
        $("#divInputId").removeClass("has-error")
        $("#userpwd").focus();
        //아이디가 중복하지 않으면  idck = 1 
        idck = 1;
}
cs


컨트롤러에서 아이디가 중복이라면  cnt = 1 아니면 0이 넘어 왔을 때 

data.cnt > 0 이면 중복!

아니라면 사용 가능합니다!


설명을 어렵게 드린거 같네요 ㅠㅠ 


그리고 회원가입을 해봤더니 이전에 유효성 검사에서 버튼을 submit으로 만들었었습니다. 

아이디가 중복인데 ㅠㅠ 막 에러를 뿜뿜  primary key ㅠㅠ

그래서 유효성 검사에서 


1
2
3
4
5
6
7
8
9
if(confirm("회원가입을 하시겠습니까?")){
        if(idck==0){
            alert('아이디 중복체크를 해주세요');
            return false;
        }else{
        alert("회원가입을 축하합니다");
        $("#frm").submit();
        }
    }
cs


마지막 부분에 이렇게 추가 했습니다.


이전 글을 보신분은 회원가입 버튼에 TYPE을 submit에서 button으로 바꿔주시고 

form 에 name="frm" id="frm"을 추가해주세요  





존재하는 아이디를 넣었을 때 count = 1 은 아이디가 존재 합니다.






아이디가 존재할 경우 빯갛게 표시 ㅎㅎㅎㅎ 





아이디가 존재하는데 회원가입을 진행했을 경우  

if(confirm("회원가입을 하시겠습니까?")){
        if(idck==0){
            alert('아이디 중복체크를 해주세요');
            return false;
        }else{
        alert("회원가입을 축하합니다");
        $("#frm").submit();
        }
    }








다시 정상적인 아이디를 입력했을 경우 



디비를 확인해보니 아주 이쁘게 잘 들어갔네요 ㅎㅎㅎㅎㅎㅎ






설명이 많이 부족합니다 .ㅠㅠ ajax는 추가로 따로 음...공부하고  스크립트 카테고리에 올리겠습니다 ㅠㅠ 

이것으로 회원가입에 필요한 비밀번호 암호화 , 유효성검사, 주소 자동완성, 아디디 중복검사를 했습니다. 

다음엔 게시판(공지사항) 을 만들겠습니다. 

공지사항에는 1. 게시글 등록 2.리스트 3. 수정 4. 삭제(CRUD)  5. 검색 6. 페이징  이렇게 다루겠습니다. 

코드가 필요하신 분은 댓글 달아주시면 git으로 코드를 올리겠습니다~ 



이번에는 회원가입시 꼭 필요한 유효성 검사입니다.


간단하게 공백 시 alert메시지를 띄우는 것만 하겠습니다. 


저도 아직 정규표현식은 ... 구글링을 통해 하는지라.. 




우선 유효성 검사를 위해 다음과 같이 스크립트를 추가합니다.

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
function DosignUp() {
    
    var userid = $("#userid").val();
    var userpwd = $("#userpwd").val();
    var inputPwdCfm = $("#signUpUserPwdCfm").val();
    var username = $("#username").val();
    var email = $("#email").val();
    var addr1 = $("#addr1").val();
    var addr2 = $("#addr2").val();
    var addr3 = $("#addr3").val();
    
    if(userid.length == 0){
        alert("아이디를 입력해 주세요"); 
        $("#userid").focus();
        return false;
    }
    
    if(userpwd.length == 0){
        alert("비밀번호를 입력해 주세요"); 
        $("#userpwd").focus();
        return false;
    }
 
    if(userpwd != inputPwdCfm){
        alert("비밀번호가 서로 다릅니다. 비밀번호를 확인해 주세요."); 
        $("#signUpUserPwd").focus();
        return false
    }
 
    if(username.length == 0){
        alert("이름을 입력해주세요");
        $("#username").focus();
        return false;
    }
    
    if(email.length == 0){
        alert("이메일을 입력해주세요");
        $("#email").focus();
        return false;
    }
    
    if(addr1.length == 0 || addr2.length == 0 || addr3.length == 0 ){
        alert("주소를 입력해주세요");
        $("#addr3").focus();
        return false;
    }
    
    if(confirm("회원가입을 하시겠습니까?")){
        alert("회원가입을 축하합니다");
        return true;
    }
    
}
cs



1
2
<input type="submit" class="btn btn-lg btn-success btn-block" value="회원가입" onclick="DosignUp();" />
 
cs


회원가입 제출 버튼에 type="submit" 으로 변경해주세요 .


onclick="DosignUp(); 추가해주세요


보통 화면단에서 이렇게 유효성 검사를 1차로 진행한 후 , 자바단(스프링) validation 으로 다시 처리를 하고 

DB단 에서 한번 더 유혀성 검사를 하는 것으로 알고 있는데 ?? 맞나요 ?? 실무자님 계시면 댓글좀 ㅠㅠ


스프링에서 validation을 사용하는 것은 이후 시간이 있으면 포스팅 하겠습니다. 

DB단은 저도 잘 ;;    :D 모르겟어요 ㅎㅎ 누가 좀 알려주세요 ㅎㅎㅎㅎ


다음 글은 AJAX를 활용해서 아이디 중복 검사를 해보겠습니다. ㅎㅎㅎㅎ

+ Recent posts