JSP 한글이 깨질때!!!


Servers ==> server.xml을 수정한다!!!!




<Connector URIEncoding="utf-8" connectionTimeout="20000" port="8000" protocol="HTTP/1.1" redirectPort="8443"/>


<Connector에 ==> URIEncoding="utf-8" 문구를 추가해준다!!!!

저작자표시 비영리 변경금지

'2020년도 이전 > [WebSig] JSP_Servlet' 카테고리의 다른 글

<%= %>, <% %>, ${} 표현식, 스크립트릿  (0) 2013.08.01
요청 전달 ==> 2. sendRedirect방식  (0) 2013.07.31
요청 전달 ==> 1. RequestDispatcher방식  (0) 2013.07.31
JSP/Servlet request 객체  (0) 2013.07.31
JSP/Servlet 개념을 이해하기 위한 간단한 로그인  (0) 2013.07.29

http://itools.hk/multi_lang_pc_download.htm




저작자표시 비영리 변경금지

'2020년도 이전 > 아이폰' 카테고리의 다른 글

아이폰 ipsw 받기!! (DFU복원시 필요한 파일을 미리받자!!!)  (0) 2013.04.14

loginForm.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">

<title>로그인(form)</title>

<style>

table, tr, td {

margin:1px;

padding:1px;

border:1px solid gray;

}

</style>

</head>

<body>

<form action="login" method="post">

<table>

<tr>

<td colspan="2">로그인</td>

</tr>

<tr>

<td>아이디</td>

<td><input type="text" name="userid" id="userid"></td>

</tr>

<tr>

<td>비밀번호</td>

<td><input type="password" name="userpwd" id="userpwd"></td>

</tr>

<tr>

<td colspan="2">

<input type="submit" value="로그인">

<input type="reset" value="취소">

</td>

</tr>

</table>

</form>

</body>

</html>



---------------------------------------------------------------------------------------------------


LoginServlet.java   ->  (서블릿...)

package com.web3.login;


import java.io.IOException;

import java.io.PrintWriter;


import javax.servlet.ServletException;

import javax.servlet.annotation.WebServlet;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;


/**

 * Servlet implementation class LoginServlet

 */

@WebServlet("/login")

public class LoginServlet extends HttpServlet {

private static final long serialVersionUID = 1L;


    public LoginServlet() {

        super();

    }


protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

//요청 처리후 응답을 위한 마임타임과 문자셋 설정

response.setContentType("text/html;charset=utf-8");

//응답 결과를 클라이언트에게 보내기 위해서 문자스트림을 생성

PrintWriter out = response.getWriter();

//파라미터 받아오기

String uid = request.getParameter("userid");

String pwd = request.getParameter("userpwd");

//DB에 Access해서 userid, password 일치 여부를 체크해야함....

if(uid.equals("admin") && pwd.equals("a1234")){

response.sendRedirect("./loginSuccess.jsp");

} else {

response.sendRedirect("./loginFail.jsp");

}


}


}



---------------------------------------------------------------------------------------------------


loginSuccess.jsp   ->  (성공 페이지)

<%@ page contentType="text/html; charset=utf-8" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>로그인 성공!!</title>

<style type="text/css">

body {

color:blue;

}

</style>

</head>

<body>

로그인 성공했습니다.<br>

님 환영합니다!!<br>

</body>

</html>



---------------------------------------------------------------------------------------------------


loginFail.jsp   ->  (실패 페이지)

<%@ page contentType="text/html; charset=utf-8" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>로그인 실패!!</title>

<style type="text/css">

body {

color:red;

}

</style>

</head>

<body>

로그인 실패했습니다.<br>

아이디가 존재하지 않거나, 비밀번호 오류입니다.<br>

</body>

</html>


저작자표시 비영리 변경금지

'2020년도 이전 > [WebSig] JSP_Servlet' 카테고리의 다른 글

<%= %>, <% %>, ${} 표현식, 스크립트릿  (0) 2013.08.01
요청 전달 ==> 2. sendRedirect방식  (0) 2013.07.31
요청 전달 ==> 1. RequestDispatcher방식  (0) 2013.07.31
JSP/Servlet request 객체  (0) 2013.07.31
JSP 한글깨짐!!! 한글 깨짐 방지 방법!!!!!  (0) 2013.07.30



<!DOCTYPE html PUBLIC "-//W3C//DTD Xhtml 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<style>
body{
font-size:9pt;
}
div{
border: 1px solid #999999;
margin:20px;
margin-bottom:20px;
}
div div{
border: 1px dotted #CCC;
}
.active{
font-size:20pt;
color:#090;
border:5px solid #ff0000;
}
</style>
<script>
window.onload=function(){
}
function solveM1(){
}
function solveM2(){
}
function solveM3(){
}
function solveM4(){
}
function solveM5(){
}
function solveM6(){
}
</script>
</head>
<body>
<div>
<h4>테스트1</h4>
<div id="m_1">
#m_1 : 글자색을 빨간색으로 변경해주세요.
</div>
</div>
<div>
<h4>테스트2</h4>
<div id="m_2">
#m_2 : 클래스 active를 적용시켜 주세요.
</div>
</div>
<div>
<h4>테스트3</h4>
<div id="m_3">
#m_3 : 에고 이 이미지가 아닌데... 이미지를 ch3.png로 변경해주세요"<br>
<img src="ch2.png">
</div>
</div>
<div>
<h4>테스트4</h4>
<div id="m_4">
#m_ 4 : 홋! 항목4까지 있어야 하는건데, 바쁜나머지 실수를 했군요. 항목4를 제일 뒤에 추가해주시겠어요?
<p>
항목1
</p>
<p>
항목2
</p>
<p>
항목3
</p>
</div>
</div>
<div>
<h4>테스트5</h4>
<div id="m_5">
#m_ 5 : 이번에는 항목4가 더 추가되었네요. 즉시 삭제해주세요.
<p>
항목1
</p>
<p>
항목4
</p>
<p>
항목2
</p>
</div>
</div>
<div>
<h4>테스트6</h4>
<div id="m_6">
#m_ 6 : 이런이런! 이 부분은 전혀 필요없는 내용들인데 왜 있는거죠? #m_6부터 헤더태그까지 모두 삭제해주세요.
<p>
DOM(Document Object Model)이란?<br>
웹페이지 문서를 조작하기 위해서 지켜야될 약속(interface)만 딸랑 적혀있는 문서랍니다.
약속만 있을뿐 내부는 텅빈 상자랍니다.
우리가 알고있는 W3C DOM에는 구현소스가 한줄도 존재하지 않습니다.
그럼 실제 구현소스는??
</p>
</div>
</div>
</body>

</html>

-------------------------------------------------------------------------------------------------------





<!DOCTYPE html PUBLIC "-//W3C//DTD Xhtml 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<style>
body{
font-size:9pt;
}
div{
border: 1px solid #999999;
margin:20px;
margin-bottom:20px;
}
div div{
border: 1px dotted #CCC;
}
.active{
font-size:20pt;
color:#090;
border:5px solid #ff0000;
}
</style>
<script>
window.onload=function(){
solveM1();
solveM2();
solveM3();
solveM4();
solveM5();
solveM6();
}
function solveM1(){
var m = document.getElementById('m_1');
m.style.color='red';
}
function solveM2(){
var m = document.getElementById('m_2');
m.setAttribute("class","active");
}
function solveM3(){
var m = document.getElementById('m_3');
var imgimg = document.getElementById('imgimg');
imgimg.setAttribute('src', './images/navi.jpg')
}
function solveM4(){
var m = document.getElementById('m_4');
var output ='';
output += '<p>';
output += '항목4';
output += '</p>';
m.innerHTML += output;
}
function solveM5(){
var m = document.getElementById('m_5');
var p1 = document.getElementById('p1');
m.removeChild(p1);
}
function solveM6(){
var m = document.getElementById('test6');
test6.parentNode.removeChild(m);
}
</script>
</head>
<body>
<div>
<h4>테스트1</h4>
<div id="m_1">
#m_1 : 글자색을 빨간색으로 변경해주세요.
</div>
</div>
<div>
<h4>테스트2</h4>
<div id="m_2">
#m_2 : 클래스 active를 적용시켜 주세요.
</div>
</div>
<div>
<h4>테스트3</h4>
<div id="m_3">
#m_3 : 에고 이 이미지가 아닌데... 이미지를 ch3.png로 변경해주세요"<br>
<img src="ch2.png" id="imgimg">
</div>
</div>
<div>
<h4>테스트4</h4>
<div id="m_4">
#m_ 4 : 홋! 항목4까지 있어야 하는건데, 바쁜나머지 실수를 했군요. 항목4를 제일 뒤에 추가해주시겠어요?
<p>
항목1
</p>
<p>
항목2
</p>
<p>
항목3
</p>
</div>
</div>
<div>
<h4>테스트5</h4>
<div id="m_5">
#m_ 5 : 이번에는 항목4가 더 추가되었네요. 즉시 삭제해주세요.
<p>
항목1
</p>
<p id="p1">
항목4
</p>
<p>
항목2
</p>
</div>
</div>
<div id="test6">
<h4>테스트6</h4>
<div id="m_6">
#m_ 6 : 이런이런! 이 부분은 전혀 필요없는 내용들인데 왜 있는거죠? #m_6부터 헤더태그까지 모두 삭제해주세요.
<p>
DOM(Document Object Model)이란?<br>
웹페이지 문서를 조작하기 위해서 지켜야될 약속(interface)만 딸랑 적혀있는 문서랍니다.
약속만 있을뿐 내부는 텅빈 상자랍니다.
우리가 알고있는 W3C DOM에는 구현소스가 한줄도 존재하지 않습니다.
그럼 실제 구현소스는??
</p>
</div>
</div>
</body>
</html>






저작자표시 비영리 변경금지

'2020년도 이전 > [WebSig] JQuery' 카테고리의 다른 글

미션2 - 1초에 하나씩 1부터 숫자를 증가시키며 #panel에 추가 시켜 주세요. 단, 폰트 크기( 10px~ 50px)와 색은 랜덤으로 설정해주세요.  (0) 2013.07.31
JQuery를 이용한 레이어 팝업  (0) 2013.07.31
미션3 - 1초에 한번씩 이미지를 순차적으로 변환시켜 주세요. 단, 이미지는 9개가 있습니다. 9개까지 출력된 경우, 다시 첫번째 이미지부터 출력시켜주세요.  (0) 2013.07.29
#img1을 #bar의 영역에서 계속 좌우로 움직이도록 만들어주세요.  (0) 2013.07.29
#image_view안에는 9개의 이미지가 있습니다. 이미지가 보일 수 있도록 계속해서 상하로 스크롤 해주세요.  (0) 2013.07.29


images.zip

미션3 - 1초에 한번씩 이미지를 순차적으로 변환시켜 주세요.
단, 이미지는 9개가 있습니다. 9개까지 출력된 경우, 다시 첫번째 이미지부터 출력시켜주세요.


<!DOCTYPE html PUBLIC "-//W3C//DTD Xhtml 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<style>
body {
font-size: 9pt;
}
div {
border: 1px solid #999999;
margin: 20px;
margin-bottom: 20px;
}
div div {
border: 1px dotted #CCC;
font-size: 20px;
}
</style>
<script>
window.onload=function(){
var panel = document.getElementById('panel');
var img1 = document.getElementById('img1');
var cnt = 2;
setInterval(function (){
if(cnt > 9){
cnt = 1;
}
img1.setAttribute('src', './images/img'+ cnt + '.jpg');
cnt++;
}, 1000);
}
</script>
</head>
<body>
<div>
<h4>
미션3 - 1초에 한번씩 이미지를 순차적으로 변환시켜 주세요.<br> 단, 이미지는 9개가 있습니다. 9개까지
출력된 경우, 다시 첫번째 이미지부터 출력시켜주세요.
</h4>
<div id="panel">
<img id="img1" src="images/img1.jpg" alt="이미지">
</div>
</div>
</body>
</html>


저작자표시 비영리 변경금지

'2020년도 이전 > [WebSig] JQuery' 카테고리의 다른 글

JQuery를 이용한 레이어 팝업  (0) 2013.07.31
JQuery 기초  (0) 2013.07.29
#img1을 #bar의 영역에서 계속 좌우로 움직이도록 만들어주세요.  (0) 2013.07.29
#image_view안에는 9개의 이미지가 있습니다. 이미지가 보일 수 있도록 계속해서 상하로 스크롤 해주세요.  (0) 2013.07.29
경품 추첨기  (0) 2013.07.29


images.zip



#img1을 #bar의 영역에서 계속 좌우로 움직이도록 만들어주세요.


<!DOCTYPE html PUBLIC "-//W3C//DTD Xhtml 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<style>
body {
font-size: 9pt;
}
#panel {
width: 600px;
height: 300px;
border: 1px solid #999;
position: relative;
}
#bar {
position: absolute;
left: 50px;
top: 190px;
width: 500px;
height: 20px;
background: #F30;
}
#img1 {
position: absolute;
left: 50px;
top: 70px;
}
#nav {
text-align: center;
width: 600px;
}
</style>
<script>
window.onload=function(){
this.initEventListener();
}
function initEventListener(){
var img1 = document.getElementById('img1');
var nowLeft = img1.offsetLeft; //초기 이미지 위치
var endLeft;
var moveLeft = 0; //움직이는 동안의 이미지 위치
var speed = 2; //속도
var chk=0; //앞으로 갈지, 뒤로 갈지 체크하는 변수
var goTimer; //setInterval을 정지시키기 위해서 사용하는 변수
var btnStart = document.getElementById("btn_start").addEventListener("click",function(){
clearInterval(goTimer);
start();
},false);
var btnStop = document.getElementById("btn_stop").addEventListener("click",function(){
clearInterval(goTimer);
},false);
function start(){
//clearInterval을 사용하기 위해서 goTimer가 setInterval을 참조한다.
//참조하는 동시에 setInterval(moveImg, 10) 실행!!!
goTimer = setInterval(moveImg, 10);
}
function moveImg(){
if(chk == 0){ // chk가 0이면 앞으로 += 하며 출발!!!
nowLeft += speed; //속도인 speed를 2로 지정했었지요...
moveLeft = nowLeft + "px";
if(nowLeft > 430){ //좌표 430까지 가면 chk=1로 하여 뒤로 돌아가기 위한 조건을 준다.
chk = 1;
}
}
if(chk == 1){ // chk가 1이면 뒤로 -= 하며 출발!!!
nowLeft -= speed; //뒤로 -하며 돌아가겠지요?
moveLeft = nowLeft + "px";
if(nowLeft == 50){ //첫 위치인 50에 도착하면 chk=0 으로 하여 앞으로 가기 위한 조건을 준다.
chk = 0;
}
}
img1.style.left = moveLeft;
}
}
</script>
</head>
<body>
<div>
<h4>#img1을 #bar의 영역에서 계속 좌우로 움직이도록 만들어주세요.</h4>
<div id="panel">
<div id="bar"></div>
<div id="img1">
<img src="images/img1.jpg">
</div>
</div>
<div id="nav">
<button id="btn_start">시작</button>
<button id="btn_stop">멈춤</button>
</div>
</div>
</body>
</html>


저작자표시 비영리 변경금지

'2020년도 이전 > [WebSig] JQuery' 카테고리의 다른 글

JQuery 기초  (0) 2013.07.29
미션3 - 1초에 한번씩 이미지를 순차적으로 변환시켜 주세요. 단, 이미지는 9개가 있습니다. 9개까지 출력된 경우, 다시 첫번째 이미지부터 출력시켜주세요.  (0) 2013.07.29
#image_view안에는 9개의 이미지가 있습니다. 이미지가 보일 수 있도록 계속해서 상하로 스크롤 해주세요.  (0) 2013.07.29
경품 추첨기  (0) 2013.07.29
JQuery를 이용한 슬라이드 토글 가로 메뉴  (0) 2013.07.29


images.zip


<!DOCTYPE html PUBLIC "-//W3C//DTD Xhtml 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<style>
body{
font-size:9pt;
}
#panel{
width:600px;
height:300px;
border:1px solid #999;
position:relative;
}
#panel #image_view{
left:236px;
top:80px;
width:128px;
height:128px;
border:1px solid #999;
position:relative;
overflow:hidden;
}
#nav{
text-align:center;
width:600px;
}
</style>
<script>
var objimage_view;
var nImageScrollHeight; // 전체 이미지 스크롤 높이값을 담을 변수.
var nCurrentY; // 현재 스크롤 위치값.
var nTimerID;
var nStep; // 한번에 이동하게 될 이동값.
window.onload=function(){
objimage_view = document.getElementById("image_view");
// 전체 이미지 스크롤 높이값 구하기.
nImageScrollHeight = objimage_view.scrollHeight;
nImageScrollHeight -=objimage_view.offsetHeight;
nStep = 2;
nTimerID = 0;
nCurrentY = 0;
// 이벤트초기화.
// 스크롤 시작버튼 이벤트 리스너 등록.
document.getElementById("btn_start").addEventListener("click",function(){
if(nTimerID==0){
nTimerID = setInterval(startMove,20);
}
if(nTimerID==3){
alert("setInterval 3번 호출?");
}
alert(nTimerID);
},false);
// 스크롤 멈춤버튼 이벤트 리스너 등록.
document.getElementById("btn_stop").addEventListener("click",function(){
if(nTimerID!=0){
alert(nTimerID);
clearInterval(nTimerID);
nTimerID = 0;
}
},false);
}
// 이미지를 상하로 스크롤 시키는 함수.
function startMove(){
nCurrentY += nStep;
// 현재 스크롤 위치가 마지막 위치인지 판단하기.
if( nCurrentY> nImageScrollHeight){
nCurrentY = nImageScrollHeight;
nStep = -2;
}
// 현재 스크롤 위치가 시작 위치인지 판단하기.
if(nCurrentY<0){
nCurrentY = 0;
nStep = 2;
}
// scrollTop프로퍼티를 이용한 이미지 스크롤 시키기.
objimage_view.scrollTop=nCurrentY;
}
</script>
</head>
<body>
<div>
<h4>#image_view안에는 9개의 이미지가 있습니다. 이미지가 보일 수 있도록 계속해서 상하로 스크롤 해주세요.</h4>
<div id="panel">
<div id="image_view">
<img src="images/img1.jpg">
<img src="images/img2.jpg">
<img src="images/img3.jpg">
<img src="images/img4.jpg">
<img src="images/img5.jpg">
<img src="images/img6.jpg">
<img src="images/img7.jpg">
<img src="images/img8.jpg">
<img src="images/img9.jpg">
</div>
</div>
<div id="nav">
<button id="btn_start">시작</button>
<button id="btn_stop">멈춤</button>
</div>
</div>
</body>
</html>


저작자표시 비영리 변경금지

'2020년도 이전 > [WebSig] JQuery' 카테고리의 다른 글

미션3 - 1초에 한번씩 이미지를 순차적으로 변환시켜 주세요. 단, 이미지는 9개가 있습니다. 9개까지 출력된 경우, 다시 첫번째 이미지부터 출력시켜주세요.  (0) 2013.07.29
#img1을 #bar의 영역에서 계속 좌우로 움직이도록 만들어주세요.  (0) 2013.07.29
경품 추첨기  (0) 2013.07.29
JQuery를 이용한 슬라이드 토글 가로 메뉴  (0) 2013.07.29
JQuery를 이용한 슬라이드 토글 세로 메뉴  (0) 2013.07.29



<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<style>
body {
font-size: 9pt;
}
#panel1 {
border: 1px #000000 solid;
line-height: 400px;
font-size: 100px;
width: 400px;
height: 400px;
text-align: center;
vertical-align: middle;
}
</style>
<script src="http://code.jquery.com/jquery-1.10.1.min.js">
</script>
<script type="text/javascript">
$(document).ready(function() {
var stopinter;
$('#btn_Start').click(function() {
clearInterval(stopinter);
start();
});
function start() {
stopinter = setInterval(moveStart, 100);
}
function moveStart() {
var btn = $('#lab_total').val();
var num = parseInt(Math.random() * btn + 1);
$('#panel1').html(num);
$('#panel1').css('color','#' + (parseInt(Math.random()*0xffffff)).toString(16));
$('#panel1').css('font-size', parseInt(Math.random() * 300 + 1) + 'px');
}
$('#btn_Stop').click(function() {
clearInterval(stopinter);
});
});
</script>
</head>
<body>
<div>
<h4>경품추첨기-ver 0.1</h4>
<div id="panel1"></div>
<div id="nav">
참여인원 : <input type="text" id="lab_total" value="100"></input>
<button id="btn_Start">시작</button>
<button id="btn_Stop">멈춤</button>
</div>
</div>
</body>
</html>


저작자표시 비영리 변경금지

'2020년도 이전 > [WebSig] JQuery' 카테고리의 다른 글

#img1을 #bar의 영역에서 계속 좌우로 움직이도록 만들어주세요.  (0) 2013.07.29
#image_view안에는 9개의 이미지가 있습니다. 이미지가 보일 수 있도록 계속해서 상하로 스크롤 해주세요.  (0) 2013.07.29
JQuery를 이용한 슬라이드 토글 가로 메뉴  (0) 2013.07.29
JQuery를 이용한 슬라이드 토글 세로 메뉴  (0) 2013.07.29
JQuery를 이용한 갤러리....  (0) 2013.07.29

+ Recent posts

티스토리툴바