I T H

이번 챕터에서는 그리드 API를 이용하여 사용자 리스트를 조회하고 관리하는 관리자 페이지를 구현하고자 한다. 진행하기 전에 메인 페이지의 메뉴 구성을 변경해보자. 결과 화면을 먼저 확인하면 아래와 같이 로그인을 하지 않은 경우의 메뉴 구성과 관리자 계정으로 로그인한 경우의 메뉴 구성을 확인할 수 있다. 메뉴 구성을 동적으로 변경하여 주기 위해서 다양한 방법이 있겠지만 2가지 방법에 대해서 사용해보고자 한다. 두 방법 모두 별도의 라이브러리를 주입해주어야 사용이 가능하다 1. JSTL 태그를 이용한 세션 정보 확인을 통한 메뉴 show/hidden 처리 javax.servlet jstl ${javax.servlet.jsp.jstl-version} 2. 스프링 시큐리티 태그를 이용한 메뉴 show/hidde..

로그인 구현에 앞서 폴더 구성을 변경하고자 한다. 아래와 같이 index.jsp를 제외한 앞으로 신규 생성될 jsp 파일들은 WEB-INF/views 폴더 아래에 위치시키도록 한다. - 앞서 admin.jsp 페이지 위치가 다르게 설정되어 있었으므로 아래와 같이 컨트롤러도 수정하여 준다. - 로그인 구현을 위한 화면 UI를 작성한다. [ JSP ] WEB-INF\views\cLogin.jsp 아이디, 비밀번호 입력 창이 가운데 배치가 되도록 스타일 수정을 해주었다. 로그인 페이지 로그인 정보를 입력하세요. 아이디 비밀번호 로그인 다음으로 스크립트를 작성한다. 아이디와 비밀번호를 입력 후 로그인 버튼을 클릭하면 서버사이드 컨트롤러를 호출하여 로그인 체크를 하도록 해준다. [ JS ] webapp\resou..

사용자 로그인 페이지를 구현하기 전에 사용자로 등록할 수 있는 회원가입 페이지를 구현하고자 한다. 사용자 정보는 아이디 중복체크만 진행하여 받도록 처리한다. 스프링 시큐리티 설정을 완료한 상태로 가정하고 진행한다. 스프링 시큐리티는 연습용 프로젝트를 참고 [ 테이블 생성 ] - 사용자 정보를 저장하기 위한 데이터베이스 테이블을 1개 생성한다. CREATE TABLE `TBL_USER_INFO` ( `USER_ID` varchar(20) NOT NULL, `USER_PWD` varchar(100) NOT NULL, `USER_NAME` varchar(100) DEFAULT NULL, `USER_AUTH` char(1) DEFAULT NULL, `USER_TEL` varchar(20) DEFAULT NULL..

- 이번에는 관리자 페이지를 통해 메인 페이지의 프로필 이미지 및 프로필 정보를 등록하고 삭제 및 관리할 수 있는 화면을 구현하고자 한다. - 해당 장은 연습 프로젝트 때 이미지 사용한 것으로 관리자 페이지 구현이 완료된 경우에는 관리자 페이지 구현 부분은 패스하고 하단의 메인 페이지에 이미지 및 프로필 조회만 처리하는 것으로 진행해도 된다. [ 테이블 생성 ] - 프로필 정보를 저장하기 위한 데이터베이스 테이블을 1개 생성한다. CREATE TABLE `TBL_PROFILE_INFO` ( `PROFILE_ID` varchar(10) NOT NULL, `PROFILE_NAME` varchar(20) NOT NULL, `PROFILE_JOB` varchar(100) NOT NULL, `PROFILE_EMA..

[캐러셀 API 적용] - 가장 먼저 처리해볼 내용은 Carousel (캐러셀) API를 활용하여 아래 영역에 “사용 가능한 언어” 의 이미지를 두고 좌,우로 이미지 이동이 가능하도록 기능을 구현한다. - 아래 7개의 이미지를 이용하여 캐러셀 기능을 구현한다. - /resources/images/carousel 폴더를 생성하고 해당 폴더에 7개의 이미지를 저장한다. 자바스크립트 및 제이쿼리를 이용하여 직접 구현해보는 것도 괜찮은 방법이긴 하지만 요즘은 라이브러리가 워낙 잘 되어 있어서 사용 가능한 라이브러리를 가져와서 적용할 것이다. 아래 사이트를 참고하여 캐러셀 라이브러리 파일을 다운로드 받는다. https://www.jqueryscript.net/slider/Lightweight-Responsive-..