160427: 32회차

Programming 2016. 4. 27. 10:12

종료하기 전 티스토리 네이버 로그아웃 할 것

1. 툴

동일

추가시:

2. 폴더

동일

추가시:

3. 사용할 사이트

동일

추가시:

3-1. 발표용

read.jsp

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

<%@ page import="java.util.*, img.*, utility.*"%>

<jsp:useBean id="dao" class="img.ImgDAO" />

request.setCharacterEncoding("utf-8");

int imgno = Integer.parseInt(request.getParameter("imgno"));

List list = dao.imgRead(imgno);

ImgDTO dto = dao.read(imgno);

<!DOCTYPE html>

<html>

<head>

* {

font-family: gulim;

font-size: 20px;

}

</style>

</head>

<body>

<jsp:include page="/menu/top.jsp" flush="false" />

<TABLE class='table'>

<TR>

<TH colspan="5"><img src="./storage/<%=dto.getFilename()%>"><%=dto.getFilename() %></TH>

</TR>

<TR>

<%for(int i = 5; i < 7; i++){ %>

<%if(list.get(i)!=null){ %>

<TD><A href='./read.jsp?imgno=<%=list.get(i-5)%>'><img src="./storage/<%=list.get(i)%>" width="200px" height ="200px"><%=list.get(i)%></a></TD>

<%}

else{%>

<% }} %>

<TD style="border-style: solid; border-width: 3px; border-color: #de2125;"><img src="./storage/<%=dto.getFilename()%>" width="200px" height ="200px"><%=dto.getFilename() %></TD>

<%for(int i = 8; i < 10; i++){ %>

<%if(list.get(i)!=null){ %>

<TD><A href='./read.jsp?imgno=<%=list.get(i-5)%>'><img src="./storage/<%=list.get(i)%>" width="200px" height ="200px"><%=list.get(i)%></a></TD>

<%} else {%>

<% }}%>

</TR>

</TABLE>

</DIV>

<input type='button' value='뒤로가기' onclick="history.back()">

<input type='button' value='목록' onclick="location.href='list.jsp'">

<input type='button' value='답변' onclick="location.href='replyForm.jsp?imgno=<%=dto.getImgno()%>'">

<input type='button' value='수정' onclick="location.href='updateForm.jsp?imgno=<%=dto.getImgno()%>&oldfile=<%=dto.getFilename()%>'">

<input type='button' value='삭제' onclick="location.href='deleteForm.jsp?imgno=<%=dto.getImgno()%>&oldfile=<%=dto.getFilename()%>'">

</DIV>

<jsp:include page="/menu/bottom.jsp" flush="false" />

</body>

</html>

ImgDAO.java

/**

* 6.read

* @param dto

* @return

public ImgDTO read(int imgno) {

ImgDTO dto = null;

Connection con = DBOpen.getConnection();

PreparedStatement pstmt = null;

ResultSet rs = null;

StringBuffer sql = new StringBuffer();

sql.append(" select * from img ");

sql.append(" where imgno = ? ");

try {

pstmt = con.prepareStatement(sql.toString());

pstmt.setInt(1, imgno);

rs = pstmt.executeQuery();

if (rs.next()) {

dto = new ImgDTO();

dto.setImgno(rs.getInt("imgno"));

dto.setWname(rs.getString("wname"));

dto.setTitle(rs.getString("title"));

dto.setContent(rs.getString("content"));

dto.setPasswd(rs.getString("passwd"));

dto.setGrpno(rs.getInt("grpno"));

dto.setIndent(rs.getInt("indent"));

dto.setAnsnum(rs.getInt("ansnum"));

dto.setFilename(rs.getString("filename"));

}

} catch (SQLException e) {

// TODO Auto-generated catch block

e.printStackTrace();

} finally {

DBClose.close(con, pstmt, rs);

}

return dto;

}

/**

* 9.imgRead

* @param dto

* @return

public List<String> imgRead(int imgno){

List<String> list = new ArrayList<String>();

Connection con = DBOpen.getConnection();

PreparedStatement pstmt = null;

ResultSet rs = null;

StringBuffer sql = new StringBuffer();

sql.append(" SELECT * FROM ");

sql.append(" ( ");

sql.append(" select imgno, filename, ");

sql.append(" lag(imgno,2) over (order by imgno) pre_imgno2, ");

sql.append(" lag(filename,2) over (order by imgno) pre_file2, ");

sql.append(" lag(imgno,1) over (order by imgno ) pre_imgno1, ");

sql.append(" lag(filename,1) over (order by imgno ) pre_file1, ");

sql.append(" lead(imgno,1) over (order by imgno) nex_imgno1, ");

sql.append(" lead(filename,1) over (order by imgno) nex_file1, ");

sql.append(" lead(imgno,2) over (order by imgno) nex_imgno2, ");

sql.append(" lead(filename,2) over (order by imgno) nex_file2 ");

sql.append(" from ( ");

sql.append(" SELECT imgno, filename ");

sql.append(" FROM img ");

sql.append(" ORDER BY imgno DESC ");

sql.append(" ) ");

sql.append(" WHERE imgno = ? ");

try {

pstmt = con.prepareStatement(sql.toString());

pstmt.setInt(1, imgno);

rs = pstmt.executeQuery();

if(rs.next()){

String [] arr = new String [10];

//01234 = imgno(2전 1전 자기자신 1다음 2다음)

//56789 = filename

arr[0] = rs.getString("pre_imgno2");

arr[5] = rs.getString("pre_file2");

arr[1] = rs.getString("pre_imgno1");

arr[6] = rs.getString("pre_file1");

arr[2] = rs.getString("imgno");

arr[7] = rs.getString("filename");

arr[3] = rs.getString("nex_imgno1");

arr[8] = rs.getString("nex_file1");

arr[4] = rs.getString("nex_imgno2");

arr[9] = rs.getString("nex_file2");

for(int i = 0; i<10; i++){

list.add(arr[i]);

}

} catch (SQLException e) {

// TODO Auto-generated catch block

e.printStackTrace();

} finally {

DBClose.close(con, pstmt, rs);

}

return list;

}

4. 공부하는 것

Focus Input Box On Load

How can the cursor be focus on a specific input box on page load?

Is it posible to retain initial text value as well and place cursor at end of input?

<input type="text"  size="25" id="myinputbox" class="input-text" name="input2" value = "initial text" />

86down voteaccepted

There are two parts to your question.

1) How to focus an input on page load?

You can just add the autofocus attribute to the input.

<input id="myinputbox" type="text" autofocus>

However, this might not be supported in all browsers, so we can use javascript.

window.onload = function() {
  var input = document.getElementById("myinputbox").focus();
}

2) How to place cursor at the end of the input text?

Here's a non-jQuery solution with some borrowed code from another SO answer.

function placeCursorAtEnd() {
  if (this.setSelectionRange) {
    // Double the length because Opera is inconsistent about 
    // whether a carriage return is one character or two.
    var len = this.value.length * 2;
    this.setSelectionRange(len, len);
  } else {
    // This might work for browsers without setSelectionRange support.
    this.value = this.value;
  }

  if (this.nodeName === "TEXTAREA") {
    // This will scroll a textarea to the bottom if needed
    this.scrollTop = 999999;
  }
};

window.onload = function() {
  var input = document.getElementById("myinputbox");

  if (obj.addEventListener) {
    obj.addEventListener("focus", placeCursorAtEnd, false);
  } else if (obj.attachEvent) {
    obj.attachEvent('onfocus', placeCursorAtEnd);
  }

  input.focus();
}

Here's an example of how I would accomplish this with jQuery.

<input type="text" autofocus>

<script>
$(function() {
  $("[autofocus]").on("focus", function() {
    if (this.setSelectionRange) {
      var len = this.value.length * 2;
      this.setSelectionRange(len, len);
    } else {
      this.value = this.value;
    }
    this.scrollTop = 999999;
  }).focus();
});
</script>

출처: http://stackoverflow.com/questions/4331022/focus-input-box-on-load

자동으로 포커스 이동하기

마승

추천 수 71

자동으로 포커스 이동하기

//네이버 아이디/비밀번호 찾기 예 - 주민번호 입력시 자동으로 포커스이동.

//스크립트

function chk() { //회원정보체크

if(IsEmpty(document.fname.name.value)) {
    alert("한글이름을 입력하세요");
     document.fname.name.value="";
     document.fname.name.focus();
     return false;
}

    if(IsEmpty(document.fname.jumin1.value)){
  alert("주민등록번호를 입력하십시오.");
        document.fname.jumin1.value="";
  document.fname.jumin1.focus();
  return false;
}

if(IsEmpty(document.fname.jumin2.value)){
  alert("주민등록번호를 입력하십시오.");
        document.fname.jumin2.value="";
  document.fname.jumin2.focus();
  return false;
}

return true;

}

//숫자체크와 자동포커스

function go_next(arg, nextname,size){

value = arg.value;
len = value.length;
is_num = Number(value);

if(!is_num) {
  if((len > 0) && (value != '0') && (value != '00') && (value != '000')) {
   alert('숫자를 넣어주세요');
   arg.select();
   arg.focus();
   return false;
  }
}

if(len == size){
if (nextname != null) nextname.focus();
return true;
}
}

//-->
</script>

//html 예...

<tr>
                              <td class="bold brown"><img src="../images/member/bul_g.gif" align="absmiddle" >
                                주민등록번호 </td>
                              <td class="pL5">
                                <input name="jumin1" type="text" class="in_beige" style="width:100px" size="6" maxlength="6" onkeyup="go_next(this, document.fname.jumin2, 6)" TABINDEX="2">
                                <span class="font11 brown">-</span>
                                <input name="jumin2" type="password" class="in_beige" style="width:100px" size="7" maxlength="7"    onkeyup="go_next(this, null , 7)" >
                              </td>
                            </tr>

//우편번호 예

function onlyNumber3(){
        if ((event.keyCode<48)||(event.keyCode>57)){
                event.returnValue=false;
        }
}

function onlyNumber4(){
        if ((event.keyCode<48)||(event.keyCode>57)){
                event.returnValue=false;
        }
}

function js_tab_order(arg,nextname,len) {
    if (arg.value.length==len) {
        nextname.focus() ;
        return;
     }
}

</script>
</head>

<body bgcolor="white" onLoad="document.form_app.post_num1.focus();">
<center>
<H2> 자동으로 포커스 이동하기 </H2> <p>
<form name="form_app" method="post">
<div align="center">
<table border="1" bordercolor="#7AB4FC">
<tr>
<td width="80" bgcolor="#ACE4FC" bordercolor="#ACE4FC" align="center">우편번호</td>
<td width="330" bgcolor="#E9F3F4" bordercolor="#E9F3F4"><p>
<input type="text" name="post_num1" maxlength="3" size="3"
onkeyup="js_tab_order(this,document.form_app.post_num2,3);" onkeypress="onlyNumber3();">
-
<input type="text" name="post_num2" maxlength="3" size="3"
onkeyup="js_tab_order(this,document.form_app.post_num1,3);" onkeypress="onlyNumber4();">
세글자를 치면 포커스가 자동으로 이동합니다.
</td>
</tr>
</table>
</form>
</center>
</body>
</html>

출처: http://www.gnujava.com/board/article_view.jsp?article_no=1104&board_no=11&table_cd=EPAR04&table_no=04

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

그리고 AND연산자로 짠 거는 - 자바 스크립트에서 - 2개까지밖에 비교가 안 되서 ㅡㅡ

var file = frm.filename.value;

var fileExt = file.substring(file.lastIndexOf('.') + 1); //파일의 확장자를 구합니다.

switch (fileExt){

case 'jpg':

break;

case 'png':

break;

case 'gif':

break;

case 'jpeg':

break;

case 'bmp':

break;

default:

alert("JPG,JPEG,GIF,PNG,BMP파일로 올려주세요");

return false;

}

스위치로 바꿨음...

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

[34][Cookie] 쿠키 객체의 사용, 쿠키의 타임 종료

쿠키 - 아주 작은 데이터를 클라이언트 쪽에 저장하는 것

(웹 서버가 아니라 클라이언트!)

1. Cookie 개요
   - javax.servlet.http.Cookie 클래스를 이용합니다.

   - Tomcat 서버가 접속자의 컴퓨터에 저장하는 텍스트 파일로 된 정보.

   - 보안성이 없음으로 계정과 패스워드를 동시에 쿠키에 저장하면,
     쿠키의 내용을 전부 편집기로 열어 볼 수 있음으로 보안에
     문제가 될 수 있습니다.

1. 보안에 문제가 안 되면서

2. 인식할 수 있을 정도로 작은 데이터!

가 필요할 때 쓰면 됨미다.

예) 쿠키는 DB로 잠겨져 있어 볼 수 없음(Chrome), MSIE 파일이 잠겨있음.
     예) 저장된 쿠키의 내용
         c_count <-- 쿠키 변수
         11 <-- 쿠기 값
www.domain.com/www_jsp/cookie/ <-- 쿠키를 기록한 도메인 주소, 폴더 변경시 인식 안됨
         1536
         1110161408
         30152127
         512501408
         30152127
         *
         c_point
         33
www.domain.com/www_jsp/cookie/
         1536
         1110161408
         30152127
         512501408
         30152127
         *

   - 4KB까지 저장할 수 있다.

   - 쿠키는 웹페이지 접속시 서버로 자동으로 전송되고 서버에
     의해서 클라이언트에 쓰여지므로 쿠키를 사용하지 않는 옵션을
     브러우저에서 지정가능.

   - 사용예: 하루동안 이벤트창 오픈하기,
             ID/PASSWORD 자동으로 저장기능,
             로그인 상태 유지등 입력된 값의 자동 출력

   - setMaxAge() : 쿠키의 생존 기간 초 단위 지정, 12시간의 경우 12*60*60, - 자동으로 접근 불가능해짐! :>
     브러우저는 시간이 지난 쿠키는 서버로 전송하지 않고 자동으로
     삭제하며 사용자가 직접 삭제도 가능,
     저장된 쿠키는 브러우저가 삭제가 가능한 데이터임, 수동으로 삭제 기능도 제공함.

   - Cookie c_name = new Cookie("c_name", "Java");
     -> Cookie cname = new Cookie(쿠키 변수명, 쿠키 값)

쿠키도 객체넹

- Cookie c_name = new Cookie("c_name", "Java");
-> Cookie cname = new Cookie(쿠키 변수명, 쿠키 값)

request & response니까

2. 쿠키의 생성
    Cookie cookie = new Cookie("id", id);
    cookie.setMaxAge(1200);     // 초단위
    response.addCookie(cookie); // 쿠키 출력 --> 접속자의 컴퓨터에 기록됨.

3. 쿠키의 읽기
Cookie[] cookies = request.getCookies(); //여러 개니까 쿠키 배열인것 이름이 귀여운것...
String c_id = "";     // 아이디
String c_passwd = ""; // 패스워드

if (cookies != null){  // 쿠키가 존재한다면
for(int i=0; i<cookies.length; i++){ // 쿠키의 갯수만큼 순환
Cookie item = cookies[i];        // 쿠키를 하나씩 추출
if (item.getName().equals("id") == true){ // 찾으려는 변수가 있는지 검사
c_id = item.getValue();  // 찾아진 쿠키의 값 추출
}else if (item.getName().equals("passwd") == true){ // 찾으려는 변수가 있는지 검사
c_passwd = item.getValue();  // 찾아진 쿠키의 값 추출
}
}
}

4. 쿠키의 삭제
    Cookie cookie = new Cookie("id", "");
    cookie.setMaxAge(0); // 수명을 0초로 지정
    response.addCookie(cookie); // 쿠키 전송

    시간이 지난 쿠키는 브러우저에 의해 자동으로 삭제됨.

writecookie

readcookie 했음!

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

<% request.setCharacterEncoding("utf-8");

Cookie cookie = null;

//cookie = new Cookie(name, value);

cookie = new Cookie("name", "User1");

cookie.setMaxAge(30);

response.addCookie(cookie);

//30초의 생명을 만들고 보내주는거십니다.

cookie = new Cookie("kuk", "90");

cookie.setMaxAge(30);

response.addCookie(cookie);

cookie = new Cookie("eng", "90");

cookie.setMaxAge(30);

response.addCookie(cookie);

<!DOCTYPE html>

<html>

<head>

<title>쿠키 저장하기(Cookie객체의 사용)</title>

font-family: gulim;

font-size: 20px;

}

</style>

</head>

<body>

<jsp:include page="/menu/top.jsp" flush="false"/>

</div>

<jsp:include page="/menu/bottom.jsp" flush="false"/>

</body>

</html>

이것은 라이트쿠키

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

<% request.setCharacterEncoding("utf-8");

Cookie[] cookies = request.getCookies();

Cookie cookie = null;

String name = null;

int kuk = 0;

int eng = 0;

for(int i = 0; i<cookies.length; i++){

cookie = cookies[i];

if(cookie.getName().equals("name")){

name = cookie.getValue();

}

else if(cookie.getName().equals("kuk")){

kuk = Integer.parseInt(cookie.getValue());

}

else if(cookie.getName().equals("eng")){

eng = Integer.parseInt(cookie.getValue());

}

<!DOCTYPE html>

<html>

<head>

<title>쿠키 읽어 오기(Cookie객체의 사용)</title>

font-family: gulim;

font-size: 20px;

}

</style>

</head>

<body>

<jsp:include page="/menu/top.jsp" flush="false"/>

if(name!= null){

out.println("성명: " + name + "<br>");

out.println("국어: " + kuk + "<br>");

out.println("영어: " + eng + "<br>");

out.println("총점: " + (kuk+eng) + "<br>");

out.println("평균: " + (kuk+eng)/2 + "<br>");

out.println("30초 후 쿠키는 인식이 되지 않습니다. "+ "<br>");

}

else{

out.println("쿠키를 읽어올 수 없습니다." + "<br>");

}

</DIV>

<jsp:include page="/menu/bottom.jsp" flush="false"/>

</body>

</html>

이것이 리드쿠키

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

<% request.setCharacterEncoding("utf-8");

Cookie[] cookies = request.getCookies();

Cookie cookie = null;

String sw = null;

if(cookies!=null){

for(int i = 0; i< cookies.length; i++){

cookie = cookies[i];

if(cookie.getName().equals("sw")){

sw = cookie.getValue();

}

<!DOCTYPE html>

<html>

<head>

* {

font-family: gulim;

font-size: 20px;

}

</style>

</head>

<body>

<jsp:include page="/menu/top.jsp" flush="false" />

if(sw!=null){

out.print("재접속을 환영합니다." + "<br>");

}

else{

out.print("처음 접속 하셨군요!" + "<br>");

Cookie wcookie = null;

wcookie = new Cookie("sw", "1");

wcookie.setMaxAge(60);

response.addCookie(wcookie);

}

<br>

<br> <A href='./welcome.jsp'>Server 접속</A>

</DIV>

<jsp:include page="/menu/bottom.jsp" flush="false" />

</body>

</html>

이것은 웰컴

5. 수업

진도:

hw:

6. 할것

Lag(expr) Over(Partition by 절) as ㅁ

Lead

계산 대상의 데이터들을 Partition by 절로 구분해서 expr에 명시된 값을 기준으로 이전/이후의 row값을 반환한다.

as는 생략 가능

Over함수는 Over(partition by Column1 order by column2)

형식으로

Column1이 같은 값을 기준으로 묶은 것을 Column2를 기준으로 정렬해서 표현식을 수행한다.

http://www.bionixwallpaper.com/downloads/Animated%20Desktop%20Wallpaper/index.html

이걸로 배경화면 바꿀 수 있음 ㅋㅋㅋㅋㅋ

넘나이쁜것

럭키 블루 스미스ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ

http://luckybluegifs.co.vu/page/5

움짤 다모으면 이제 보느라 행복하겠지...

http://howways.blogspot.kr/2014/01/HTML-DIV-Position-Absolute-Relative-Fixed-and-top-bottom-left-right-attributes.html

요고 참고해서 뭐 만들었음

첨부파일에 쓸 거 있음

'Programming' 카테고리의 다른 글

160429: 34회차 (0)	2016.04.29
160428: 33회차 (0)	2016.04.28
160426: 31회차 (1)	2016.04.26
160425: 30회차 (0)	2016.04.25
160422: 29회차 (0)	2016.04.22

Posted by ＤＡＶＩＤ

PC

160427: 32회차

Focus Input Box On Load

자동으로 포커스 이동하기

'Programming' 카테고리의 다른 글

티스토리툴바