학교를 다니면서 프로젝트 과제, 또는 개인적인웹 개발 공부 등 을 할때 부트스트랩 템플릿을사용하면 정말정말 깔끔하고 이쁜 웹을 개발 할 수있다. 반응형 웹 디자인을 손쉽게 할 수 있는 부트스트랩은폼이나 메뉴바, 드롭다운 메뉴 등 각 요소들을 잘 묶어놔서쉽게 사용 할 수 있다. 하지만 내가 원하는 의도대로 만들기가(디자인) 아쉬울수 있다.왜냐하면 css 적인 디자인이 전부 만들어져 있기 때문이다. 하지만 빠르게 웹 페이지를 만들어 낼수 있다. 먼저 부트스트랩 템플릿을 사용하는 법에 대해알아보자. 먼저 자기가 사용하려는디자인적 요소가 담긴 템플릿을 골라야한다. 이쁘고 기능을 많이 넣을수 있는 부트스트랩 템플릿은대부분이 유료이며 해외 사이트에서 구매 해야한다.이러한 사이트는 구글에 치면 금방 나온다. 나는 포..
이번엔 Paging 을 구현 해보자. 페이징을 구현하기 위해선먼저 페이징 VO가 필요하다. 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354public class CmmnVO { private static final long serialVersionUID = 1L; /*rows : 현재 페이지에 보여질 row수 page : 현재 보여질 페이지 수 totalPage : 총 페이지 수 startPage : 시작페이지수 endPage : 끝 페이지 수 pageScale : 한 페이지에 보여질 페이지 수*/ private long rows = 2; private long page = ..
이번엔 동적테이블을 만들어서 체크박스를 이용해 체크된 항목의 값들만출력 시켜보겠다. 먼저 저번 포스팅처럼 버튼과 체크박스를 생성해준다. 다음 화면에서 체크된 값들만 출력시켜주기 위해jstl을 사용한다. 먼저 저번 포스팅에서 썼던 것 처럼체크박스들은 arr배열에 담기게 된다그리고 체크한 항목을 출력하기 위해 4line의 ${arr} 를 사용했다. 다음 해당하는 항목의 값들을 DB에서 뽑아오도록c:if문을 주어 arr값이 아이디 이면 DB에 있는id값을 가져올수 있도록 해준다. 123456789101112131415161718192021222324252627282930 ${arr} Colored by Color Scriptercs
체크박스를 이용해 체크된 값들을 컨트롤러로 보내고 값을 확인해보자. 먼저 화면단에 테스트를 할수있도록 체크박스를만들어 보자 난 부트스트랩을 이용하였다. 1234567891011121314151617181920 컨트롤러로 go Submit a b c Colored by Color Scriptercs 먼저 2line에서 form 태그에 id값으로 frmReq를 주었다그리고 welcomeWeb4.do로 action 시켜준다. 그럼 이제 컨트롤러를 보자 1234567@RequestMapping(value = "welcomeWeb4.do") public String initMain3(HttpServletRequest request, ModelMap model) throws Exception { String[] a..
이번엔 레프트 메뉴를 추가해 보겠다. 먼저 default-left.jsp 들어가자.다음 아래와 같이 스크립트단 과 form을 집어 넣자. 123456789101112131415161718192021222324 var left = { pageSubmitFn : function(pageName) { $("#pageName").val(pageName); if(pageName == "mainMenu") { $("#frm").attr("action", "main.do"); } else if(pageName == "welcomeWebMenu") { $("#frm").attr("action", "welcomeWeb.do"); } $("#frm").submit(); }} Colored by Color Scripterc..
저번 포스팅에서 DB셋팅을 했다이번엔 맵퍼설정과 부트스트랩 사용 마무리를 하겠다. 먼저 컨텍스트 맵퍼 xml 에서 아래와같이 수정한다.기존의 sample를 지우고 **를 넣어주면 된다.이것을 넣어줌으로써 example밑에 어떤 폴더를 만들어 넣든적용이 될것이다. 맵퍼는 SQL을 가리키는 역할을 한다. 다음 아래처럼 index.jsp 를 수정해준다.jsp 액션태그를 사용하여 main.do로 포워딩 시킨다. 다음 아래와 같이example 폴더안에 main 폴더를 만들어주고그안에또 web폴더를 만든후 메인 컨트롤러를 넣어준다.그안에 내용은 아래와 같다.main.do를 받아 main/main.tiles로 리턴한다 다음 마지막으로 위에서 설정해서 사용하려는main.jsp를 만들어 넣어준다 자기가사용하려는 부트스트..
저번 포스팅에서 디스패처서블릿 수정 까지 했다.다음 저번 포스팅에서 타일즈 셋팅을 위해 설정했던default-layout 을 만들어 줘야한다. 디폴트 레이아웃은 아래와 같은 내용이다 먼저 헤더, 레프트, 네비, 컨텐트, 푸터 로 5부분으로 나누었다(자기가 사용하려는 부트스트랩 또는 개발 마다 달라질수 있다)뷰가 서로 끼워맞춰지는 설정이다.여기서 중요한것은 16line 인데 egovframework/example 밑에 jsp 파일들 모두 이 타일즈를 적용시키겠다는 의미이다. 이제 부트스트랩 사용을 위해 타일즈 분할 파일들을 넣어줘야한다. 다음 본인이 사용하는 부트스트랩 템플릿의 css, img, js등을 넣어준다. 다음 컨텍스트데이터소스xml 에서 아래와 같이 설정한다난 오라클을 사용하기 때문에 아래와같이..
저번 포스팅에서 전자정부프레임워크를 설치하고 셋팅후 실행 했다 이번 포스팅에서는 타일즈 셋팅과부트스트랩에 대해 알아보자먼저 프로젝트를 생성해보자 먼저 프로젝트생성은 eGovFrame Web Project를 눌러 생성한다다음 아래와 같이 Project name 과 Group Id에원하는 프로젝트 이름을 넣어준다.다음 Next 눌러준다. 다음 위와 같이 Generate Example 체크하여 Finish 해준다.다음 pom.xml 을 열어준다. pom.xml 에서 위에 표시된 태그를 넣어준다저 태그는 타일즈 셋팅 을 위해 의존을 추가한것이다.결과적으로 메이븐 디펜던시에 들어가진다.다음 아래의 의존들을 추가하자. 타일즈셋팅을 위한의존 추가이다. 타일즈는 복잡한 웹사이트 개발을 쉽게 하기 위해서 개발된무료 오픈..
