2017-05-10-P

javascript

새로운 프로젝트를 만들고 webContent 안에

_common.zip

파일을 압축을 푼후 압축푼 파일 자체를 넣어준다

그다음 webContent 폴더 안에 template.html 파일을 만들고 그안을 아래와 같이 적어준다

이건 template.html 이고

ex01.html 파일도 하나 만들고 그안도 template.html 파일과 똑같이 만들어준다.

그다음 파일안의 내용을 9~17까지의 문과 같이 만들어주게되면

Date(); 날짜에 관한것이다.

오른쪽 아래와같이 개발자 모드에서 console 창에 내용이 뜨는걸 알수있다.

그후 다시 파일안을

파일과 같이 적어준다

설명을 하자면 

12번에서 Date생성자 메서드를 통해서 생성된 객체의 주소값을 now 에 담는다.

13~17까지의 문을 정의를 해준다. s 부분의 초 부분은 s/1000을 해주어야 원래 초가 나온다.

그후 50번 줄에서 id = result 부분에 실행을 하기 위해서 

20번 줄에서 result를 받아온다 그후 21번 줄을 이용해서 문자열을 출력해준다.

또한 24~30번까지 endDay 안에 수료 일자를 적어주고

32번줄과 33과 같이 적어주게 되면 계속 업데이트 되서 초단위로 바뀌게 되는것이다.

이런식으로 계속 업데이트 된다.

여기서 setInterval 문을 이용하면 1000 즉 1초마다 갱신되도록 설정할수있는것이다.

javascript 에서 ctrl+space 가 안될경우에는

help -> eclipse marketplace 에 들어가서 find 부분에 webclipse 라고 치고 설치하면 된다.

블로그 만들기

와 같이 blog 프로젝트를 생성하고 그안에 첨부된 _common 폴더를 넣고 lib 안에 있는 jar 파일도 붙여넣는다. *jar 파일은 클래스 압축파일이다.

저 jar 파일은 

MySQL 홈페이지에 가서 DOWNLOADS-->MySQL Connectors ->

Connector/J 안에 파일을 받으면 된다 로그인하라고 뜨면 아래 링크를 클릭하면 된다.

그다음

새로 webContent 안에 insertform.jsp 파일을 만든다.

이때 만들때 html 5로 쉽게만들기 위해서 설정을 잠깐 하자면 window->preferences->검색으로 encoding 을 입력하고 workspace 안에 Text file encoding 의 부분의 값을 Other의UTF-8 로 맞춰주고

왼쪽에 web 파일들 모두를 UTF-8 로 맞춰줍니다. (맨위에있슴)

그다음 입력받을 DB와 테이블을 만들어준다

쿼리문을 통해 만들수도있고 이런식으로도 데이터 베이스를 만들수있다.

데이터 베이스를 blog 로 만들어서 만들어준다 이때 조합은

utf8m64_general_ci 로 맞추고 만들어준다

그리고 이제 테이블을 만들어준다 테이블은

마찬가지로 쿼리문을 통해 만들수도 있고 이런식으로 테이블을 만들수 있다.

테이블을 board로 해서 만들어준다

이런식으로 만들어준후 아래 컬럼을 추가해준다.

컬럼명 과 데이터 유형 그리고 기본값을 저런식으로 맞춰준다

이때 no 의 기본값의 저것은 새 테이터를 추가할때마다 자동으로 +1씩더해서 만들어 주게 되는것이다.

그리고 no 부분을 우클릭해서 새인덱스 작성에 가서 PRIMARY 로 만들어준다

*PRIMARY의 값은 겹쳐선 안되는걸로 해야한다.

그리고 저장을 눌러준다. 그런다음 다시 이클립스로 돌아와서

insertform.jsp 파일로 만들어서 아래와같이 만들어준다

이렇게 작성을해서 화면을 일단 만들어준다

그러면 이런식으로 화면이 만들어지게 되는것이다 이제 입력받은 데이터를 넘겨받고 처리하기 위해서

insertaction.jsp 파일을 만들어준다.그리고 그안을 아래와 같이 작성해줍니다.

이런식으로 작성해주고 if 문을 걸어서 받은 password 값이 일치하지 않으면 다시 메인으로 돌아가게끔 만들어준다 (index.jsp 로 이동하게끔)만들어준다.

드라이버 로딩과 DB연결과 쿼리실행하는거 까지도 적어준후

그리고 나서 다시 리다이렉트를 이용해서 index.jsp 로 이동하게 만들어준다.

그리고 이제 카테고리를 만들고 저장된 데이터를 조건에 맞게 보게 하기 위해서 이동한 index.jsp 에서 카테고리를 만들어줄것이다.

index.jsp 파일을 만들고 그안을 아래와 같이 채워준다

category값을 각각의 값을 get방식으로 지정을해서 넘겨준다(ex.  category=유치원 이런식으로하면 

받을때 if 문으로 모두 따로따로 출력도 할수있다)

그리고 나서 get방식으로 데이터를 입력하면 detail.jsp 파일로 넘어가게끔만들어준다.

이제 category에 따라서 보여지는 데이터가 다르게 만들것이다

그러면 detail.jsp 파일을 만들어준후 그 안을 아래와 같이 채워준다.

설명을 잠깐하자면 카테고리의 값을 받고 그 값을 출력해주기 위해서 String 타입으로 22번줄에서 받아준다. 23번과 24번의if 문은 31번의 쿼리 문과 관련하여 설명을하겠다.

나머지 이제 드라이버 로딩과 DB연결을 다해준다음

쿼리문을 보면 뒤에 limit 라는 값이 있다 여기서 ?,1 값이 있는데

만약 0,1 을 입력해주게 되면 category데이터 의 정보의 0부터 1번까지의 데이터를 보겠다는뜻이다.

그러므로 1번째 데이터가 보인다는 것이다.

마찬가지로 1,1 을 입력해주게 되면 1부터 1번까지의 데이터기 때문에 2번째 있는 데이터가 보인다는 뜻이다.

그래서 23번째 줄은 글을 몇번째 글을 볼것인가를 하기위해서 만들어놓은것이다 만약 index 에서 그 값을 입력하게 되고 받아서 몇번째 글을 보기위해서 23번줄과 24번줄을 만든것이다 .

이때 25번줄은 받은 request.getParameter로 받은값은 String 값이기 때문에 int 로 형변환을 해준것이다.

하지만 index 에서 currenPage 값을 안줬기 때문에 미리 int 타입으로 0; 이 들어가있기때문에

0부터 1번째 까지의 글을 보여주세요가 되는것이다.