귀찬항요

세상에 공짜보다 좋은게 없으므로

스프링 프레임워크를 사용한 웹페이지에 네이버 스마트 에디터를 적용하도록 하겟다.

사실 에디터 적용은 잭스도 할수있는일이니 사진 퀵 업로더가 주 내용이다.

나는 개발서버에서의 에디터 위치를 /resource/SE 로 설정하였다.

사실 플러그인 설치와 버튼 추가는 설명도 잘 되있을 뿐더러

이미 적용되어 있더라 ㅡ,.ㅡ 손댈것이 없다.

업로드용 javascript를 수정해야한다.

/resource/SE/photo_uploder/popup/attach_photo.js

callFileUploader 이건 html5를 사용하지않는 업로드용이라는데 이걸 기준으로 해보겠다.

request를 전송할 주소를 만들어준다.

나는 아래와같은 주소로 POST 형식으로 파일을 받을거다.

sCallback은 스프링에서는 지워줘도 될거같다.

놔둬봐야 쓸모업는 페이지 한번 더읽는거같다.

sUrl  : 'http://localhost:8080/web/imageUpload.gm'

파일업로드를하는데 대체 어디다 담아올릴건지 확인을 안했다.

사진업로드할때 나오는 팝업인 photo_uploader.html 파일을 살펴보면 Filedata 라는 이름을 찾을수 있다.

이 이름으로 파일을 받아서 저장하고해야하며 또 중요한건 파일을 올릴때 별도의 콜백함수이름을 같이 보내준다는거다.

결론은 파일이름,콜백함수명 두개를 화면으로 다시 가져와야한다.

나는 callBack.jsp 를 새로 만들었다.

 @RequestMapping(value = "/imageUpload.gm", method = RequestMethod.POST)
 public String writeBoard(Locale locale, Model model,HttpServletRequest request) {
  logger.info("Welcome imageUpload!! The client locale is {}.", locale);
  
  String filename = "";
  String filenameFront = "";
  String filenameExt = "";
  String convFilename = "";
  FileSystemResource uploadDir = new FileSystemResource("E:/APPLICATION/STC/vfabric-tc-server-developer-2.9.3.RELEASE/base-instance/wtpwebapps/gm_spring_mvc/resources/uploadimages/");
  
  MultipartHttpServletRequest multipart = (MultipartHttpServletRequest) request;
  MultipartFile file = multipart.getFile("Filedata");
  String callBack = multipart.getParameter("callback_func");
  if(!file.isEmpty()) {
   
   filename = file.getOriginalFilename();
   filenameFront = filename.substring(filename.lastIndexOf("."));
   filenameExt = filename.substring(filename.lastIndexOf("."),filename.length());
   //convFilename = Tool.getCurrentDayTimeMill() + filenameExt;
   convFilename = "";
   logger.info("OriginalFilename : {}", filename);
   logger.info("OriginalFilename front : {}", filenameFront);
   logger.info("OriginalFilename ext : {}", filenameExt);
   logger.info("uploadDir : {}", uploadDir.getPath());
   
   try {
    if(file.getSize() > 0){
     File out = new File(uploadDir.getPath() + "/" + Tool.getCurrentDayTimeMill() + filenameExt);
     FileCopyUtils.copy(file.getBytes(), out);
     convFilename = out.getName();
     logger.info("ConvertFilename : {}", convFilename);
    }
   } catch (IOException e) {
    e.printStackTrace();
   }
  
  }

  model.addAttribute("filename", convFilename);
  model.addAttribute("callback_func", callBack);

  return "/util/callback";
 }

이러면 파일이 저장된 후 파일이름과 콜백함수명을 callBack.jsp로 뱉어준다.

기존 에디터 샘플에있는 callBack.html 을 내jsp경로(/util/)로 옮겨주고 일부 내용만 수정해준다.

var oParameter = {callback_func:"${callback_func}",sFileName : "${filename}",sFileURL : "http://localhost:8080/web/resources/uploadimages/${filename}",bNewLine : true }; // query array

뭐 더이상의 설명은 생략한다.

결과물.

먼저 스프링 환경변수를 추가한다.

속성은 업로드사이즈 20메가 제한만 두었다.

<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<property name="maxUploadSize" value="20000000"></property>
</bean>

두번째 CommonsMultipartResolver 는 스프링 설치시 포함되지 않은 두개의 라이브러리를 요구한다.

http://commons.apache.org/proper/commons-fileupload/

세번째 컨트롤러에서 파일업로드를 처리한다.

내경우 실제 운영용서버는 라즈베리파이이며 웹서버가 별개이기때문에 파일경로관련하여 각별히 신경써야한다.

내소스 발췌

 @RequestMapping(value = "/write.gm", method = RequestMethod.POST)
 public String writeBoard(Locale locale, Model model,HttpServletRequest request) {
  logger.info("Welcome board write insert!! The client locale is {}.", locale);
  
  String filename = "";
  String filenameFront = "";
  String filenameExt = "";
  String convFilename = "";
  FileSystemResource uploadDir = new FileSystemResource("E:/APPLICATION/STS/vfabric-tc-server-developer-2.9.3.RELEASE/base-instance/wtpwebapps/gm_spring_mvc/WEB-INF/uploadfiles/");
  //FileSystemResource uploadDir = new FileSystemResource("/var/www/web/uploadfiles/"); //운영시스템용
  MultipartHttpServletRequest multipart = (MultipartHttpServletRequest) request;
  MultipartFile file = multipart.getFile("fileupload");
  
  if(!file.isEmpty()) {
   
   filename = file.getOriginalFilename();
   filenameFront = filename.substring(filename.lastIndexOf("."));
   filenameExt = filename.substring(filename.lastIndexOf("."),filename.length());
   convFilename = "";
   logger.info("OriginalFilename : {}", filename);
   logger.info("OriginalFilename front : {}", filenameFront);
   logger.info("OriginalFilename ext : {}", filenameExt);
   logger.info("uploadDir : {}", uploadDir.getPath());
   
   try {
    if(file.getSize() > 0){
     File out = new File(uploadDir.getPath() + "/" + Tool.getCurrentDayTimeMill() + filenameExt);
     FileCopyUtils.copy(file.getBytes(), out);
     convFilename = out.getName();
     logger.info("ConvertFilename : {}", out.getName());
    }
   } catch (IOException e) {
    e.printStackTrace();
   }
  
  }

  String location = multipart.getParameter("location") == null ? "1" : multipart.getParameter("location");
  String stringPage = multipart.getParameter("page") == null ? "" : multipart.getParameter("page");
  logger.info("location = {} / page = {}", location,stringPage);
  HashMap argument = new HashMap();
  argument.put("title", Tool.encodeHTMLSpecialChar(multipart.getParameter("title"), 2));
  argument.put("writer", Tool.encodeHTMLSpecialChar(multipart.getParameter("writer"), 2));
  argument.put("board_location", location);
  argument.put("content", multipart.getParameter("ir1"));
  argument.put("password", multipart.getParameter("password"));
  argument.put("ori_filename", filename);
  argument.put("filename", convFilename);
  boardService.insertBoard(argument);
  
  model.addAttribute("location", location);

  return board(locale,model,request);
 }

마지막으로 화면에서 form 생성시 가장 기본적인 내용.

enctype="multipart/form-data"

가장먼저 라이브러리 업데이트를 해야된다.

maven 요즘 다들 쓰져?

pom.xml에 해당내용을 추가한다.

  <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-jdbc</artifactId>
      <version>3.2.4.RELEASE</version>
  </dependency>
  <dependency>
      <groupId>mysql</groupId>
      <artifactId>mysql-connector-java</artifactId>
      <version>5.1.26</version>
  </dependency>
  <dependency>
      <groupId>com.kenai.nbpwr</groupId>
      <artifactId>org-apache-commons-dbcp</artifactId>
      <version>1.2.2-201002241055</version>
  </dependency>
  <dependency>
     <groupId>org.mybatis</groupId>
     <artifactId>mybatis</artifactId>
     <version>3.2.2</version>
   </dependency>
   <dependency>
     <groupId>org.mybatis</groupId>
     <artifactId>mybatis-spring</artifactId>
     <version>1.2.0</version>
   </dependency>

저장하면 자동으로 라이브러리가 업데이트된다.

그후에 mybatis 환경파일을 만든다.

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"

    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xmlns:context="http://www.springframework.org/schema/context"
    xmlns:tx="http://www.springframework.org/schema/tx"
    xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd
        http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx-3.0.xsd
        http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-3.0.xsd">
  
    <context:component-scan base-package="com.pgmman.webmvc"/>

    <context:property-placeholder location="classpath:jdbc.properties"/>
    <bean id="dataSource" class="org.springframework.jdbc.datasource.DriverManagerDataSource">
        <property name="driverClassName" value="${jdbc.driverClassName}"/>
        <property name="url" value="${jdbc.url}"/>
        <property name="username" value="${jdbc.username}"/>
        <property name="password" value="${jdbc.password}"/>
    </bean>
 
    <bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
        <property name="dataSource" ref="dataSource"/>
        <property name="typeAliasesPackage" value="com.pgmman.webmvc.vo"/>
        <property name="mapperLocations" value="classpath*:com/pgmman/webmvc/mapper/*.xml"/>
    </bean>

    <bean id="sqlSession" class="org.mybatis.spring.SqlSessionTemplate">
        <constructor-arg index="0" ref="sqlSessionFactory"/>
    </bean>
   
 <bean id="transactionManager" class="org.springframework.jdbc.datasource.DataSourceTransactionManager">
   <property name="dataSource" ref="dataSource"/>
 </bean>
 <tx:annotation-driven transaction-manager="transactionManager" />

</beans>

중간에 환경파일이 하나 있을것이다 jdbc.properties 요놈을 생성해준다.

jdbc.driverClassName=com.mysql.jdbc.Driver
jdbc.url=jdbc:mysql://localhost/gmProject
jdbc.username=비밀

jdbc.password=비밀

마지막으로 web.xml 에 해당 환경을 읽도록 추가해준다.

전부 다읽도록 수정했다.

테스트해야지.

테스트할 쿼리를 user.xml에 생성했다.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
  "http://mybatis.org/dtd/mybatis-3-mapper.dtd">

<mapper namespace="user">

  <select id="getUserList" resultType="UserInfoVO">
   SELECT user_id,user_name
   FROM user
  </select>

</mapper>

dao도 생성한다.

@Repository
public class UserInfoDao {

  @Autowired
  private SqlSession sqlSession;

  public List<UserInfoVO> getUserList() {

   return sqlSession.selectList("user.getUserList");

  }

}

service생성한다.

@Service
public class UserInfoService {

  @Autowired
  private UserInfoDao userInfoDao;

  public List<UserInfoVO> getUserList() {

   return userInfoDao.getUserList();

  }

}

Controller생성한다.

@Controller
public class BoardController {
 
 @Autowired
 private UserInfoService userInfoService;

 private static final Logger logger = LoggerFactory.getLogger(BoardController.class);
 
 @RequestMapping(value = "/board.gm", method = RequestMethod.GET)
 public String home(Locale locale, Model model) {
  logger.info("Welcome board!! The client locale is {}.", locale);
  
  Date date = new Date();
  DateFormat dateFormat = DateFormat.getDateTimeInstance(DateFormat.LONG, DateFormat.LONG, locale);
  
  String formattedDate = dateFormat.format(date);
  
  model.addAttribute("serverTime", formattedDate );
  model.addAttribute("userList", userInfoService.getUserList());

  return "board";
 }

}

화면 생성한다.

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page session="false" pageEncoding="utf-8" %>
<%
 //UserInfoVO user;
 //user = request.getAttribute("userList");
%>
<html>
<head>
 <title>Board</title>
</head>
<body>
<h1>
 Hello world! 
</h1>

<P>  The time on the server is ${serverTime}. </P>

    <c:forEach var='user' items='${userList}'>
     ${user.user_id}/${user.user_name}<br>
    </c:forEach>
</body>
</html>

자 그럼 보일것이다.

끝.

일단 설치를 한다

apt-get install mysql-server mysql-client

설치중에 비밀번호를 입력한다.

설치후에 접속해서 기초적인 설정을 한다.

mysql -p

암호치고 

디비와 유저를 생성해준다.

mysql> create database gmproject;
Query OK, 1 row affected (0.00 sec)

mysql> show databases;
+--------------------+
| Database           |
+--------------------+
| information_schema |
| gmproject          |
| mysql              |
| performance_schema |
+--------------------+
4 rows in set (0.01 sec)

mysql> grant select,insert,update,delete,create,drop,alter on gmproject.* to 'pgmman'@'%' identified by '비밀';
Query OK, 0 rows affected (0.01 sec)

mysql>
mysql> flush privileges;
Query OK, 0 rows affected (0.01 sec)

exit로 종료하고

생성한 아뒤로 접속하면된다.

root@raspberrypi:/usr/local/apache-tomcat-6.0.37/webapps/web# mysql -u pgmman -p
Enter password:
Welcome to the MySQL monitor.  Commands end with ; or \g.
Your MySQL connection id is 51
Server version: 5.5.33-0+wheezy1 (Debian)

Copyright (c) 2000, 2013, Oracle and/or its affiliates. All rights reserved.

Oracle is a registered trademark of Oracle Corporation and/or its
affiliates. Other names may be trademarks of their respective
owners.

Type 'help;' or '\h' for help. Type '\c' to clear the current input statement.

mysql> use gmproject
Database changed

자 나는 한단계 더가서

기존 사용하던 디비의 정보를 새로 설치한 서버에 옮기고싶다.

기존 윈도우 시스템에서 백업을 수행한다.

E:\APPLICATION\mysql-5.1.48\bin>mysqldump -uroot -p gmproject > gmproject.sql
Enter password: *******

E:\APPLICATION\mysql-5.1.48\bin>dir *.sql
 E 드라이브의 볼륨: MAIN_APP
 볼륨 일련 번호: F862-C7B4

 E:\APPLICATION\mysql-5.1.48\bin 디렉터리

2014-01-22  오후 03:51            13,906 gmproject.sql
               1개 파일              13,906 바이트
               0개 디렉터리  17,593,155,584 바이트 남음

E:\APPLICATION\mysql-5.1.48\bin>

전에 설치한 ftp서버를 통하여 백업파일을 업로드한다.

그담에 복원명령어 치면 끝

root@raspberrypi:/home/pi# mysql -u root -p gmproject < ./gmproject.sql
Enter password:
root@raspberrypi:/home/pi# mysql -upgmman -p
Enter password:
Welcome to the MySQL monitor.  Commands end with ; or \g.
Your MySQL connection id is 54
Server version: 5.5.33-0+wheezy1 (Debian)

Copyright (c) 2000, 2013, Oracle and/or its affiliates. All rights reserved.

Oracle is a registered trademark of Oracle Corporation and/or its
affiliates. Other names may be trademarks of their respective
owners.

Type 'help;' or '\h' for help. Type '\c' to clear the current input statement.

mysql> use gmproject
Database changed
mysql> show tables;
+---------------------+
| Tables_in_gmproject |
+---------------------+
| board               |
| developer           |
| menu                |
| uploadfiles         |
| user                |
+---------------------+
5 rows in set (0.01 sec)

mysql>

정상적으로 들어왔다.
 

java를 설치한다.

apt-get install openjdk-7-jdk

설치됬다.

환경변수를 등록해준다.

root@raspberrypi:/usr/lib/jvm# nano /etc/profile

아래 라인을 추가

export JAVA_HOME="/usr/lib/jvm/java-7-openjdk-armhf"

그리고 등록 후 확인한다.

root@raspberrypi:/usr/lib/jvm# source /etc/profile
root@raspberrypi:/usr/lib/jvm# echo $JAVA_HOME
/usr/lib/jvm/java-7-openjdk-armhf

이제 톰캣을 받는다.

root@raspberrypi:/usr/local# wget http://apache.mirror.cdnetworks.com/tomcat/tomcat-6/v6.0.37/bin/apache-tomcat-6.0.37.tar.gz
--2014-01-21 11:12:39--  http://apache.mirror.cdnetworks.com/tomcat/tomcat-6/v6.0.37/bin/apache-tomcat-6.0.37.tar.gz
Resolving apache.mirror.cdnetworks.com (apache.mirror.cdnetworks.com)... 61.110.198.174
Connecting to apache.mirror.cdnetworks.com (apache.mirror.cdnetworks.com)|61.110.198.174|:80... connected.
HTTP request sent, awaiting response... 200 OK
Length: 6885442 (6.6M) [application/x-gzip]
Saving to: `apache-tomcat-6.0.37.tar.gz'

100%[=====================================================================>] 6,885,442   2.06M/s   in 3.2s

2014-01-21 11:12:42 (2.02 MB/s) - `apache-tomcat-6.0.37.tar.gz' saved [6885442/6885442]

이제 다운로드받은 톰캣을 압축을 푼다.

tar -zxvf apa~(tab누르면 자동완성된다)

자동실행되게한다.

nano /etc/rc.local

아래처럼

/usr/local/apache-tomcat-6.0.37/bin/startup.sh

이제 아파치를 설치한다.

apt-get install apache2

apt-get install libapache2-mod-jk

환경설정파일을 편집해서 jk module을 사용하도록 추가한다.

root@raspberrypi:/etc/apache2# nano apache2.conf

#JK_MODULE
LoadModule jk_module /usr/lib/apache2/modules/mod_jk.s

jk module사용하여 넘길 패턴을 설정할수있도록 해당 파일을 수정한다.

root@raspberrypi:/etc/apache2# cd sites-enabled/
root@raspberrypi:/etc/apache2/sites-enabled# ls
000-default
root@raspberrypi:/etc/apache2/sites-enabled# nano 000-default

해당 내용을 추가해 넣는다. 무식하게 똑같이 따라넣는건 아니다.

JkMount /*.jsp ajp13_worker
JkMount /*.gm ajp13_worker

로컬호스트에 접속했을떄 It work! 뭐 이런말 뜨면 apache가 정상작동 하고있는상황

로컬호스트/index.jsp 로 접속시 톰캣이 뜨면 연동성공한거다.

요렇게

어? 끝!

이왕이면 업데이트부터 한다.

apt-get update

apt-get upgrade

어... 생각보다 오래걸렸음.

ftp를 설치한다.

root@raspberrypi:~# apt-get install vsftpd

환경설정파일을 편집한다.

root@raspberrypi:~# nano /etc/vsftpd.conf

참고할내용.

# FTP서버 와 외부 접속 허용여부

listen=YES

# 익명 로그인 설정

anonymous_enable=NO

# 로컬 접속 여부설정

local_enable=YES

# 쓰기(업로드)기능설정

write_enable=YES

# 업로드 후, 폴더권한 자동설정(777=자동설정)

local_umask=022

# 본인 외 계정폴더 접속 설정

chroot_list_enable=YES

# chroot_list 파일경로 지정

chroot_list_file=/etc/vsftpd.chroot_list

# passwd 파일에 등록된 대로 chroot를 실행여부

passwd_chroot_enable=YES

# chroot를 위해 root디렉토리를 설정

local_root=/home/

8기가 메모리에 라즈베리파이를 설치했는데

알고보니 2기가만 쓰고있었다는 사실.

root@raspberrypi:/# df -h
Filesystem      Size  Used Avail Use% Mounted on
rootfs          1.8G  1.7G     0 100% /
/dev/root       1.8G  1.7G     0 100% /
devtmpfs        116M     0  116M   0% /dev
tmpfs            25M  244K   25M   1% /run
tmpfs           5.0M     0  5.0M   0% /run/lock
tmpfs            50M     0   50M   0% /run/shm
/dev/mmcblk0p1   56M   19M   38M  33% /boot
tmpfs            50M     0   50M   0% /tmp

파티션 리스트를 확인하고

root@raspberrypi:/# fdisk -l

Disk /dev/mmcblk0: 7948 MB, 7948206080 bytes
4 heads, 16 sectors/track, 242560 cylinders, total 15523840 sectors
Units = sectors of 1 * 512 = 512 bytes
Sector size (logical/physical): 512 bytes / 512 bytes
I/O size (minimum/optimal): 512 bytes / 512 bytes
Disk identifier: 0x000c7b31

        Device Boot      Start         End      Blocks   Id  System
/dev/mmcblk0p1            8192      122879       57344    c  W95 FAT32 (LBA)
/dev/mmcblk0p2          122880     3788799     1832960   83  Linux

fdisk를 실행한다.

root@raspberrypi:/# fdisk -u -c /dev/mmcblk0

delete - 파티션2 - new - primary - 파티션2 - 시작섹터~종료섹터 순서로 입력한다.

Command (m for help): d
Partition number (1-4): 2

Command (m for help): n
Partition type:
   p   primary (1 primary, 0 extended, 3 free)
   e   extended
Select (default p): p
Partition number (1-4, default 2): 2
First sector (2048-15523839, default 2048): 122880
Last sector, +sectors or +size{K,M,G} (122880-15523839, default 15523839): 15523839

그냥 enter 치면 default로 자동세팅된다.

저장하고 종료

Command (m for help): w
The partition table has been altered!

Calling ioctl() to re-read partition table.

WARNING: Re-reading the partition table failed with error 16: Device or resource busy.
The kernel still uses the old table. The new table will be used at
the next reboot or after you run partprobe(8) or kpartx(8)
Syncing disks.

그리고 재부팅.

파티션 재인식후 확인.

root@raspberrypi:~# resize2fs /dev/mmcblk0p2
resize2fs 1.42.5 (29-Jul-2012)
Filesystem at /dev/mmcblk0p2 is mounted on /; on-line resizing required
old_desc_blocks = 1, new_desc_blocks = 1
The filesystem on /dev/mmcblk0p2 is now 1925120 blocks long.

root@raspberrypi:~# df -h
Filesystem      Size  Used Avail Use% Mounted on
rootfs          7.3G  1.7G  5.3G  25% /
/dev/root       7.3G  1.7G  5.3G  25% /
devtmpfs        116M     0  116M   0% /dev
tmpfs            25M  240K   25M   1% /run
tmpfs           5.0M     0  5.0M   0% /run/lock
tmpfs            50M     0   50M   0% /run/shm
/dev/mmcblk0p1   56M   19M   38M  33% /boot
tmpfs            50M     0   50M   0% /tmp

끝.

오늘아침 네이버를 트는데 이런게 뜬다.

찌질할정도의 의심병때문에 링크부터 확인한다.

mydank.ibk.go.kr www.wooridank.com  danking.sinhan.com

dank ????????????

궁금하니 하나 들어가봅니다.

저는 우리은행으로 선택

뭔가 은행사이트 비스무리한 사이트가 나옵니다.

하지만 인터넷중독 20년경력의 날카로운 눈빛은 피하지 못할정도로 어설픈 그림판편집의 흔적이 보입니다.

가짜이름과 주민등록생성로직에 따른 가짜 주민등록번호를 입력하자 손쉽게 통과됩니다.

오늘 보고싶었던 화면이 나옵니다.

정말 노골적이네요.

젊은층에서도 이런 멍청한 사기를 구분못하는데 어르신들은 어떨까?

참 우리나라 노답 노대책.