내맘대로 블로그.

에러 사유 - 메이븐에서 라이브러리를 내려받다 빼먹고 내려받았거나, 오류때문에 내려받지 못한 경우이다.


해결법 - Windows7 기준.

C:\Users\${users}\.m2\repository에 있는 의존 라이브러리를 전부 날리고 프로젝트를 재생성하여 다시 받는다.

부트스트랩 사용법

부트스트랩에 CND로 연결된 HTML의 클래스명으로 사용한다.

예)


<div class="container-fluid">

<div class="row">

<div class="col-sm-4" style="background-color:lavender;">.col-md-4</div>

<div class="col-sm-4" style="background-color:lavenderblush;">.col-md-4</div>

<div class="col-sm-4" style="background-color:lavender;">.col-md-4</div>

</div>

</div>


container           : 고정폭 길이 레이아웃 설정.(브라우저 해상도에 맞춘다.)

container-fluid    : 고정폭에 100% 길이로 설정되는 레이아웃.


row                  : 한 줄 만들기

col-sm-4           : 칸 만들기


칸 설명 전 사전 설명.

부트 스트랩은 12그리드 방식(프레임워크마다 그리드 수가 다르다.) 프론트앤드 프레임워크이다.

예)

<div class="col-sm-8"></div> = 8칸 차지

<div class="col-sm-4"></div> = 4칸 차지


부족하거나 많으면 짜놓은 프레임이 깨진다.


칸 만들기(레이아웃 구성) 구성요소(-로 구분)

col

xm

sm

md

lg

칸 구성을 의미.

핸드폰 화면 기준

태블릿 화면 기준

PC화면 기준

큰 PC화면 기준



부트스트랩3


부트 스트랩이란?


부트 스트랩은 빠르고 쉽게 웹 개발을 하기위해 JQuery기반의 프론트앤드 프레임워크로, 타이포그래피, form양식, 버튼, 테이블 네비게이션 등을 제공한다.(보통 CND방식으로 사용함.)


html5로만 작성되며 모바일 최적화 페이지를 만들기 위해 사용한다.


기본 형식

<!doctype html>

<html lang="ko">

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<!--[if IE 9]>

<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>

<scirpt src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>

<![endif]-->

</head>

<body>


<h1>Bootstrap</h1>


</body>

</html>


ORM 프레임워크 ibatis

http://archive.apache.org/dist/ibatis/binaries/ibatis.java/ibatis-2.3.4.726.zip


ORM 프레임워크 mybatis

http://blog.mybatis.org/p/products.html

https://github.com/mybatis/mybatis-3/releases

DB설치 경로

C:\app\Administrator\product\11.2.0\dbhome_1


DB연동에 필요한 OJDBC6 경로

C:\app\Administrator\product\11.2.0\dbhome_1\jdbc\lib

자바 6버전 이상에서 필요한 jar 파일 : ojdbc6

톰캣 7버전과 가장 잘 맞는다.

JDK에 넣어서 귀찮음 방지하기

C:\Program Files\Java\jre1.8.0_111\lib\ext

에 ojdbc6.jar 넣어놓기.



<script>

$(function(){

$.get("item.xml", function(data) {

$("#treeData").append("<tr>"

+"<td>id</td>"

+"<td>name</td>"

+"<td>price</td>"

+"<td>description</td></tr>");

$(data).find('item').each(function(){

var $item = $(this);

$("#treeData").append(

"<tr><td>"

+$item.attr("id")+"</td><td>"

+$item.attr("name")+"</td><td>"

+$item.find("price").text()+"</td><td>"

+$item.find("description").text()+"</td></tr>");

});

});

});

</script>


└xml 불러오기



<script>

$(document).ready(function(){

$.getScript("test.js");

$('#submit').click(function(){

var msg = call($('.username').val());

$('#message').html(msg);

return false;

});

});

</script> 


└JavaScript 불러오기



$(function(){

$('#submit').click(function(){

var username = $('.username').val();

var sendData = 'username='+ username;

$.post("welecom.jsp", sendData, function(msg) {$('#message').html(msg);} );

return false;

});

});


└post방식으로 jsp 불러오기 


$(function(){

$("#menu1").click(function(){

$("#message1").load("menu.html");

return false;

});

});

$(function(){

$("#menu2").click(function(){

$("#message2").load("menu.html li");

return false;

});

}); 

 <script>

$(function(){

$("#menu1").click(function(){

//몽고DB에 사용되는 형태

$.ajax({url:'menu.html', dataType:"html", success: function(data){$('#message1').html(data);}})

return false;

});

});

$(function(){

$("#menu2").click(function(){

$.ajax({

url:'menu.html',

dataType:"html",

success: function(data){$('#message2').html($(data).find('li'));}

})

return false;

});

});

</script>


menu.html은 menu.html안에 있는 내용 가져오기

menu.html li는 menu.html안에 있는 li엘리먼트 가져오기(자손 엘리먼트 가져오기) 

AJAX

Language/AJAX2016. 12. 26. 16:22


AJAX

_자바 스크립트와 XML을 합친 비동기식 언어로, 동적인 데이터 처리에 좋다.

_JS가 클라이언트쪽 스크립트라면 AJAX는 서버측 스크립트이다.

_AJAX를 사용하면 서버에서 결과페이지가 오지 않고 데이터만 변화한다.

_브라우저 자신이 서버에 다녀오는 것이 아니기 때문에 URI변경은 없다.

 

<head>

<script>

$(function(){

$("button").click(function(){ 

$("P").load("sample1.txt");

});

});

</script>

</head>

<body>

<button>변경</button>

<p>변경</p>

</body>

<head>

<script>
$(function(){
$("button").click(function(){
$("#container").load("resource.html");
});
});
</script>
</head>
<body>
<button>서버로부터 데이터 가져오기</button>
<div id = "container">데이터 가져오기 전</div>
</body>

 


<body>

<p id ="demo"> Let AJAX</p>

<button type="button" onclick="loadDoc()">Change Context</button>

<script>

function loadDoc() {

var xhttp;

//1.객체생성

if(window.XMLHttpRequest){

xhttp=new XMLHttpRequest();

}

else{//for ver. IE6, IE5

xhttp=newActiveXObject("Microsoft.XMLHTTP");

}

//2 응답을 받아왔을 때 처리할 형식 정의

xhttp.onreadystatechange = function(){

//readstate속성이 변경될 때마다 해당 function 호출

if(xhttp.readyState == 4 && xhttp.status == 200){

//readstate = 4는 응답 완료 상태

//stuatus = 200은 정상적으로 페이지 호출 성공

//alert(xhttp.responseText);

document.getElementById("demo").innerHTML = xhttp.responseText;

}

};

// 3. open, send 함수 설정

//get방식으로 요청 데이터를 받을 페이지, true는 비동기통신을 지정

xhttp.open("GET", "ajax_info.html", true);

xhttp.send();

}

</script>

</body>