분류 전체보기 (157) 썸네일형 리스트형 Java EE update, updateform 페이지 구현 detail.jsp 페이지에서는 로그인한 아이디와 게시글의 작성자가 같을경우에 나타나는 수정/삭제 링크 코드를 작성하였다. 수정 링크를 클릭하게 된다면 updateform.jsp 페이지로 이동하게 된다. 수정할 글번호를 읽어온뒤 CafeDao에 작성한 getDate()메소드에 전달한다 update.jsp 페이지 에서는 두가지 방법이 존재한다. 첫번째 방법으로는 Dto 객체를 생성하고난뒤 그안에 form에서 전송받은 값들을 set 한 뒤 update() 메소드에 전달 두번째 방법으로는 jsp:setProperty 를 이용하여 각 property에 값을 입력하고 name에 dto객체를 작성하고 update() 메소드를 실행시키면 된다. 수정한 내용으로 바뀌어있는것을 볼 수 있다. Bootstrap Modal 디자인 및 동작 DOCTYPE html> Step05_Modal.html Modal 테스트 Modal 띄우기 누르기 알림 확인 버튼을 누르면 삭제 됩니다. 확인 취소 알림2 확인 버튼을 누르면 저장 됩니다. 확인 취소 // bootstrap 에서 동작하는 Modal 의 참조값 얻어내기 const modal = new bootstrap.Modal("#myModal2", {backdrop:false}); function test() { // 여기에서 #myModal2 를 띄우기 modal.show(); } // id 가 myModal 인 요소가 화면에 나타났을때 실행할 함수 등록 document.querySelector("#myModal").addEventListener("shown.bs.modal", (e)=>{ cons.. Java EE Insertform, insert 페이지 구현 list.jsp 페이지에서 해당 링크를 클릭하게 되면 insertform.jsp 페이지로 이동하게 된다. insertform.jsp 페이지에서 제목과 내용을 입력하고 저장 버튼을 누르면 form 의 내용이 insert.jsp 페이지로 전달된다. insertform.jsp 에서 전송받은 값들을 getParameter으로 읽어오고 읽어온 값을 CafeDto에 담고 dto에 담은 정보를 insert() 메소드에 전달하게 되면 해당 insert 메소드안에 있는 sql문이 실행되어 DB에 저장 시킨다. Java EE detail 페이지 구현 CafeDao에 작성된 getData() 메소드를 실행시켜 글의 상세내용을 볼 수 있다. href 안에 있는 타이틀 을 클릭하면 해당 페이지의 상세 내용을 볼수 있는 detail.jsp 페이지로 이동 된다. 제목 링크 클릭하게 된다면 해당 게시물의 자세한 내용을 볼 수 있다. Java EE List 페이지 구현 Bootstrap Dropdown 디자인 및 동작 DOCTYPE html> Step04_DropDown.html dropdown 버튼 테스트 Dropdown button Action Another action Something else here 메뉴 선택 김밥 라면 떡볶이 // document.querySelector("#btn1").addEventListener("click", (e)=>{ // document.querySelector("#btn0").innerText = e.target.innerText // }); // document.querySelector("#btn2").addEventListener("click", (e)=>{ // document.querySelector("#btn0").innerText = e.target.innerTex.. Bootstrap Alert 디자인 및 동작 DOCTYPE html> Step03_Alert.html 알림 메세지 성공적으로 작업이 끝났습니다. 삭제 했습니다 확인 0ops! 작업이 실패 했습니다. bootstrap javascript 를 로딩하고 data-bs-xxx 속성을 적절히 추가하면 자동으로 동작하는 UI 가 있다. 0ops! 작업이 실패 했습니다. 어쩌구.. 저쩌구.. 테스트 테스트 테스트 document.querySelector("#closeBtn").addEventListener("click", ()=>{ document.querySelector("#myAlert").style.display="none" }) document.querySelector("#testBtn").addEventListener("click", ()=>{ con.. Bootstrap Form 디자인(2) DOCTYPE html> Step02_Form4.html 다양한 form 디자인 아이디 비밀번호 직업 선택 프로그래머 의사 성별체크 남자 여자 취미 체크 피아노 게임 기타 개인정보 활용 동의 전체 동의 이메일 수신여부 광고성 문자 수신 여부 가입 document.querySelector("#allowAll").addEventListener("change", (e)=>{ // 모두 동의 체크 여부 알아낸다 const Check = e.target.checked // 클래스가 allow 인 모든 요소의 참조값을 배열로 얻어내기 const allows = document.querySelectorAll(".allow"); // 반복문 돌면서 checkbox 상태 바꿔주기 for (let i=0; i{ // it.. 이전 1 ··· 3 4 5 6 7 8 9 ··· 20 다음
