'2016/07'에 해당되는 글 2건

  1. 2016.07.29 청주 문암생태공원 수영장 나들이
  2. 2016.07.22 php summernote 에디터 설치 (3)

우연히 집앞에서 청주신문을 보았습니다.
신문을 읽다보니 문암생태공원에 무료 수영장을 개설한 소식을 듣게되어서 집에서도 5~10분이면 가는 곳이고 아이들도 방학이라서 한번 가보았습니다.

 

 

텐트 및 그늘막은 설치를 못한다고 써있습니다.
그래서 아래 보이는 사진처럼 천막 안에서 돋자리를 펼쳐야 하는데...
자리가 없더군요. 그래서 안내원한테 물어보니 잔디밭쪽에 하면 될거같다고 확실하게는 말하진 않았지만 아무튼 자리가 없어서 잔디밭에 그늘막텐트를...

 

 

문암생태공원 주차장 바로 옆(생태공원 들어가는 초입)에 수영장을 만들어 놓았습니다.

 

 

안내문은 위처럼 쓰여져 있습니다.
2시간씩 운영하며, 10:00 ~ 12:00 , 13:00 ~ 15:00, 15:00 ~ 17:00 3번 합니다.
그리고 50분 놀고 10분씩 휴식시간을 갖습니다.
오전에 번호표를 미리 받았다가 오후에 가도 될듯합니다.

 

 

저렇게 시원하게 아이들 물놀이 하기엔  딱 좋네요.
어른들은 못들어감 ㅋ

 

 

수영장은 총 두개!
하나는 3~5 유아들이 놀수 있는 공간이고
또 다른 하나는 6~10세 정도 놀수있는 공간입니다.

 

 

7월23일부터 8월 28일까지 운영되며, 월요일은 쉬는군요.
아마도 주말엔 사람들 엄청 많지않을까 예상되네요.
평일에 아이들 데리고 잠시 두 시간 놀다와도 아이들에게 색다른 추억이 되지 않을까 싶네요.

마치 청주시 홍보대사같은 느낌이 ㅎㅎ;;

Posted by 진격의 파파

댓글을 달아 주세요

 

오랜만에 프로그램에 대해서 포스팅 하네요.
시간이 여유가 있으니 이제 슬슬 포스팅을 다시 시작을 해볼까 합니다. ㅎㅎ;;

이번 포스팅 내용은 SUMMERNOTE  입니다.
반응형 웹에서 사용하는 에디터 입니다.
우리나라 개발자가 만들었다고 하니 왠지 더 정감이 갑니다.
그리고 굉장히 깔끔하게 잘 만들었다고 생각합니다.
요즘 반응형 웹이 대세인데 딱 맞는 에디터가 이렇게 존재하고 있다니 그것도 우리나라 개발자들이 모여서 만든 솔루션이니 정말 대단하다 생각합니다.
설치가 잘 안되어서 1~2일 고생했네요.
이 고생을 다른 누군가 또 반복하지 않게 하기위해 이렇게 내용을 씁니다.

설치 방법은 우선 SUMMERNOTE 홈페이지 http://summernote.org/ 에서 프로그램을 다운받으면 됩니다.

summernote-develop  이라는 압축 파일을 다운받은 후
스크립트 파일과 jquery 파일을 추가 해주면 되는데
  <script src="../js/jquery-1.11.3.min.js"></script>
  <!-- include summernote -->
  <link rel="stylesheet" href="../dist/summernote.css">
  <script type="text/javascript" src="../dist/summernote.js"></script>

위 처럼 링크만 걸어주면 끝!
그리고 그다음 해야 할일은 스크립트에 소스를 추가하면 됩니다.

  <script type="text/javascript">
   $(function() {
    $('.summernote').summernote({
     height: 200,
     lang : 'ko-KR',
    
 callbacks: {
      onImageUpload : function(files, editor, welEditable) {
       console.log('image upload:', files);
       sendFile(files[0], editor, welEditable);
      },
     }
    });
   function sendFile(file,editor,welEditable) {
   data = new FormData();
   data.append("file", file);
    $.ajax({
      
url: "saveimage.php", // image 저장 소스
      data: data,
      cache: false,
      contentType: false,
      processData: false,
      type: 'POST',
      success: function(data){
//       alert(data);
       var image = $('<img>').attr('src', '' + data); // 에디터에 img 태그로 저장을 하기 위함
       $('.summernote').summernote("insertNode", image[0]); // summernote 에디터에 img 태그를 보여줌
//       editor.insertImage(welEditable, data);
      },
      error: function(jqXHR, textStatus, errorThrown) {
        console.log(textStatus+" "+errorThrown);
      }
    });
   }
   $('form').on('submit', function (e) {
    e.preventDefault();
//     alert($('.summernote').summernote('code'));
//     alert($('.summernote').val());
   });
  });
</script>
저 위에 붉은색으로 표시한 부분 때문에 조금 애를 먹었네요. 원래 callback 을 안쓰고 작동을 한다고 해서 계속 수정을 했었는데 안되길래 구글링으로 조금 찾아보니 특정 버전에는 callback을 쓰라고 하더군요.

위 소스 보시면 url: "saveimage.php" 라는 분이 있습니다.
이미지를 첨부했을경우 특정 폴더에 이미지를 저장해야하죠.
그래서 이미지 첨부시 이미지 저장 폴더에 saveimage.php 파일이 실시간 저장을 하게 합니다.
이미지 저장 시 중복된 이름의 첨부를 방지하기 위해서 조금 소스를 수정한 파일입니다.

-- saveimage.php --
<?
if ($_FILES['file']['name']) {
 if (!$_FILES['file']['error']) {
  $name = md5(rand(100, 200));
  $ext = explode('.', $_FILES['file']['name']);
  $filename = $name . '.' . $ext[1];
  $destination = 'upload/' . $filename; //change this directory
  $location = $_FILES["file"]["tmp_name"];
  move_uploaded_file($location, $destination);
  echo '사용자의 이미지 저장위치 url' . $filename;//change this URL
 } else {
   echo $message = 'Ooops!  Your upload triggered the following error:  '.$_FILES['file']['error'];
 }
}

?>

위 처럼 작업을 하시면 됩니다.
혹시라도 저처럼 summernote 때문에 고생하는 분들이 없기를 바라면서
포스팅을 마칩니다.

'PHP > PHP 유용한 내용' 카테고리의 다른 글

php summernote 에디터 설치  (3) 2016.07.22
Posted by 진격의 파파

댓글을 달아 주세요

  1. 지나다가 2017.04.18 22:13  댓글주소  수정/삭제  댓글쓰기

    많은 도움이 되었습니다.

    감사합니다.

  2. 김윤희 2017.07.10 15:46  댓글주소  수정/삭제  댓글쓰기

    한참을 헤맸는데... 답이 여기 있었네요...

  3. 김윤희 2017.07.10 15:49  댓글주소  수정/삭제  댓글쓰기

    정보공유 감사합니다. ^^
    많은 도움이 되었습니다.