🌿JSP Project 프로젝트 설정 Spring Boot는 기본적으로 JSP를 지원하지 않으며, 템플릿 엔진을 사용하여 HTML 페이지를 생성한다. 하지만 이번에는 JSP를 사용하여 화면을 구성하는 방법을 사용해 보도록 하자. Spring Boot 템플릿 엔진 Thymeleaf (기본) Mustache Freemarker Velocity 기타 등등.. (JSP) Spring Boot는 템플릿 엔진으로 Thymeleaf를 Default로 사용한다. JSP 관련 의존성 추가 pom.xml 4.0.0 org.springframework.boot spring-boot-starter-parent 3.2.0 com.test jsp 0.0.1-SNAPSHOT jsp Demo project for Spring Boo..
🍁카카오맵 API Open API > map Google Map Naver Map Kakao Map [JDBC] Ajax: 게시판 구현 🍁게시판 구현 1. 주제 게시판 회원 관리(인증) 기타 등등 2. 요구분석 게시판 CRUD 권한 처리 목록 보기, 상세보기는 비회원과 회원 모두 할 수 있다. 글쓰기, 수정하기, 삭제하기는 비회원은 할 isaac-christian.tistory.com 게시판 구현에서 이어진다. [JDBC] Ajax (Asynchronous JavaScript and XML) 🍁Ajax Ajax는 비동기 방식으로 자바스크립트를 사용해서 서버와 데이터를 통신하는 기술을 의미하며, XML 형식으로 데이터를 주고받는다. 화면 깜박임 없이 데이터를 주고받을 수 있는 기술이다. isaac-chri..
🍁게시판 구현 1. 주제 게시판 회원 관리(인증) 기타 등등 2. 요구분석 게시판 CRUD 권한 처리 목록 보기, 상세보기는 비회원과 회원 모두 할 수 있다. 글쓰기, 수정하기, 삭제하기는 비회원은 할 수 없다. 수정하기, 삭제하기는 회원의 자기 글만 가능하다. 수정하기, 삭제하기는 관리자는 모든 글에 가능하다. 즉, 로그인을 하지 않더라도 글은 볼 수 있지만, 글을 조작하는 건 해당 글을 작성한 회원과 관리자만 가능하다. 3. 전체 구성(페이지 관계도) drwo.io 4. 화면 설계 & 스토리 보드 5. 데이터베이스 ERD ToyProject > ddl.sql, dml.sql [Oracle] 데이터베이스 설계 (Data Modeling) 💡데이터베이스 설계 1. 요구사항 수집 및 분석 2. 개념 데이터..
🍁주소록 구현 Ajax는 화면 깜박임 없이 데이터를 주고받기 때문에 눈에 보이는 페이지를 여러 장 만들지 않고 한 장으로 구현한다. 테이블 형태로 주소록 목록을 만들고, 입력하는 화면은 다른 페이지에 만들지 않고 해당 페이지의 팝업이나 아래에 폼으로 만든다. Ajax를 사용하지 않는 페이지는 각 기능을 별도의 페이지로 만든다는 특징이 있다. 그래서 Ajax를 쓰지 않을 때에는 CRUD를 구현할 때 4개의 독립적인 페이지를 생성한다. 반면에 Ajax를 사용하면 모든 기능을 한 장으로 구현하기 때문에 페이지가 복잡해진다. https://fonts.google.com/icons Material Symbols and Icons - Google Fonts Material Symbols are our newest ..
🍁jQuery UI https://jquery.com/ jQuery What is jQuery? jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. jquery.com https://jqueryui.com/ jQuery UI jQuery UI is a curated set of user interface interactions, e..
🍁아이디 중복 검사 구현 Ajax는 데이터를 전송해도 페이지 새로고침과 화면 깜박임이 발생하지 않기 때문에 화면에 메시지를 띄우는 작업을 하기에 적합하다. select * from tblUser; 기본 코드 아이디 중복 검사 이름 아이디 작업 과정 1. 데이터 가져오기 (id) 2. DB 작업 (중복 체크) 3. 결과 반환 ex06.jsp 아이디 중복 검사 이름 아이디 아이디 우회 가입 방지 아이디를 복사 붙여넣기하여 가입하는 것을 방지하기 위해 disabled 속성을 부여한다. 아이디 중복 검사를 해서 사용할 수 있다는 결론이 난 경우에만 가입 버튼을 누를 수 있게 한다. $('#regBtn').prop('disalbed', false); 그리고 사용 가능한 아이디일 경우 disabled를 해제한다. ..
🍁데이터 전송 일반적으로 데이터를 가져오기만 할 때는 GET, 데이터를 보내기도 할 때에는 POST를 사용한다. success는 데이터를 수신하는 용도이기 때문에, 데이터를 보내기만 하고 가져오지 않을 때 return값이 없으므로 success가 필요 없다. 그래서 error만을 구현한다. 기본 코드 Ajax 데이터 보내는 방법 이름 나이 성별 남자 여자 주소 전화 단일 데이터 전송 data: 'name=' + $('#name').val() data를 'key=value' 형태로 작성하여 단일 데이터를 전송할 수 있다. 위 코드는 name을 전송한다. $('#btn').click(function() { //1. 단일 데이터 전송 $.ajax({ type: 'POST', url: '/ajax/ex05dat..
[JDBC] Ajax (Asynchronous JavaScript and XML) 🍁Ajax Ajax는 비동기 방식으로 자바스크립트를 사용해서 서버와 데이터를 통신하는 기술을 의미하며, XML 형식으로 데이터를 주고받는다. 화면 깜박임 없이 데이터를 주고받을 수 있는 기술이다. isaac-christian.tistory.com Ajax에 대해서는 위 글을 참고한다. 타입에 따라서 돌려받을 데이터 형식(Text, XML, JSON)을 결정하여 각각의 작업 과정을 확인해 보도록 하자. 🍁Text 단일 데이터 Ex04.java package com.test.ajax.controller; import java.io.IOException; import javax.servlet.RequestDispatcher; i..
