본문 바로가기

CLASS120

#4-5 / 상품 리뷰 등록,list,삭제,수정 with 짝꿍A part :리뷰 등록페이지 A (고객명,제목,textarea,radio로 점수,첨부파일 / insert) => product_insert.jsp파일첨부는 필수 아님 B part : 리뷰 출력 리스트 페이지 B (sql select 활용)삭제버튼 클릭시 데이터 삭제단,첨부파일 있을 경우 첨부파일명 출력=> review_list.jsp ⚡ DB table 생성create table review(ridx int(8) not null auto_increment,rname varchar(100) not null,rsubject varchar(200) not null,rtext text not null,rscore int(1) not null default '1',rfile text null,rda.. 2024. 6. 28.
#4-4 / input type file-multiple을 사용할 경우(part) collection 사용한 버전 : https://dev-eunse.tistory.com/177⚡ part만 이용하여 multiple을 저장(collection 사용 X) 첨부파일 : package shop;@MultipartConfig( fileSizeThreshold = 1024*1024*2, maxFileSize = 1024*1024*5, maxRequestSize = 1024*1024*100)public class jsp16 extends HttpServlet { private static final long serialVersionUID = 1L; protected void doPost(HttpServletRequest request, HttpServletResponse response.. 2024. 6. 27.
#4-3 / 파일 업로드(stream) ⚡ Stream I/O로 파일 저장 - .jsp 첨부파일 : - servlet 파일 (.java)package shop;@MultipartConfig( fileSizeThreshold = 1024*1024*2, maxFileSize = 1024*1024*5, maxRequestSize = 1024*1024*100)public class jsp15 extends HttpServlet { private static final long serialVersionUID = 1L; //Stream I/O로 파일 저장 protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IO.. 2024. 6. 27.
#4-2 / 첨부파일 여러개 업로드시 사용법 collection 사용 X part만 사용 - multiple로 받는 버전 : https://dev-eunse.tistory.com/179👀 enctype="multipart/form-data"  : 미작성시 file 절~대 안날라감여러개의 첨부파일 전송 형태 ( Front-end와 소통으로 전송방식이 변경 됨 ) 1. name값은 전부 다르고, 순차적으로 전송하는 방식2. name값을 동일하게 전송하는 방식 요고루 해볼거임 3. multiple을 이용해서 전송하는 방식( file " multiple=" multiple">한번에 여러개의 파일을 받는 형태 )=> 직접 해보니 해당방법으로 3번 - 마크업만 바꾸면 동일하게 저장이 된다!      ( multiple 사용시 갯수 제한 :         f.. 2024. 6. 27.
#4-1 / 상품 등록 및 삭제 with 짝꿍A part : 상품 등록페이지 A (sql insert 활용) => product_insert.jspB part : 상품 정보 출력 리스트 페이지 B (sql select 활용) => product_list.jsp db에 저장된 내용이 모두 출력되어야 함 ⚡ DB table 생성create table product(pidx int(7) unsigned not null auto_increment,pcode char(7) not null,pname varchar(100) not null,pmoney int(8) not null,pdate timestamp not null default current_timestamp,primary key(pidx),unique pd(pcode));만약 sql .. 2024. 6. 27.
#3-3 / 2예제 paging 기능 추가 ❓ ex)data갯수가 29개이고 한페이지당 4개씩 출력할 경우1page : 42page : 43page : 4...8page : 1 ⚡ 전체회원만...총 22개의 데이터 중 한페이지당 5개씩 노출하게 제작1.( 총 data갯수 / 한페이지당 노출할 수 ) 만큼 반복문 돌려서 element생성 => float으로 받아야함  : ceil로 올림이 적용되기 때문에.. (?)limit 0,5 : 0부터 5개limit 5,5 : 5부터 5개limit 10,5 : 10부터 5개..sql의 limit숫자를 적용하는 방법 : (현재번호-1)*한페이지당 출력할 data갯수 -jsp8 > SMS 광고수신 : >동의함 >동의안함 Email 광고수신: >동.. 2024. 6. 26.
#3-2 / 2예제 고객정보 수정페이지(update) 새로운 jsp 생성해야 함(상세 페이이지와 동일하게)⚡ modify page 제작 (update)-기존 table의 id에 a링크 추가 )">🔽- 수정페이지(.jsp)1. body 내 input type hidden 넣고 value값 고유 idx 번호로 세팅2. 변경 가능한 항목 input or select로 변경 - 레이아웃은 기존 상세와 동일3. 수정버튼에 js추가(ajax로 ) ./jsp12.jsp 로 해당 input값들 넘김4. jsp12.jsp에서 해당 input name값으로 받아서 sql연결 후 update5. 정상 변경시 out.print("ok") , 문제 발생시 out.print("no")6. front에서 ok냐 no냐로 핸들링넘기는 방식은 2가지가 될 수 있다form으로 넘기느냐 .. 2024. 6. 26.
#3-1 / 2예제 상세보기-고객별 포인트,구매내역 추가 https://dev-eunse.tistory.com/170해당 작업 이어서 상세 버튼 클릭 -> 포인트,상품구매리스트도 출력하기 (points,mall_product 테이블) ⚡ 상세 table에 포인트 추가~생략 포인트(적립금) // //이렇게해도되고 //이렇게하면 ,찍힌 값 출력 DecimalFormat  : , 찍는 라이브러리  => 실무에선 join or view를 사용한다 ! 이렇게하면 막코드👎  🔽 이걸 join으로 한다면?sql 문법 : select a.*,sum(b.mall_point) as total from mall_member as a join points as b where a.midx='7' and a.mall_id=b.mall_i.. 2024. 6. 26.
#2-1 / jsp include , 수신여부에 따른 회원정보 리스트 출력 ⚡ includejsp,servlert등 스크립트 언어는 서버가 없으면 돌아가지 않음​▶ include file     정적 문법 - 변수활용 가능    외부파일 로드(단,다른 서버에 있는 파일은 로드하지 못함)    @ : 라이브러리 불러오기,파일 로드,페이지 표시할 때 사용 / jstl 엔진 로드 시 사용▶ jsp:include page=" " :     동적 문법-변수 활용 불가능    flush : cache 메모리에 있는 buffered 사용 유/무 (거의 false 씀, ?v=1 같은느낌..?)              false - 데이터를 새롭게 반영 , true - 데이터 반영 x (반대임)👀정적형태 - DB사용X , ex) 로그인,회원가입변수활용 가능동적형태- DB사용O 배열 백엔드 투.. 2024. 6. 25.
#1-2 / database jsp로 연결 정통은 이렇게 쓰진 않는다~ 절대루 ~ 보안👎걍 해보는거⚡ user table 연결 후 table로 출력 - idx 내림차순 아이디 고객명 가입일자 2024. 6. 24.
#1-1 / 🌺 JSP 기초 JavaServer Pages  jsp는 보안상 뚫리기가 쉽기 때문에do를 실행시켜서 jsp로 data를 출력시키는 경우가 많다! view1. webapp에서 jsp를 로드하는 방식 ( 외부에서 직접 해당 jsp를 실행 가능 )2. META-INF에서 jsp를 로드하는 방식 (외부에서 직접 해당 jsp를 실행 불가)     META-INF 에 파일을 넣을시 외부에서 절대 접근 금지  (보안 아주 good 👍) - 정통     ∴ 중요한 jsp파일은 META-INF에 넣는다!! -> do로 실행 response.setContentType("text/html;charset=utf-8");//view(출력 역할)RequestDispatcher rd = request.getRequestDispatcher("... 2024. 6. 24.
#2-1 / id 중복체크 연습용(ajax) - POST Ajax Get : json 파일을 로드하기 위해but 중복체크는 값을 보내야 하므로 ( Ajax jsp -> do 로 ) => Post 통신 사용( 보내고 받는게 없으면 .do파일은 error뜨는게 맞음 ! )⚡ ajax POST 통신 연습용 : 문자열을 return 시켜서 사용함- jsp아이디 :  - jq (js는 하단에 있음)$(function(){ $("#btn").click(function(){ $.ajax({ url : "./jsp1ok.do", cache : false, type : "post", //pot 전송(data type,data,contentType 필요) //json 배열을 리턴받을 경우 : do 파일이라도 json type으로 받아야함 //(걍 문자열만.. 2024. 6. 24.
#8-2 / 게시판 insert 모듈화... 게시판 insert 모듈화..... 선생님.. ⚡ 게시판 insert 모듈화.....- qa_writeok2.java@MultipartConfig( fileSizeThreshold = 1024 * 1024 * 2, maxFileSize = 1024 * 1024 * 10, maxRequestSize = 1024 * 1024* 100)public class qa_writeok2 extends HttpServlet { private static final long serialVersionUID = 1L; PrintWriter pw = null; ArrayList al = null; ArrayList> all = null; protected void doPost(HttpServletRequest req, .. 2024. 6. 21.
#8-1 / 게시판 login.html 과 이어짐-> top.jsp 에 추가 ( )   =>   top.jsp 아래 qawrite.jsp가 들어감 로그인| 회원가입 | 고객센터 님 환영합니다. | 장바구니 | 고객센터 |  🔽 🔽 글쓰기 input 검토 등 기능 js로 구현 ⚡ 파일첨부 input 핸들링 찾아보기 + 추가  $.fn.fileck = function(){ var $fnm = .. 2024. 6. 21.
#1-4 / js, jquery - 외부 data load (CORS 해결) ❌❌  CORS 에러 ❌ ❌ : 도메인(ip)이 서로 다를경우 Access 오류로 인하여 데이터를 로드하지 못하는 상황 localhost일때는 문제발생X해결 : 1. json에서 ajax로 바로 로드가 안됨(CORS) , JSON -> JSP로 변환 후 외부로 송출2. script 통신(script 파일로 CORS JSON로드방식) - ajax안쓰고 jsp파일에 fileReader로 outprint 해주기=> 둘다 backend(상대방)에서 작업해줘야함 ⚡ 1. JSON -> JSP로 변환 후 외부로 송출 json파일을 바로 핸들링하기 어려우므로 jsp파일을 load후 핸들링- 내가 로드할 html파일 - 상대방(backend) 에서 만든 jsp파일trimDirectiveWhitespaces="true".. 2024. 6. 20.
#1-3 / 🌺 ajax(jquery) 🔽 이거갖구 놀거임=> product.json의 대표key : flat_product       => 나중에 mysql의 table명이 대표key가 됨 ,  mysql의 colomn명이 일반 key가 됨 ⚡ ajax(jquery) 기본=> javascript에 반해 parse를 따로 작성하지 않아도 됨!🔽반복문(jquery - each문) 이용한 html 출력//통신이 끝난 후 얘가 실행되어야 함$.fn.htmls = function(){ //jquery each : 2개인자 , js foreach : 3개인자 $.each($data["flat_product"],function($a,$b){ //$a : index번호 / $b : 자기자신 $("#box").app.. 2024. 6. 20.
#1-2 / ajax + json(key가 있는 배열) => 5초에 한번씩 실행 json의 [ ] 안에 { } 로 들어갈 시 key배열 ! => 백엔드가 가장 많이 만드는 형태key배열은 { }에 넣을것!! 나중에 mysql의 coloumn명이 key가 됩니다대표키는 table명[ {"seq": 1,"product":"모니터","price":195000}, {"seq": 3,"product":"냉장고","price":295000}, {"seq": 4,"product":"에어컨","price":395000}, {"seq": 9,"product":"세탁기","price":495000}]  👀 변수 형태의 function => 변수 형태의 function이 먼저 읽힘//일반 functionfunction aaa(){ alert("function")}//변수 형.. 2024. 6. 20.
#1-1 / 🌺 ajax(javascript) 기본 구조 1. javascript ajax2. jquery  ajax3. es ajax4. react ajax=> 다 다름 => 다알아야함 ⚡ json 구조원래는 database + java 로 만들어야함 배열 => [ ] (key 없는 배열)  or  { } (key배열일경우)json파일 내 주석사용  Xdatafile 종류 : xml,json(api서버가 없을 때) / jsp,do (api서버가 있을 때 )[ ["hong","kim","park"], ["22","32","42"]]  ⚡ ajax 기본 구조 : ajax는 비동기 통신전체 페이지를 새로 고치지 않고도 페이지의 일부만을 위한 데이터를 로드하는 기법 JavaScript를 사용한 비동기 통신, 클라이언트와 서버간에 XML 데이터를 주고받는 기술이다.즉.. 2024. 6. 20.
jquery ui ⚡ jquery ui$(function(){ $("#today").datepicker(); $("#popup").draggable(); $("#popup").droppable({ //다른 오브젝트가 해당 오브젝트 안에 들어오면 작동 drop : function(){ $(this).css("background-color","pink"); } }); $("#popup2").draggable(); $("#menu").selectable(); //선택한 오브젝트를 표시하는 함수(css와 함께 사용) $("#menu2").sortable(); }) datepicker minDate: "0",  오늘부터선택가능maxDate: "7", 선택가능 max 지정 showOn: "both"buttonText: ".. 2024. 6. 20.
#7-3 / 첨부파일 기능 + database 저장 https://dev-eunse.tistory.com/155 예제의 html파일에 review 받는 input 추가리뷰내용 :   🔽 create table filelist( fidx int(7) unsigned not null auto_increment, f_img text null, f_text varchar(200) not null, f_indate timestamp not null default current_timestamp, primary key(fidx) ); 🔽 ⚡ 리뷰등록 fileok2.java@MultipartConfig ( fileSizeThreshold = 1024*1024*2, maxFileSize = 1024*1024*10, maxRequestSize = 1024*1024*1.. 2024. 6. 19.