I T H

관리자용 페이지중에서 사용자 데이터를 관리하는 페이지를 만들려고 한다. 먼저 db에 저장되있는 사용자 데이터들을 조회해 오고, 조회해온 데이터를 수정, 삭제하는 기능과 사용자를 등록하는 기능까지 구현할 것이다. 사용 라이브러리는 mui/x-data grid 를 사용해서 테이블을 구현했고, row를 클릭할 경우 modal 이 뜨게 할 것이다. modal 라이브러리는 mui/material의 modal을 사용했다. Frontend - 구현에 들어가기 앞서, 필요한 라이브러리( mui )를 먼저 다운로드 받아준다. https://mui.com/material-ui/getting-started/installation/ Installation - Material UI Install Material UI, the ..

이번 챕터에서는 관리자 계정으로 로그인 후 출력되는 관리자 메뉴를 통해서 프로필 관리, 포트폴리오 관리를 진행하고자 한다. 먼저 이미 작성하였던 프로필 관리 페이지에도 템플릿 스타일을 동일하게 적용하기 위해서 JSP, js 파일을 각각 수정하여 준다. 아래와 같이 프로필 관리 페이지가 완성될 것이다. [ admin.jsp ] – 프로필 관리 페이지 UI 수정 src\main\webapp\WEB-INF\views\admin.jsp 프로필 관리 페이지 프로필 이미지 프로필 이름 프로필 직업 프로필 이메일 프로필 등록 [ admin.js ] – 프로필 관리 페이지 스크립트 작성 src\main\webapp\resources\views\admin.js /********************************..

관리자 계정으로 로그인 한 후 ART 상품 등록을 위한 상품 페이지를 개발함. 아래와 같은 절차로 1개의 상품이 등록되며, 상품과 관련한 테이블은 앞서 DB 모델링을 통해서 구현한 마스터/디테일 테이블 2개를 사용함. 1. 상품에 대한 기본 정보를 등록 : 상품명, 가격 등 2. 등록된 상품을 클릭하여 상품 이미지를 등록 (최대 5개까지) - 추후 파일 업로드 시 다중업로드가 가능하도록 구현할 예정, 현재는 이미지 1개씩 등록하는 방법으로 진행 먼저 상품 등록 시 상세 설명을 적기 위해 textfield를 이용해도 되지만 이왕이면 텍스트 라이브러리를 가져와서 사용해볼 겸 텍스트 에디터 라이브러리를 선택하여 적용. https://github.com/suyati/line-control GitHub - suy..

관리자 페이지용으로 단일 이미지 업로드 테스트를 위한 페이지를 구현하고자 한다. [ 테이블 생성 ] 프로필 정보를 저장하기 위한 데이터베이스 테이블을 1개 생성한다. CREATE TABLE TBL_PROFILE_INFO ( PROFILE_ID varchar(10) NOT NULL PRIMARY KEY, PROFILE_NAME varchar(20) NOT NULL, PROFILE_JOB varchar(100) NOT NULL, PROFILE_EMAIL varchar(100) DEFAULT NULL, PROFILE_IMG varchar(100) DEFAULT NULL ) [ Dependency 추가 ] 파일 업로드를 위한 라이브러리를 참조하기 위해 pom.xml 파일에 아래 내용을 추가한다. 참고 > htt..