Web Language (17) 썸네일형 리스트형 날씨 API 활용하기 ▶ 기상청에서 공공데이터 받기 주소 → http://www.weather.go.kr/weather/lifenindustry/sevice_rss.jsp RSS를 클릭하고 해당 uri로 이동해보면, 아래처럼 GET 방식으로, zone=지역코드로 이루어져 있다. Crome으로 F12번의 개발자 도구를 킨다. option의 value 값에 지역코드들이 들어가 있다. ▶ 날씨 API 활용해보기 1. pom.xml 파일에 jsoup dependency 를 추가한다. jsoup은 HTML 문서에 저장된 데이터를 구문 분석, 추출 및 조작하도록 설계된 오픈 소스 Java 라이브러리 이다. org.jsoup jsoup 1.12.1 Jsoup 클래스의 static 메소드 connect에 uri 경로로 분석하고자 하는 ht.. MVC 패턴 - model2 MVC (모델-뷰-컨트롤러) 모델-뷰-컨트롤러, 즉 MVC는 사용자 인터페이스로부터 비지니스 로직을 분리하여 애플리케이션의 시각적 요소나 그 이면에서 실행되는 비지니스 로직을 서로 영향없이 쉽게 고칠 수 있는 애플리케이션을 만들 수 있다. ▶ MVC 구성요소 - 컨트롤러 모델에 명령을 보냄으로써 모델의 상태를 변경할 수 있다. 또, 컨트롤러가 관련된 뷰에 명령을 보냄으로써 모델의 표시 방법을 바꿀 수 있다. - 모델 모델의 상태에 변화가 있을 때 컨트롤러와 뷰에 이를 통보한다. 이와 같은 통보를 통해서 뷰는 최신의 결과를 보여줄 수 있고, 컨트롤러는 모델의 변화에 따른 적용 가능한 명령을 추가·제거·수정할 수 있다. 어떤 MVC 구현에서는 통보 대신 뷰나 컨트롤러가 직접 모델의 상태를 읽어 오기도 한다... forward 와 redirect forward 와 redirect ▶ forward 클라이언트가 경로를 요청하면 웹 컨테이너 내에서만 경로가 이동되기 때문에 보여지는 경로는 변하지 않고, 화면만 변한다. 그렇기 때문에 웹 컨테이너에 담은 정보들을 공유할수 있다. request.getRequestDispatcher("/WEB-INF/views/"+fwPath) .forward(request, response); ▶ redirect 클라이언트가 경로를 요청하면 이동하는 url을 그대로 노출시킨다.그렇기 때문에 웹컨테이너에 담은 정보들이 공유되지 않는다. response.sendRedirect("http://seollica.tistory.com"); response.sendRedirect(request.getParameter("url"));.. HTML form 태그 Form Tag ▶ form tag 데이터를 전송하기 위한 태그 1) form 태그의 속성에 method,action을 설정하여 전송방식 및 전송경로를 지정해야 한다. 2) form 태그의 자식 요소에 input, select, textarea 등 데이터 입력 태그를 두고 submit을 실행하면 데이터가 전 송이 된다. 3) method 속성의 값은 post와 get으로 설정이 가능하며, post 방식은 데이터를 body에 숨겨 전송, get방식은 url로 전송을 한다. 4) action 속성의 값은 전송될 경로를 입력한다. ▶ form tag 종류 1. input 텍스트 등록 태그 (type 속성에 text, raido, checkbox 설정가능) 1) text, password input type=".. 테이블 병합 테이블 병합하기 td의 속성을 지정하여 병합을 할 수 있다. - colspan : 가로 병합 - rowspan : 세로 병합 테이블 안의 td에 rowspan 속성을 부여하면 ("rowspan="2") td 크기가 커지며(병합) td가 한칸 밀려난다. 밀려난 td를 지운다. 번호 카테고리 제목 5 국어 국어점수1 5 국어점수2 5 수학 수학점수 세로 셀이 병합된것 처럼 보인다. 마찬가지로수학 점수를 지우고, 수학 td를 colspan 속성을 부여한다. 번호 카테고리 제목 5 국어 국어점수1 5 국어점수2 5 수학 더보기 번호 카테고리 제목 5 국어 국어점수1 5 국어점수2 5 수학 레이아웃 구성 이해 ▶ uI / GUI - UI : User Interface - GUI : Graphic User Interface 1) 레이아웃 구성의 규칙 - 화면 설정 : 기본적인 화면 설정 내용 전달 - 공통 규칙 : 공통적인 리소스 정보를 전달함. - 구성 항목 : 네비게이션, 테이블, 툴팁, 탭, 아이콘 - 레이아웃 : header, container, footer - 네이밍 : 공통 규칙에 따라 파일명을 정한다. 공통 : 형태_의미_상태. 대분류_중분류_소분류 이미지 : 영문 소문자, 숫자 css _ 컨셉 분류에 따라 '서비스_대분류명' 카멜 표기법 낙타 등 모형이 닮았다 하여 붙여진 이름 파스칼 표기법 member name 이라는 변수를 만들때 member Name 형태의 모형으로 변수를 만들 수 있다. m.. JSP와 DB연결 - 로그인 기능(DB연결) 로그인기능 예전에 했던 로그인 기능을 생각해 보자. session을 응용하여 파일 내에서 선언해둔 변수(아이디,패스워드)의 값과 일치 불일치를 따져보고 로그인에 성공하고 실패하고 유지되는 작업을 해보았었다. 하지만 오늘 할 로그인 기능은 데이터베이스에 저장된 아이디, 패스워드 값을 로그인폼에서 입력한 값과 비교를 하여 로그인에 성공하고 실패하고 유지되는 작업을 해볼것이다. ▶ 로그인 기능 구현 1. 파일 구성 WebContent 폴더 하위에 login 폴더와 index.jsp 파일을 만들었다. index.jsp파일은 로그인 유지가 되는 메인 홈 화면이고, login 폴더 안의 jsp파일은 각각 - login_form : 로그인 정보를 입력할 수 있는 화면이다. - login_pro : 데이터베이스에 연결.. JSP와 DB연결 - DELETE JSP와 DB연결 - DELETE 이제는 Query문을 여러번 다뤄봤으니 delete는 쉬울것이다. 마찬가지로 테이블 내에서 아이디를 기준으로 선택한 행의 데이터를 DELETE 쿼리문으로 삭제하면 끝이다. ▶ 삭제 기능 회원 정보를 수정하는 방법도 해 보았다면, 회원 계정을 탈퇴하거나, 계정이 만료되어 삭제를 하거나 하는 작업을 할수도 있다. 그러려면 데이터베이스에서 해당 회원의 정보를 가진 행을 없애는 작업을 해야한다. 회원 정보 리스트에서 삭제버튼을 누른다고 가정한다. 앞서 했던 수정버튼과 동일하게 삭제버튼을 눌렀을 경우 삭제버튼에 rul을 걸어주어 url에 삭제 버튼이 눌린 아이디를 get방식으로 받아오도록 하자. 삭제버튼을 눌렀을 때 실제 데이터베이스에연결하여 쿼리문을 입력하는 기능을 하는 m_d.. 이전 1 2 3 다음
