HTML5첫걸음개발자기획자디자이너가함께읽고바로쓰는
카테고리 컴퓨터/IT > 프로그래밍/언어 > 웹프로그래밍 > HTML/SGML
지은이 브루스 로슨 (에이콘출판, 2010년)
상세보기


<article> 그 자체로 완전한(독립적인) 개별 콘텐츠를 의미

<section> 페이지 안의 주제가 다른 영역을 구분 짓거나 하나의 글을 부분으로 나누기 위한 것
  - '문서, 페이지, 애플리케이션, 사이트 안에 있는 그 자체로 완전한 개별 컨텐츠로 배포하거나 재사용하기 위한 것'이 아님

미투데이 따라집기!!!

me2daytest(1).JPG

 

테이블 생성 SQL

  1. create table me2daytest(
        pid number primary key,
        pname varchar2(20),
        particle varchar2(150),
        pwdate date );

 

index2.jsp

  1. <%@ page language="java" contentType="text/html; charset=EUC-KR" pageEncoding="EUC-KR"%>
    <html>
    <head>
    <script language="javascript" src="jslb_ajax.js" >
    </script> 
    <script language="javascript">
    <!--
        //콜백함수(수신시에 실행된다)
        function on_loaded(oj){
            //응답을 취득
            var res = oj.responseText

            //응답된 문자열을 DIV로 출력
            document.getElementById("list").innerHTML = res
        }

        function result(oj){
            //응답을 취득
            var res = oj.responseText
       
            //응답된 문자열을 DIV로 출력
            document.getElementById("result").innerHTML = res
    }

        //입력한 내용을 바로 업데이트 시킴.
        function input(oj){
            if (oj.form.article.value.length === 0) return
            sendRequest(result, '&name='+oj.form.name.value+'&article='+oj.form.article.value, 'POST', 'input.jsp', true, true)
            sendRequest(on_loaded, '', 'POST', 'list.jsp', true, true)
            oj.form.article.value='';
        }

        function on_formLoad(oj){
            sendRequest(on_loaded, '', 'POST', 'list.jsp', true, true)
        }


    //-->
    </script>
    <meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
    <title>허니몬의 me2day 떼쳇 따라잡기</title>
    </head>
        <body>
        <h3>사용법 : 이름 입력하고 내용 입력하고 Enter 혹은 글올리기 클릭하면 됨!!</h3>
        <h3>여러분은 낙장불입의 세계에 한발 들어섰습니다.</h3>
        <hr>
        <form>
        <table>
        <tr>
        <th>이름</th><th>내용</th><th><!-- 스크립트 값이 들어가야하려나? document.write(var); -->
        <div id='result'></div>
        </th>
        </tr>
        <tr>
       
        <td><input type='text' name='name' /></td><td><input type='text' name='article' size='50' maxlength='50' onkeyup='on_formLoad(this)'/></td><td><input type='button' value='글 올리기' onclick='input(this)' /></td>
       
        </tr>
        </table>
        </form>
        화면출력!!
        <div id='list'></div>
        </body>
    </html>

 

input.jsp

  1. <%@ page language="java" contentType="text/html; charset=EUC-KR" pageEncoding="EUC-KR"%>
    <jsp:useBean id="data" class="data.DataProc" scope="page"/>
    <%
        String name = request.getParameter("name");
        String article = request.getParameter("article");
       
        data.insertData(name,article);
        out.println("처리완료");
    %>

 

list.jsp

  1. <%@ page language="java" contentType="text/html; charset=EUC-KR" pageEncoding="EUC-KR"%>
    <%@ page import='java.util.*, data.*' %>
    <jsp:useBean id='data' class='data.DataProc' scope='page' />
    <%
        Vector result = data.list();

        if( result.isEmpty() == true) {
            out.println("입력된 데이터가 없습니다.");
        } else {
    %>
        <table border='1'>
    <%
            //vector는 0부터 시작하는 거였구나... 그걸 몰랐다!!
            for( int i = 0; i < result.size(); i++){
                DataBean b = (DataBean)result.elementAt(i);
                String name = b.getPname();
                String article = b.getParticle();
                String wdate = b.getPwdate();
    %>
            <tr>
            <td><%= name %></td><td><%= article %></td><td><%= wdate %></td>
            </tr>
    <%
            }
    %>
        </table>
    <%
           
        }
    %>

 

DataBean.jsp

  1. package data;

    public class DataBean {
        private String pname="";
        private String particle="";
        private String pwdate="";
       
        public DataBean(){}
       
        public DataBean(String pname, String particle, String pwdate){
            this.pname = pname;
            this.particle = particle;
            this.pwdate = pwdate;
        }

        public String getPname() {
            return pname;
        }

        public void setPname(String pname) {
            this.pname = pname;
        }

        public String getParticle() {
            return particle;
        }

        public void setParticle(String particle) {
            this.particle = particle;
        }

        public String getPwdate() {
            return pwdate;
        }

        public void setPwdate(String pwdate) {
            this.pwdate = pwdate;
        }
       
    }

 

DataProc.java

  1. package data;

    import java.sql.Connection;
    import java.sql.ResultSet;
    import java.sql.Statement;
    import java.util.Vector;

    import javax.naming.InitialContext;
    import javax.sql.DataSource;

    public class DataProc {
        DataSource ds;
       
        public DataProc(){
            try {
                InitialContext context = new InitialContext();
                ds = (DataSource)context.lookup("java:comp/env/jdbc/oracle");
            } catch(Exception e){
                e.printStackTrace();
            }
        }
       
        public void insertData(String name, String article){
            Statement stat;
            Connection con;
            int pid = checkpid();
           
            String sql = "INSERT INTO me2daytest values(" + pid + ",'" + name + "', '"+ article +"', sysdate)";
            try{
                con = ds.getConnection();
                stat = con.createStatement();
                stat.executeUpdate(sql);
                stat.close();
                con.close();
            } catch(Exception e) {
                e.printStackTrace();
            }
        }
       
        public Vector list(){
            Connection con;
            Statement stat;
            Vector result = new Vector();
           
            String sql = "SELECT pname, particle, pwdate FROM me2daytest ORDER BY pwdate desc";
            try {
                con = ds.getConnection();
                stat = con.createStatement();
                ResultSet rs = stat.executeQuery(sql);
                while( rs.next() ){
                    String name = rs.getString(1);
                    String article = rs.getString(2);
                    String wdate = rs.getString(3);
                    DataBean bean = new DataBean(name, article, wdate);
                    result.add(bean);
                }
                rs.close();
                stat.close();
                con.close();
            } catch(Exception e){
                e.printStackTrace();
            }
            return result;   
        }
       
        public int checkpid(){
            Connection con;
            Statement stat;
            int pid=0;
           
            String sql = "SELECT max(pid) FROM me2daytest";
            try {
                con = ds.getConnection();
                stat = con.createStatement();
                ResultSet rs = stat.executeQuery(sql);
                while( rs.next() ){
                    pid = rs.getInt(1);
                }
                rs.close();
                stat.close();
                con.close();
            } catch (Exception e) {
                e.printStackTrace();
            }
            return pid+1;
        }
    }

 

문제점 :

  • 다른 사람이 입력한 뒤에 Reload가 되지 않는다. 이건 어떻게 해야하지? ㅡㅅ-)? 원격인터페이스를 써줘야할까? EJB 무상태 세션빈?
  • 본문 입력시 입력하지 않고 입력했을 때 javascript로 거절하도록 한다.
  • 페이지 나누기 기능이 필요할 듯 하다.
  • 미관상 이쁘지 않다.

이 글은 스프링노트에서 작성되었습니다.

● 야후지도 API 사용하기
http://www.beautysite.kr/Article/home/beauty/bbs.php?id=TipTech&q=view&uid=3

● 네이버 DeveloperCenter API 이용 Tutorial
http://dev.naver.com/openapi/tutorial

● 구글맵 오픈API 사용하기 - 구글맵 시작
http://adeveloper.tistory.com/tag/google%20openapi

● Version 3.7야후! 지도 AJAX API
http://kr.open.gugi.yahoo.com/document/tutorials.php

●JavaScript로 오픈API 이용 하기
http://urin79.com/zb/utdae/780017
자바스크립트를 기반으로 해서 미투데이 API를 활용해서 웹 애플리케이션을 한번 만들어 보자꾸나.
ㅡㅅ-)> 이런 때 해보지 언제 해보겠는가... 도전해보지 않고 포기하기에는 지루하지 않을까?? ^^;;

생각했던 것 보다, me2day api를 이용한 다양한 프로그램들이 존재한다. me2day용 API DOCs도 존재하고....

뭔가를 하기 위해서는 거기에 대한 준비가 필요하구나.


   제가 만들고 싶은 것은 API를 이용한 매쉬업 형태로 개발을 해야할 것 같습니다. 그러기 위해서는 자바스크립트를 기반으로 하는 것이 좋을 듯 하구요. 과거에 단순히 복사하고 붙여넣기 방식으로 구현하면 된다고 생각했던 자바 스크립트였는데, 지금은 공부해야할 것이 자바 만큼이나 많은 분야가 되어버리는 군요. ㅡㅅ-); 그나저나... 스-);; 문제로군요. 우분투에서는 플래시로 작성되어 있는 영상들이 정상적으로 작동을 하지 않습니다. OTL... VirtualBox로 윈도우 XP를 사용하면서 시스템 자원이 모두 그쪽에서 점유하고 있어서 였을까요? 우분투 업데이트를 마치고 나니까 정상적으로 플래시에서 소리가 나는군요. 으흠!?

● 강연하시는 분(Douglas Crockford)의 블로그 : http://www.crockford.com/




이 글은, 제가 이해해서 올린다기 보다는 이해하기 위해, 올해 안에 공부해야할 것들 중 하나인 JavaScript 부분에 대한 내용을 기록해두는 것이라고 해도 될 것 같습니다. ㅠㅅ-) 공부해야할 것들은 점점 많아져 가고 머리에 주입할 수 있는 주입량은 한계가 있고... 이것 참 난감하네요. 매쉬업이 발달하면 하게 될수록 매쉬업 언어로서의 자바스크립트도 그 영역을 더욱 넓혀가게 될 것 같군요.

+ Recent posts