- 분류 전체보기 (1001)
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | |||||
| 3 | 4 | 5 | 6 | 7 | 8 | 9 |
| 10 | 11 | 12 | 13 | 14 | 15 | 16 |
| 17 | 18 | 19 | 20 | 21 | 22 | 23 |
| 24 | 25 | 26 | 27 | 28 | 29 | 30 |
- rxjava hot observable
- 큐 자바 코드
- 안드로이드 유닛 테스트 예시
- jvm이란
- 안드로이드 유닛 테스트
- android retrofit login
- ar vr 차이
- Rxjava Observable
- 안드로이드 라이선스 종류
- rxjava disposable
- 안드로이드 os 구조
- 자바 다형성
- 멤버변수
- 안드로이드 레트로핏 crud
- android ar 개발
- 스택 큐 차이
- jvm 작동 원리
- 안드로이드 유닛테스트란
- 서비스 쓰레드 차이
- 서비스 vs 쓰레드
- ANR이란
- 안드로이드 레트로핏 사용법
- rxjava cold observable
- 플러터 설치 2022
- 2022 플러터 안드로이드 스튜디오
- 안드로이드 라이선스
- 2022 플러터 설치
- 스택 자바 코드
- 클래스
- 객체
- Today
- Total
나만을 위한 블로그
[PHP] 네이버 스마트 에디터 2.0 써서 사진과 글 올리기 본문
※ 이 글은 가상 머신에 리눅스와 APM 연동한 상태에서 진행함. 즉 윈도우 위에서 가상머신으로 리눅스를 돌리는 상태임
※ MySQL 외부 접속 툴은 하이디 SQL을 사용했기 때문에 이것 기준으로 기록함
참고한 사이트 : https://www.everdevel.com/open-source/naver-smart-editor.php
everdevel
웹 입문 사이트 에버디벨 - HTML, CSS, JavaScript, jQuery, MySQL ,PHP를 다룹니다.
www.everdevel.com
내 웹 페이지의 게시판에 글과 사진을 함께 올리고 싶어졌다.
그래서 방법을 찾아보니 스마트 에디터라는 게 있다더라.
CKEditor, 네이버 스마트 에디터 등 종류가 여러가지 있었지만 옛날에 어떤 네이버 카페에서 활동했을 때 자주 봐서 눈에 익은 네이버 스마트 에디터를 사용하기로 했다.
먼저 사이트에서 이 파일을 다운받으라고 한다. 네이버 스마트 에디터 파일들을 압축한 것이다.
그 다음 글과 이미지들을 저장할 DB를 만들어야 한다.
DB 이름은 nse / 테이블 이름은 nse_tb다.
테이블 컬럼의 내용은 이렇게 되도록 만들면 된다.
노란색 열쇠는 프라이머리 키를 설정하면 나오는 것이고, 프라이머리 키로 설정된 컬럼은 볼드체가 된다.
하이디 SQL을 쓴다면 굳이 리눅스의 MySQL에서 쿼리 칠 필요 없이 쿼리 탭을 누른 다음 select * from nse_tb; 를 입력 후 F9를 눌러주면 쿼리가 실행된다. 정상적으로 테이블이 만들어졌다면 에러도 안 나오고 아무것도 나오지 않을 것이다.
DB를 만들었다면 접속할 수 있는 페이지를 만들어야 한다. index.php가 위치할 경로에 include 폴더를 만들고 connect_db.php 파일을 만든다.
파일 내용은 아래와 같다.
// connect_db.php
<?php
$host = "localhost";
$user = "사용자 이름";
$password = "비밀번호";
$db_name = "nse";
$connect = new mysqli($host, $user, $password, $db_name);
$connect->set_charset('utf8');
?>
다음은 메인 페이지인 index.php를 만들어야 한다. 전체 코드는 아래와 같다.
// index.php
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>nse</title>
<script type="text/javascript" src="./nse_files/js/HuskyEZCreator.js" charset="utf-8"></script>
<style>
.nse_content{width:660px;height:500px}
</style>
</head>
<body>
<form name="nse" action="add_db_nse.php" method="post">
<textarea name="ir1" id="ir1" class="nse_content"></textarea>
<script type="text/javascript">
var oEditors = [];
nhn.husky.EZCreator.createInIFrame({
oAppRef: oEditors,
elPlaceHolder: "ir1",
sSkinURI: "./nse_files/SmartEditor2Skin.html",
fCreator: "createSEditor2"
});
function submitContents(elClickedObj) {
// 에디터의 내용이 textarea에 적용됩니다.
oEditors.getById["ir1"].exec("UPDATE_CONTENTS_FIELD", []);
// 에디터의 내용에 대한 값 검증은 이곳에서 document.getElementById("ir1").value를 이용해서 처리하면 됩니다.
try {
elClickedObj.form.submit();
} catch(e) {}
}
</script>
<input type="submit" value="전송" onclick="submitContents(this)" />
</form>
</body>
</html>
다음은 add_db_nse.php의 전체 코드다.
3번과 4번 줄에 $sql 안에 있는 SQL문이 둘로 쪼개졌는데 당연히 한 줄로 만들어도 정상 작동한다.
// add_db_nse.php
<?php
include "./include/connect_db.php"; // 데이터 베이스 접속 프로그램 불러오기
$nse_content = $connect->escape_string($_POST['ir1']);
$sql = "insert into nse_tb(content)";
$sql .= " values ('{$nse_content}')";
$res = $connect->query($sql);
if($res) {
// DB에 입력 성공시
echo "데이터베이스에 성공적으로 입력되었습니다 결과를 보시려면 <a href='./show.php' target='_blank'>여기</a>를 누르세요.";
} else {
echo "실패"; // DB에 입력 실패시 '실패' 표시
}
?>
다음은 DB에 값이 제대로 들어갔는지 웹 페이지에서 확인하기 위해 show.php를 만든다.
아래는 전체 코드다.
// show.php
<?php
include "./include/connect_db.php";
$sql = "select * from nse_tb order by no desc limit 5";
$res = $connect->query($sql);
$showContent = $res->fetch_array(MYSQLI_ASSOC);
echo $showContent['content'];
?>
여기까지만 따라할 경우 글은 DB로 올라가지지만 이미지는 올라가지지 않는다.
이것을 설명하기 전에, 먼저 사진을 업로드하면 업로드한 사진은 어디에 저장될까?
맨 처음의 첨부파일로 시작했다면, 사진들이 저장되는 경로는 nse 폴더 안에 있는 myPhoto 폴더로 설정돼 있다.
경로를 변경하려면 /nse/nse_files/quick_photo_uploader/popup으로 들어가서 FileUploader_html5.php 파일을 수정해야 한다.
그런데 여기까지만 따라하고 '아 이제 사진 업로드 되겠지ㅎ?' 라 생각하며 사진 버튼을 누르고
이 팝업창이 나타난 후 이미지를 드래그한 뒤, 확인을 눌러도 아무 일도 일어나지 않는다.
??????????????????????????????????????????????????????????????????????????????????????????????????????
해결 방법이 있다. 바로 "권한" 이다.
2시간 가량 삽질하고 구글링하다 지식인의 이 글을 봤다.
네이버 스마트 에디터 사진업로드가 안됩니다.
네이버 스마트 에디터 사진업로드가 안됩니다. PHP 게시판에 적용해서 텍스트 입력과 수정은 서버에 저장되는데 사진 업로드가 안됩니다.사진버튼을 눌러서 팝업은 뜨고 사진 드래그까지는...
kin.naver.com
- 해당 폴더의 존재여부 및 퍼미션 여부 확인해 보세요
답변자의 이 한 문장이 아주 매우 판타스틱하게 중요하다.
1. 해당 폴더의 존재여부
2. 퍼미션 여부
웹 루트 디렉토리(난 htdocs다)에 들어가서 이 폴더가 있는지 확인해봤다. 아주 잘 있다.
다음은 퍼미션 여부를 확인할 차례다. 터미널에서 htdocs로 이동한 뒤 ll(소문자 엘 2번)을 눌러 폴더, 파일들의 권한 상태를 확인했다.
nse 폴더가 파란색이었다. CentOS 7에선 폴더 / 파일명이 파란색으로 되어 있으면 뭐가 꼭 안되더라...
곧바로 chmod -R 777 nse를 때려서 nse 폴더와 그 하위 디렉토리, 폴더들의 권한을 싹 다 바꿨다.
그 후 페이지를 새로고침하고 사진 올린 다음 확인....성공이다.
하이디 SQL로 쿼리 때려서 확인해도 잘 나오고, show.php 파일을 켜서 확인해봐도 아주 잘 나온다.
이걸로 네이버 스마트 에디터를 써서 사진과 글 동시에 올리기 예제 빌드 끝.
