'Web 프로그램'에 해당되는 글 377건

require문, include문 : 자주 사용하는 PHP 코드를 다른 파일에 모아 두고 필요할 때 파일을 읽어들여서 사용할 수 있도록 하는 명령

require "파일명";

- 만일 지정된 파일이 존재하지 않을 경우에는 php.ini에 설정된 include_path에서 파일을 찾는다.

- include_path에도 파일이 존재하지 않는다면 require문을 작성한 현재 파일이 있는 디렉토리에서 찾는다.

- 현재 디렉토리에도 없다면 오류표시하고 정지된다.

require와 include의 차이점

- require문은 오류가 발생했을 경우에 Fatal Error가 되어 정지가 되어버린다.

- require_once() : 지정한 파일을 한 번 읽어 들이면 같은 처리 중에는 다시 읽어 들일 수 없다.

- include문은 오류가 발생했을 경우에 Warning을 출력하고 처리코드를 수행한다.

- include_once() : 지정된 파일을 이미 읽어 들어 경우에는 다시 파일을 읽어 들이지 않는다.

https://www.apachefriends.org/index.html 에서 XAMPP 를 다운로드한다.

설치를 했더니 바로 설치가 안되고 에러가 발생하면서 안된다.

원인은 443 포트를 VMware 사용하고 있어서라고 에러 메시지가 나온다.

AutoSet9 은 강제로 서비스를 OFF 시킨 상태다.

처음 설치하는 PC에서는 이상없이 80, 443 포트가 설치될 것이다.

https://stackoverflow.com/questions/18300377/xampp-apache-error-apache-shutdown-unexpectedly

에 나온 내용을 참조해서 443 포트를 4433으로 변경했다.

좀 더 직관적으로 환경설정 파일을 설정할 수 있도록 되어 있는 점은 상당히 편리한 거 같다.

보통 APM(Apache + PHP + MySQL)을 배울 때 환경설정하는 부분을 잘 모르는 경우가 많은데 이 툴은 이런 부분을 세부적으로 Control 할 수 있게 만든 것은 마음에 든다.

Config 에서 Editor 도 editplus.exe 로 경로를 변경해주었더니 EditPlus 로 연결된다.

httpd.conf 파일 내용을 아래와 같이 수정했다.

기존에 설치했던 경로를 그대로 이용하기 위해서다.

DocumentRoot "C:/AutoSet9/public_html/workspace"
<Directory "C:/AutoSet9/public_html/workspace">
    Options FollowSymLinks
    AllowOverride All
    Require all granted
</Directory>

#DocumentRoot "C:/xampp/htdocs"
#<Directory "C:/xampp/htdocs">
#    Options FollowSymLinks Includes ExecCGI
#    AllowOverride All
#    Require all granted
#</Directory>

IDE 개발툴은 https://netbeans.org/downloads/ 에서 PHP x64 버전을 다운로드 받는다.

5번에서 workspace 는 지워야 한다. 왜냐하면 default path 가 workspcae 까지 이기 때문이다.

여기까지 하면 툴 사용에 대한 기본 설정은 한 셈이다.

Feature differences between mysqli and PDO:

MySQL PDO 연결을 시도했더니 에러가 발생한다. 확인해보니 PDO 설치가 되어 있지 않다.

# 설치여부 확인
/usr/local/php/bin/php -i | grep PDO

# 설치한 PHP와 동일한 버전의 소스 다운로드 후 압축해제
# 소스파일에서 설치할 확장모듈과 동일한 이름의 경로로 이동
cd /usr/local/APM/php-5.6.30/ext/pdo_mysql
# phpize 파일을 실행한다.
/usr/local/php/bin/phpize
# configure 및 compile
./configure --with-php-config=/usr/local/php/bin/php-config --with-pdo-mysql=/usr/local/mysql
make
# make 명령어를 실행후 cd modules/ 하고 ll 하여 pdo_mysql.so 파일이 생성되었는지 확인한다.
cd ..
cp -arp modules/pdo_mysql.so /usr/local/php/lib/php/extensions/no-debug-zts-20131226
cd /usr/local/php/lib/php/extensions/no-debug-zts-20131226

# php.ini 파일을 열어 extension=확장모듈.so 파일을 추가한다.
extension=/usr/local/php/lib/php/extensions/no-debug-zts-20131226/pdo_mysql.so

# 아파치(Apache) 재시작한다.
/usr/local/apache/bin/apachectl restart

파일이 설치되었는지 확인한다.
확인방법은
/usr/local/php/bin/php -i | grep PDO
또는 phpinfo()함수로 확인한다.

APM(Apache + PHP + MySQL) 소스설치 방식으로 PHP 버전은 5.6.30 버전을 설치했더니

Deprecated: mysql_connect(): The mysql extension is deprecated and will be removed in the future: use mysqli or PDO instead  메시지가 뜨면서 접속이 제대로 안된다.

기존 모든 소스를 수정해야 하나, APM 소스 설치를 다시 해야 하나 고민되어 검색을 했더니 이렇게 하라고 나온다.

$link = @mysql_connect($db_server,$db_user_name,$db_password);

@ 를 앞에 붙이라고 나온다.

오류 제어 연산자(@) : PHP의 코드가 오류가 있을 때 오류 메시지를 무시하도록 하는 연산자

오류 메시지를 어떤 상황에서든 출력하지 않도록 하고자 할 때 사용하는 연산자이다.

<?php
error_reporting(E_ALL ^ E_DEPRECATED);

이렇게 추가하라고 알려주기도 한다.

원인이 The mysql_* functions has been deprecated as of PHP 5.5.0 버전 이상부터 나오는 현상이란다.

근본적으로는 mysqli_* 방식이나 PDO 방식으로 변경해야 되는데 전부 수정하기에는 엄두가 나지 않는다.

일단 앞에 오류제어 연산자 @를 붙이는 방법으로 임시 조치하여 사용해보고 있다.

PHP 5.4.6 에서 정상 동작하는 코드가 PHP 5.6.30 에서 동작되지 않는 것이 있었는데 코드를 세부적으로 살펴보니 낮은 버전에서는 MySQL 연결 문법을 대략 생략해도 동작되던게 동작되지 않는 증상이라 수정처리했더니 잘 동작한다.

APM 소스 설치시 옵션에 따라서 약간씩 설치가 되는 사이트도 있고 아닌 곳도 있어서 설치하면서 고생을 좀 했다.

phpize 를 이용해서 미처 설치하지 못한 옵션을 추가하는 방법도 알게되고 난 후에는 여러모로 APM 소스 설치가 편리하기는 하더라.

PHP 5.6.30 에서 속도가 좀 더 개선(?)된 느낌이 들기는 한다.

다시 정리하자면

기존 코드 수정을 최소화하면서 이용하는 방법은

제대로 변경하려면

연동에 사용되는 함수를 찾아서 전부 변경해줘야 한다.

$connect = mysqli_connect('localhost', 'user', 'password', 'dbname');

replace all mysql_* functions into mysqli_* functions

//PHP 5.4 o earlier (DEPRECATED)
$con = mysql_connect($host,$user,$password) or exit("Connection Error");
$conn = mysql_select_db($db, $con);

mysql_query("set names utf8");

//PHP 5.5 (New method)
$conn =  mysqli_connect($host,$user,$password,$db);

PDO (PHP Data Objects) 방식으로 연동

- 연동방식으로 만든 함수를 많이 수정해야만 정상동작되는거 같다. 기존 함수를 변환시 주의할 점이 좀 있다.

$conn = new PDO($hostDb, $user, $password);
또는

$conn = new PDO('mysql:host=localhost;dbname={$dbname};charset=utf8', $user, $password);

로 한다.

네이버 지식인에 문의사항이 있길래 테이블 생성하는 방법을 적는다.

테이블 설계는 보통 phpMyAdmin 상에서 하면 편리하므로 굳이 PHP 코드 상에서 할 필요성을 느끼지 못해서 적어두지 않았다.

테이블 생성은 간단하다.

==== dbinfo.php ===

<?php
$db['host'] = "localhost";
$db['name'] = "csharp";
$db['user'] = "root";  // 원래는 root 사용하면 안되는데 연습용인지라...
$db['pass'] = "autoset";
$db['port'] = "3306";
?>

==== dbconnect.php ===

<?php
include_once 'dbinfo.php';
$connect = isConnectDb($db);

function isConnectDb($db)
{
    $conn = mysqli_connect($db['host'],$db['user'],$db['pass'],$db['name'],$db['port']);
    mysqli_set_charset($conn, "utf8");  // DB설정이 잘못되어 euc-kr 로 되어 있으면 문제가 됨
    if (mysqli_connect_errno()) {
        echo "Failed to connect to MySQL: " . mysqli_connect_error();
        exit;
    } else {
        return $conn;
    }
}
?>

==== tablecreate.php ====

<?php
include_once 'dbconnect.php'; // DB 연결

$sql ="
CREATE TABLE IF NOT EXISTS member (
no int(11) not null auto_increment,
id varchar(15) NOT NULL,
user_id varchar(15) NOT NULL,
name varchar(15) NOT NULL,
nick_name varchar(15),
birth varchar(8),
sex varchar(6),
tel varchar(8),
email varchar(40),
pw varchar(32) NOT NULL,
addr_1 varchar(100),
addr_2 varchar(100),
level int,
regdate char(20),
ip varchar(20),
PRIMARY KEY(no)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 AUTO_INCREMENT=1;
";

$result=mysqli_query($dbconn,$sql);
if($result) {
    echo "DB table created !!!";
} else {
    echo "Error creating table : " . mysqli_error($dbconn);
}

mysqli_close($dbconn);
?>

여기서 한가지 알아야 할 사항은 테이블 생성시 CREATE TABLE IF NOT EXISTS member 를 하면 결과는 OK 로만 나온다. 이미 테이블이 생성되어 있으면 에러 메시지를 보이도록 하려면 CREATE TABLE member 로 수정해주면 된다.

테스트에 사용된 코드 첨부

tablecreate.zip

오늘 Android Studio 기반 어플을 테스트 하는데 PHP Array 를 잘못 구현해서 삽질을 한참 했다.

모든 정보를 select 문으로 가져와서 array_push 에 담은 경우에는 아무런 문제가 되지 않는다.

그런데 sosok 정보를 서브 쿼리로도 가져오기가 힘든 경우가 생겼다.

그래서 함수를 만들어서 해당 정보를 가져와서 array_push 에 저장할 때 아무 생각없이 코딩을 했더니 원하는 결과가 나오지 않고 엉뚱한 결과가 나온다.

잘못된 결과가 나온다.

아래와 같이 풀어서 해결했다. 풀어서 array_push 에 담으면 암호화된 코드를 추가하기도 편하다.

select 문 하나로 해결이 안되는 걸 json 방식으로 안드로이드폰과 통신하려면 위와 같은 방법으로 데이터를 추가하면 해결될 수 있다.

참고 : How to Use JSON Data with PHP or JavaScript

https://www.taniarascia.com/how-to-use-json-data-with-php-or-javascript/

Android 코드에서는

    int responseCode = conn.getResponseCode();
    //System.out.println("GET Response Code : " + responseCode);
    if(responseCode == HttpURLConnection.HTTP_OK){ // 연결 코드가 리턴되면
        bufferedReader = new BufferedReader(new InputStreamReader(conn.getInputStream()));
        String json;
        while((json = bufferedReader.readLine())!= null){
            sb.append(json + "\n");
        }
    }
    bufferedReader.close();
}
System.out.println("PHP Comm Out : " + sb.toString());

로 로그 결과를 확인해서 보낸 데이터가 원하는 형태로 넘어오는지 확인을 꼭 하는게 좋다.

네이버지식인에 질의사항이 있어서 간단하게 테스트해본 예제를 첨부한다.

최신버전 다운로드는 https://github.com/stevenwanderski/bxslider-4 에서 한다.

당연히 jQuery도 시간이 지나면서 버전이 업그레이드 되어 왔고, 이에 맞춰 bxslider 역시 jQuery 버전에 맞춰 개발되었을 확률이 높다.

버전에 맞게 하려면 위 사이트에서 파일을 최신버전으로 받고, jQuery 버전은 https://www.w3schools.com/jquery/default.asp 에서 확인하시라. 

bxslider.zip

http://bxslider.com/ 사이트에 받은 파일중에서 필요한 파일만 js, css 폴더에 복사한다.

아래 코드 중에서 색상을 별도 표시한 부분을 중점적으로 보면 금방 이해할 수 있다.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="robots" content="noindex,nofollow"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="pragma" content="no-cache" />
<!-- jQuery library (served from Google) -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- bxSlider Javascript file -->
<script src="./js/jquery.bxslider.min.js"></script>
<!-- bxSlider CSS file -->
<link href="./css/jquery.bxslider.css" rel="stylesheet" />
<script>
$(document).ready(function(){
  $('.bxslider').bxSlider();
});
</script>
</head>
<body>
<ul class="bxslider">
  <li><img src="./images/img_01.jpg" /></li>
  <li><img src="./images/img_02.jpg" /></li>
  <li><img src="./images/img_03.jpg" /></li>
  <li><img src="./images/img_04.jpg" /></li>
  <li><img src="./images/img_05.jpg" /></li>
</ul>   
</body>
</html>

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

  <li><img src="./images/img_01.jpg" /></li>
  <li><img src="./images/img_02.jpg" /></li>
  <li><img src="./images/img_03.jpg" /></li>
  <li><img src="./images/img_04.jpg" /></li>
  <li><img src="./images/img_05.jpg" /></li>
파일명을 일일이 적기가 귀찮다면 PHP 를 이용해서 해당 폴더 images 를 읽어서 파일 갯수만큼 표시되도록 코드를 만들어도 된다.

<body>
    <?php
    $path = "./images"; // 오픈하고자 하는 폴더
    function getFileNames($directory) {
        $results = array();
        $handler = opendir($directory);
        while ($file = readdir($handler)) {
            if ($file != '.' && $file != '..' && is_dir($file) != '1') {
                $results[] = $file;
            }
        }
        closedir($handler);
        return $results;
    }
?>
<ul class="bxslider">
<?php
    foreach(getFileNames($path) as $value){
        echo '<li><img src="./images/'.$value.'" /></li><\n>';
    }
?>
</ul>
</body>

로 코드를 대체하면 된다.

부트스트랩 기반 WYSIWYG editor 인 summernote 기능을 익혀 보는데 쉽지 않았다.

구글링을 통해 많은 예제를 참고하면서 테스트를 해봤다.

http://summernote.org/ 에서 summernote 파일을 다운로드 받아서 설치한다.

summernote 에디터에 이미지를 첨부하게 되면, 이미지가 지정된 폴더에 업로드되고 그 결과가 editor 화면에 보여지게 된다.

이미지는 하나를 업로드 하고 다시 선택해서 업로드를 해보니 업로드는 잘 되고 두개 모두 에디터에 보여진다.

설명보다 받아서 테스트해보고 내것으로 소화하면 될 거 같다.

==== summernote.php ====

<?php
require_once 'connect.php'; // db접속 성공
require_once 'phpclass/boardClass.php'; // 게시판 클래스
if(isset($_GET['uid']) || empty($_GET['uid'])){
    $_GET['uid'] = '';
}

$uid = $_GET['uid'] ? $_GET['uid'] : '';
$b = new boardClass();
$R = $b->rdata_array($uid); // 배열함수
if($R == 0){
    $R = array();
    $R['uid'] = '';
    $R['subject']= '';
    $R['content'] = "DB에서 값을 가져온다고 가정";
    //$R['content'] = '';
}

?>

<!DOCTYPE html>
<head>
<meta charset=UTF-8" />
<meta name="robots" content="noindex,nofollow"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>
<meta http-equiv="X-UA Compatible" />
<link rel="stylesheet" href="plugin/bootstrap/css/bootstrap.min.css" />
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="plugin/bootstrap/js/bootstrap.min.js"></script>
<!-- include summernote css/js-->
<link href="plugin/summernote/summernote.css" rel="stylesheet">
<script src="plugin/summernote/summernote.js"></script>
<script src="plugin/summernote/lang/summernote-ko-KR.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('.summernote').summernote({
        height: 200,
        minHeight: null,
        maxHeight: null,
        lang : 'ko-KR',
        callbacks: {
            onImageUpload : function(files, editor, welEditable) {
                console.log('image upload:', files);
                sendFile(files[0], editor, welEditable);
            },
        }
    });

    // summernote 에 값을 기록(set)
    // var markupStr = 'hello world';
    // $('.summernote').summernote('code', markupStr);

    // summernote 에디터에 이미지 업로드
    function sendFile(file,editor,welEditable) {
        data = new FormData();
        data.append("file", file);
        $.ajax({
            url: "saveimage.php", // image 저장 경로
            data: data,
            cache: false,
            contentType: false,
            enctype: 'multipart/form-data',
            processData: false,
            type: 'POST',
            success: function(data){
                var obj = JSON.parse(data);
                if (obj.success) {
                    var image = $('<img>').attr('src', '' + obj.save_url); // 에디터에 img 태그로 저장
                    $('.summernote').summernote("insertNode", image[0]); // summernote 에디터에 img 태그를 보여줌
                } else {
                    switch(parseInt(obj.error)) {
                        case 1: alert('업로드 용량 제한에 걸렸습니다.'); break;
                        case 2: alert('MAX_FILE_SIZE 보다 큰 파일은 업로드할 수 없습니다.'); break;
                        case 3: alert('파일이 일부분만 전송되었습니다.'); break;
                        case 4: alert('파일이 전송되지 않았습니다.'); break;
                        case 6: alert('임시 폴더가 없습니다.'); break;
                        case 7: alert('파일 쓰기 실패'); break;
                        case 8: alert('알수 없는 오류입니다.'); break;
                        case 100: alert('허용된 파일이 아닙니다.'); break;
                        case 101: alert('0 byte 파일은 업로드할 수 없습니다.'); break;
                    }
                }
            },
            error: function(jqXHR, textStatus, errorThrown) {
                console.log(textStatus+" "+errorThrown);
            }
        });
    }

    $("#savebtn").click(function(){
        if($("input[name='subject']").val() ==""){
            alert('제목을 입력하세요');
            $("input[name='subject']").focus();
            return false;
        }

        var contents = $('.summernote').summernote('code');
        //alert(contents.length);
        if(contents.length < 12){ // 소스보기로 보면 <p><br></p> 가 기본으로 있음
            window.alert('내용을 입력하세요');
            $('.summernote').summernote('focus');
            return false;
        }

        $("#writeForm").submit();
    });

});
</script>
</head>
<body>
<div class="rdata_write">
    <form name="writeForm" id="writeForm" action="write.php" method="post" enctype="multipart/form-data">
    <input type="hidden" name="uid" value="<?php echo $R['uid'];?>">
    <table class="table" width="1000">
        <tr>
            <td class="td1">No</td>
            <td class="td2"><?php if($R['uid']):?><?php echo $R['uid'];?><?php endif;?></td>
        </tr>

        <tr>
            <td class="td1">제목</td>
            <td class="td2"><input type="text" name="subject" value="<?php echo htmlspecialchars($R['subject']);?>" style="width:98%;" />
            </td>
        </tr>

        <tr>
            <td class="td1">내용</td>
            <td class="td2"><!-- summernote editor -->
                <textarea class="summernote" name="content" rows="10"><?php echo htmlspecialchars($R['content']);?></textarea>
            </td>
        </tr>

        <tr>
        <td colspan="2" align="center"><input type="button" id="savebtn" value="서버전송" class="btn btn-danger" /></td>
        </tr>

    </table>
    </form>
</div>
</body>
</html>

==== saveimage.php ====

<?php
$allowed = array("jpg", "png", "gif", "zip");

if(isset($_POST) and $_SERVER['REQUEST_METHOD'] == "POST"){
    if ($_FILES['file']['name']) {
        $tmpname = $_FILES['file']['tmp_name'];
        $realname = $_FILES['file']['name'];
        if (!$_FILES['file']['error']) { // 오류 없이 파일 업로드 성공
            if(! in_array(pathinfo($_FILES['file']['name'], PATHINFO_EXTENSION), $allowed) ){
                @unlink($tmpname);
                echo json_encode(array('success' => false, 'error' => 100));
            } else if (!getimagesize($tmpname)) {
                @unlink($tmpname);
                echo json_encode(array('success'=> false, 'error' => 101));
            } else {
                $fileExt = getExt($realname);
                $filename = date("Ymd").md5(uniqid($tmpname)) .round(microtime(true)).'.'.$fileExt;
                $uploadFile = './upload/' . $filename; //change this directory
                if(move_uploaded_file($tmpname, $uploadFile)){
                    @chmod($uploadFile,0606);
                    echo json_encode(array('success' => true, 'save_url' => $uploadFile ));
                }
            }
        } else {
            echo json_encode(array('success'=> false, 'error' => $error));
        }
    }
}

// 확장자 추출 함수
function getExt($filename){
    $ext = substr(strrchr($filename,"."),1);
    $ext = strtolower($ext);
    return $ext;
}

?>

==== write.php ====

테스트 목적이라서 내용이 없고 파일 내용이 잘 넘어가는지 여부만 테스트를 했다.

write.php 에서 content 필드의 내용을 잘 정리하는 함수 테스트까지는 못한 상태이다.

print_r($_POST) 보다는 var_dump($_POST)가 정보를 더 많이 보여준다.

<?php
extract($_POST);
var_dump($_POST);
//print_r($_POST);
exit;

?>

<?php
if(!isset($_SESSION)) {
    session_start();
}

@extract($_POST);
//var_dump($_POST);exit;
$tableName = 'table_items';
if(isset($_SESSION['userid']) && !empty($_SESSION['userid'])) { // 세션정보가 있으면(로그인되어있으면)
    include_once $_SERVER['DOCUMENT_ROOT'].'/_core/config/config.php';
    include_once $_site['web_config'].'/dbconnect.php'; // db접속
    include_once $_site['web_class'].'/dbClass.php';
    $c=new MySQLiDbClass;

    $content = trim($content);
    if($uid){ // 수정
        $R = $c->getUidData($tableName,$uid);
        $QVAL = "ItemName='$ItemName',Price='$Price',Quantity='$Quantity',content='$content'";
        $c->getDbUpdate($tableName,$QVAL,'uid='.$R['uid']);
        echo json_encode(array('result'=>'2'));
    } else { // 신규
        $QKEY = "ItemName,Price,Quantity,content";
        $QVAL = "'$ItemName','$Price','$Quantity','$content'";
        $c->getDbInsert($tableName,$QKEY,$QVAL);
        echo json_encode(array('result'=>'1'));
    }
} else {
    echo json_encode(array('result'=>'0'));
}
?>

https://github.com/kimsQ/rb/issues/60 은 나중에 읽어봐야 할 거 같다.

summernote.zip

에디터 테스트한다고 고생해서 다른 분들은 수고를 줄이라고 파일 첨부합니다.

블로그에 정리해주신 분들의 자료가 완벽하게 정리된 것을 찾기가 쉽지 않아서 정말 많은 검색을 통해서 자료에 살을 붙이면서 테스트에 성공했습니다.

write.php 파일과의 처리는 ajax 처리는 아닙니다. ajax 처리로 변경하려면 다른 게시글을 참조하면 됩니다.

상대경로 상에서 게시판(board)에서 게시글을 클릭하면 해당 게시글을 수정할 수 있는 write.php 파일로 이동하는 기능을 작성하다보니 경로 추출이 쉽지 않다.

성공한 결과값부터 적어둔다.

$('.tr1').click(function() {
    var idx=$(this).attr('data-uid');
    var modulepath =$("#ajax_loginpath").attr('data-module');
    var page = urlParam('p') ? urlParam('p') : 1;
    var moveURL = modulepath + 'bbs/board.php?m=write&idx='+idx+'&p='+page;
    $(location).attr('href', moveURL);

}).mouseover(function() {
    $(this).children('.td2').css({'backgroundColor':'#DCDCDC','cursor':'pointer'});
}).mouseout(function() {
    $(this).children('.td2').css({'backgroundColor':'#FFFFFF','cursor':'default'});
});

과정 설명

테이블에서 해당 게시글을 눌렀을때 별도의 팝업창을 띄우거나 해당 게시글을 수정할 수 있는 창을 만들기 위해서는 해당 게시글의 uid 번호를 알아야 한다.

이것은 테이블 작성시에

<tr class="tr1" data-uid="'.$row['uid'].'">

로 해당 uid 를 추출할 수 있게 해준다.

modulepath 는

<div id="ajax_loginpath" data-path="<?php echo $g['path_page'];?>" data-module="<?php echo $g['path_module'];?>"></div>

에서 추출할 수 있도록 작성한다.

해당 페이지 번호도 넘겨줘야 게시글 수정후 list.php 파일로 돌아올 때 화면이 변경되지 않는다.

그러기 위해서는 URL parameter 값을 받아서 넘겨줘야 한다.

이 URL parameter 값을 넘겨주는 함수는

http://handam.tistory.com/41 분이 작성한 함수가 있어서 편하게 해결할 수 있었다. 꾸뻑^^

function urlParam(name){
    var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(window.location.href);
    if (results==null){
       return null;
    }
    else{
       return results[1] || 0;
    }
}

변수에서 추출을 못할 경우에는 null 을 반환하는데

페이지가 없으면 1을 반환하도록 삼항연산자를 사용했다.

var page = urlParam('p') ? urlParam('p') : 1;

이제 이동하고 싶은 URL을 설정하면 된다.

var moveURL = modulepath + 'bbs/board.php?m=write&idx='+idx+'&p='+page;

$(location).attr('href', moveURL); // 해당 URL 로 이동

PHP에서 MySQL을 연동하여 데이터를 가져오거나(select), 수정(update), 삭제(delete) 등을 할 때 사용하는 간단한 흐름이다.

네이버 지식인에 질문하는 사항을 가지고 간단하게 정리한다.

The MySQLi Extension (MySQL Improved) is a relational database driver used in the PHP scripting language to provide an interface with MySQL databases.

MySQL DB에서 가져온 데이터(배열)을 반환하는 함수에 대해 알아보자. (절차지향 MySQL 방식)

select 구문으로 조회(mysql_query)하고 그 결과인  result set 에서 레코드를 한개씩 리턴해주는 함수에는 mysql_fetch_row, mysql_fetch_assoc, mysql_fetch_array 가 있다.

mysql_fetch_row(resource $result)
mysql_fetch_row()는 데이터를 0으로 시작하는 숫자형 인덱스 배열로 반환한다.
가장 빠르다고 알려져 있으나 어느 컬럼을 가져왔는지 가독성이 떨어진다.
컬럼명이 얼마 안될 경우 혹은 문서 정리가 잘 되어있을때 사용 하도록 한다.
$row[0]; //인덱스 번호로만 데이터를 출력한다.

mysql_fetch_assoc(resource $result)
mysql_fetch_assoc()는 데이터를 문자형 연관 배열로 반환한다.
가장 많이 사용되는 함수로써 키값을 가지고 데이터를 출력한다.
데이터베이스에서 SELECT문으로 해당 컬럼을 키값만으로 출력이 가능하다.
$row['id'];
$row['userID']; // 필드의 이름은 대소문자를 구별한다.

mysql_fetch_array(resource $result [, int $result_type ])
$result_type 은 생략 가능하며, 생략하면 MYSQL_BOTH
mysql_fetch_array($result, MYSQL_NUM) = mysql_fetch_row($result)
mysql_fetch_array($result, MYSQL_ASSOC) = mysql_fetch_assoc($result)
mysql_fetch_array($result, MYSQL_BOTH)
인덱스(숫자)번호와 연관 배열의 키값으로 데이터를 가져 올 수 있다.
성능이 크게 차이는 없으나 데이터가 많을 시 key[0] 번째 값과 key['키'] 인덱스 배열과 연관배열값을 모두 가져 오기 때문에 불필요한 메모리가 쌓인다.

성능에 미치는 영향이 별로 없다면 mysql_fetch_array 함수를 사용하는 것이 편하다.

입문자들이 코딩하면서 책에 나온대로 따라 연습하면서 놓치는 부분은 사소한 곳에 있다.

$sql ="SELECT id,pass FROM testboarduser where id='".$id."'";
$result=mysql_query($sql,$conn);
이렇게 두줄로 처리하기도 하지만 더 심하게는 간단하게 한줄로 코딩한다고

$result=mysql_query("SELECT id,pass FROM testboarduser where id='".$id."'",$conn);

로 처리한다.

로직상 틀린 것은 없다.

하지만 문제점을 발견하기 위해서 디버깅을 한다고 치자.

$result=mysql_query("SELECT id,pass FROM testboarduser where id='".$id."'",$conn);

은 문제가 어디에서 생겼는지 발견하기가 쉽지 않다.

$sql ="SELECT id,pass FROM testboarduser where id='".$id."'";
echo $sql; // 데이터가 원하는 결과대로 나오는지 확인 목적
$result=mysql_query($sql,$conn);

이렇게 하면 DB 연결이 잘된 것인지 아닌지 확인이 가능해진다.

$sql ="SELECT id,pass FROM testboarduser";
$sql.=" where id='".$id."'";
$result=mysql_query($sql,$conn);

그러면 왜 이렇게 $sql 을 분리해서 코딩하는 걸까?

검색어를 입력해서 검색어가 포함된 결과를 돌려받고 싶다. 검색어 조건이 2개 이상이다.

이런 경우 등을 처리할 때 유연하게 처리가 가능하기 때문이다.

MySQLi 접속방식과 MySQL 접속방식으로 코딩시 DB 연결 부분을 실수하는 초보자가 많다.

<?php
@extract($_GET); // $_GET['cat1'] 대신에 $cat1 이라고 써도 되도록 해준다.

include "db_info.php"; // db 연결

$sql ="SELECT id,pass FROM testboarduser";
$sql.=" where display=1";
if (isset($cat1)&& !empty($cat1)) $sql.= ' and category1='.$cat1;
if (isset($cat2)&& !empty($cat2)) $sql.= ' and category2='.$cat2;
if(isset($where) && !empty($where) && isset($keyword) && !empty($keyword)){
    if($where=="name"){
        $sql.= " and name LIKE '%".trim($keyword)."%'";
    } else if( $where=="phone" ){
        $sql.= " and (cellphone LIKE '%".trim($keyword)."%' OR officephone LIKE '%".trim($keyword)."%')";
    } else {
        $sql.= " and ".$where." like '%".trim($keyword)."%'";
    }
}

$sort  = isset($sort) ? $sort : 1;
if($sort ==1){
   $xsort      = "uid";
   $xorderby   = "desc";
}else if($sort ==2){
   $xsort      = "hit";
   $xorderby   = "desc";
}else if($sort ==3){
   $xsort      = "name";
   $xorderby   = "desc";
}else if($sort ==4){
   $xsort      = "cellphone";
   $xorderby   = "desc";
}

$xsort  = isset($xsort) ? $xsort : 'uid';
$xorderby= isset($xorderby) ? $xorderby : 'desc';

$sql.="order by ".$xsort." ".$xorderby."";

$curPage = isset($curPage)? $curPage : 1;  // 출력할 페이지 번호
$rowsPage = isset($rowsPage)? $rowsPage : 10; // 기본 10개씩 출력
$sql.=" LIMIT ".$curPage.",".$rowsPage."";

echo $sql; // 쿼리문이 제대로 된 것인지 확인 목적

$result=mysql_query($sql,$conn);
while($row=mysql_fetch_array($result)){
    // 출력할 내용 테이블 형태로 작성
}

?>

이와같이 복잡한 쿼리문을 유연하게 처리하기 위해서 $sql 변수를 분리해서 사용하는게 좋다.

LIMIT 개념 이해는 https://www.w3schools.com/php/php_mysql_select_limit.asp 사이트를 애용하면 대부분 해결 될 것이다.

찾고자 하는 걸 구글링을 하듯이 https://www.w3schools.com/ 사이트를 찾아보면 정말 유용한 사이트라고 감탄하게 된다.

같이보면 도움되는 게시글

http://link2me.tistory.com/1110

loginChk.php 파일의 경로가 /abc/pages/loginChk.php 로 되어 있다.

로그인 모달창에서 로그인 처리를 하는데 경로설정에 대한 문제로 골치가 아팠다.

유연한 상대경로 설정하는 방법을 몰라서 겪은 증상이다.

아래와 같이 경로에 PHP의 상대경로를 직접 입력하면 문제가 될까? 안될까?

이렇게 입력하면 ajax 에서는 경로를 인식하지 못한다.

자동 상대경로 설정법은 http://link2me.tistory.com/1197 를 참조하면 된다.

// 로그인 처리
$('#login-submit').click(function(e){
    e.preventDefault();
    //alert(window.location.pathname); // 현재 경로 확인
    $.ajax({
        url: <?php echo $g['path_page'];?>"+'loginChk.php',
        type: 'POST',
        data: {userid:$('#userid').val(), password:$('#password').val()},
        dataType: "json",
        success: function (response) {
           if(response.result == 1){
               //alert('로그인 성공');
               $('#modal-login').modal('hide');
               location.reload(); // 화면 갱신
           } else {
               alert('로그인 실패');
           }
        },
        error: function(jqXHR, textStatus, errorThrown){
           alert("arjax error : " + textStatus + "\n" + errorThrown);
        }
    });
});

해결방법

PHP의 변수를 ajax 등 javascript 로 넘기기 위해서는 HTML 로 일단 저장해야 한다.

<body></body> 사이에 아래 코드를 추가한다.

내용은 전혀 보이지 않게 처리한다.

<div id="ajax_loginpath" data-path="<?php echo $g['path_page'];?>" ></div>

그런 다음에 아래와 같이 코드를 구현하면 해결된다.

// 로그인 처리
$('#login-submit').click(function(e){
    e.preventDefault();
    //alert(window.location.pathname); // 현재 경로 확인
    var loginpath =$("#ajax_loginpath").attr('data-path');
    $.ajax({
        url: loginpath+'loginChk.php',
        type: 'POST',
        data: {userid:$('#userid').val(), password:$('#password').val()},
        dataType: "json",
        success: function (response) {
           if(response.result == 1){
               //alert('로그인 성공');
               $('#modal-login').modal('hide');
               location.reload(); // 화면 갱신
           } else {
               alert('로그인 실패');
           }
        },
        error: function(jqXHR, textStatus, errorThrown){
           alert("arjax error : " + textStatus + "\n" + errorThrown);
        }
    });
});

결론 정리

상대경로의 개념은 현재 실행되는 파일을 기준으로 경로(path)를 상대적으로 설정한다.

따라서 실행되는 파일의 위치가 달라지면 그 위치를 기준으로 경로를 상대적으로 설정하기 때문에

../../loginChk.php 처럼 적어주면 문제가 생긴다.

실행되는 파일의 위치가 어디든지 간에 상대경로 문제가 아무런 문제없이 해결되기 위해서는 코드를 잘 짜야 한다.

이런 문제때문에 계속 문제에 부딪치면서 완벽한 해결책을 구현해보겠다는 일념으로 드디어 해결을 했다.

자동 상대경로 설정법은 http://link2me.tistory.com/1197 과 이 게시글을 활용하면 누구든지 경로설정 문제로 골치아픈 일은 없을 것이다.

현재 경로 설정을 매번 수동으로 일일이 지정하려니까 귀찮아서 구글링으로 찾은 소스를 수정해서 구현했다.

구글에서 찾은 함수 pathUrl 는 http://localhost/ 라는 명칭을 찾아준다.

이런 방법으로 경로를 지정하면 보안 강화로 인해서 url forwarding 문제가 생긴다.

파일을 include 해서 사용하다보니 경로 설정에서 문제가 생기더라.

현재 실행되는 파일의 위치를 기준으로 경로를 인식해서 처리한다.

그러므로 홈페이지의 소스가 설치된 기준 위치를 어디로 정할 것인가를 고려해서 사용하면 된다.

<?php
$cur_root = pathUrl();
$g = array(
    'path_root'   => $cur_root,
    'path_core'   => $cur_root.'_core/',
    'path_config'   => $cur_root.'_core/config/',
    'path_tmp'    => $cur_root.'_tmp/',
    'path_layout' => $cur_root.'layout/',
    'path_module' => $cur_root.'modules/',
    'path_plugin' => $cur_root.'plugin/',
    'path_bootstrap' => $cur_root.'plugin/bootstrap/',
    'path_page'   => $cur_root.'pages/',
    'path_file'   => $cur_root.'files/'
);

function pathUrl($dir = __DIR__){
    $root = "";
    $dir = str_replace('\\', '/', realpath($dir));

    //HTTPS or HTTP
    $root .= !empty($_SERVER['HTTPS']) ? 'https' : 'http';

    //HOST
    $root .= '://' . $_SERVER['HTTP_HOST'];
    $web_root = $root;

    //ALIAS
    if(!empty($_SERVER['CONTEXT_PREFIX'])) {
        $root .= $_SERVER['CONTEXT_PREFIX'];
        $root .= substr($dir, strlen($_SERVER[ 'CONTEXT_DOCUMENT_ROOT' ]));
    } else {
        $root .= substr($dir, strlen($_SERVER[ 'DOCUMENT_ROOT' ]));
    }

    $root = substr($root,strlen($web_root),strlen($root));
    //$root .= '/';

    // 홈페이지 기준점을 http://domain/abc/ 로 설정한 경우에는 -2 를 해준다.
    $cnt = count(explode("/",$root)) -2; // 현재 경로 구하기

    switch($cnt){  // 상대경로 설정
        case 0:
            $cur_root = './';
            break;
        case 1:
            $cur_root = '../';
            break;
        case 2:
            $cur_root = '../../';
            break;
        case 3:
            $cur_root = '../../../';
            break;
        case 4:
            $cur_root = '../../../../';
            break;
        case 5:
            $cur_root = '../../../../../';
            break;
    }

    return $cur_root;
}
?>

사용법 예제

<?php
if(!isset($_SESSION)) {
    session_start();
}
require_once 'path.php';
session_save_path($g['path_tmp'].'session');

require_once $g['path_config'].'dbconnect.php';
require_once $g['path_config'].'config.php';

if(isset($_SESSION['userid'])){
    $userid = $_SESSION['userid'];
}

$m = isset($_GET['m'])? $_GET['m']:'';
?>

ajax 로 form 값을 전송하는데 정상적으로 처리가 안된다.

이것 때문에 몇시간을 삽질했다. 네이버 검색하면 메시지 자체가 검색되지 않는다.

구글링을 하면 검색결과가 많은데 제대로 된 해결책을 찾기가 쉽지 않다.

$.ajax({
    url: 'memberInfo.php',
    type: 'POST',
    data: {
        uid:$("#memberuid").val(),
        userNM:$("#memberName").val(),
        mobileNO:$("#memberMobile").val()
    },
    dataType: "json",
    success: function (response) {
        if(response.result == 1){
            alert('수정 완료');
            location.replace('index.php'); // 화면 갱신
        }
        if(response.result == 0){
            alert('수정 실패');
        }
    },
    error: function(jqXHR, textStatus, errorThrown){
        alert("arjax error Type : " + textStatus + "\n" + errorThrown);
    }
});

데이터가 정상적으로 넘어가는지 확인하려고 alert 으로 일일이 찍어봤다.

정상적으로 잘 넘어간다.

그래서 memberInfo.php 파일에서 변수가 넘어왔다고 가정하고 직접 실행을 해봤으나, 정상적이다.

테스트로 값을 넘기는 거라 임의의 값으로 처리하면서 DB 저장되는 건 주석처리를 해버렸다.

<?php
if(!isset($_SESSION)) {
    session_start();
}

//$_POST['userNM'] ='홍길동';
//$_POST['mobileNO'] ='010-123-7777';

if (empty($_POST)) {
    echo json_encode(array('result'=>'0'));
    exit;
} else {
    @extract($_POST);
    include_once $_SERVER['DOCUMENT_ROOT'].'/_core/config/config.php';
    include_once $_SERVER['DOCUMENT_ROOT'].'/_core/config/dbconnect.php'; // db접속
    include_once $_SERVER['DOCUMENT_ROOT'].'/phpclass/dbClass.php';
    $u=new MySQLiDbClass;

    $mobileNO = preg_replace("/[^0-9]/", "", $mobileNO); //전화번호 숫자이외에 제거
    $QSET ="userNM='".$userNM."',";
    $QSET.="mobileNO='".$mobileNO."'";
    $u->getDbUpdate('member_id',$QSET,"uid=".$uid);
    echo json_encode(array('result'=>'1'));
}

?>

DB에는 제대로 저장되는지 확인해봤다.

DB 테이블에는 정상적으로 update가 되고 있다.

단지 화면상으로 결과를 돌려주는 부분에서 에러를 발생시키고 있다.

문제 해결과정

1단계 :

dataType: "json" 을 dataType: "text" 로 변경하고

success : function(response) { alert(response); 를 추가한다.

그러면 아래와 같이 출력되는 메시지를 전부 보여준다.

<br />
<b>Warning</b>:  mysqli_query() expects at least 2 parameters, 1 given in <b>C:\AutoSet9\public_html\workspace\phpclass\dbClass.php</b> on line <b>184</b><br />
<br />
<b>Warning</b>:  mysqli_query() expects at least 2 parameters, 1 given in <b>C:\AutoSet9\public_html\workspace\phpclass\dbClass.php</b> on line <b>185</b><br />
{"result":"1"}

2단계 :

Warning 이 발생한 부분을 찾아서 수정해준다.

//DB업데이트
function getDbUpdate($table,$set,$where){
    global $dbconn;
    mysqli_query($dbconn,'set names utf8');
    mysqli_query($dbconn,'set sql_mode=\'\'');
    $sql ="update ".$table." set ".$set.($where?' where '.$this->getSqlFilter($where):'');
    mysqli_query($dbconn,$sql);
    return 1;
}

3단계 :

dataType: "json" 으로 원복 조치

$rs=$d->getDbUpdate('member_id',$QSET,"uid=".trim($uid));
if($rs == 1){
    echo json_encode(array('result'=>'1'));
}else{
    echo json_encode(array('result'=>'0'));
}   

원인은 mysqli_query 부분을 제대로 입력하지 않아서 경고메시지가 출력되었던 것이었다.

결과값이 1이면 처리하라는 if문의 결과값만 돌려줄 줄 알았는데 그게 아니었다.

화면에 출력되는 경고메시지가 있다보니, echo json_encode(array('result'=>'1')); 메시지 이외의 값도 결과로 돌려주었었나 보다.

함수 하나를 이용하더라도 완벽하게 만들어서 이용해야 한다는 걸 다시 한번 느꼈다.

window.location.href; // URL 포함한 전체 경로

window.location.href = 'index.php';

location.replace('index.php'); // 이전 페이지로 돌아가기 할 수 없음

window.location.pathname; // 현재 경로 확인

window.location.pathname.split('/').pop(); // 현재 실행 파일명

location.reload() and location.reload(true) works like F5 on browser. (페이지를 재실행)

window.location.reload() : 컴퓨터에 이미 받아놓은 캐쉬파일을 뒤지고 없으면 서버에서 파일을 받아온다.
window.location.reload(true) : true 가 들어가게 되면 캐쉬파일은 무시하고 무조건 서버에서 받아온다.

// 회원가입 처리를 위한 화면 이동
$('#member-join').click(function(){
    $('#modal-login').modal('hide'); // 모달 창 닫기
    //alert(window.location.pathname); // 현재 경로 확인
    if(window.location.pathname.split('/').pop() != 'member_join.php'){ // 현재 실행 파일명
        location.replace('member_join.php');
    }
});

// 부모창의 form안에 자동으로 값을 채워넣고 그 값을 submit
window.opener.document.getElementById("parent_hidden_field_something").value = "somethingSpecial";
window.opener.document.getElementById("parent_form_something").submit();

메뉴를 수동으로 일일이 작성하지 않고 PHP/MySQL 과 연동하여 테이블 정보를 자동으로 읽어서 메뉴가 생성되도록 하는 방법이다.

=== index.php ===

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="robots" content="noindex,nofollow"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta http-equiv="cache-control" content="no-cache" />
    <meta http-equiv="expires" content="0" />
    <meta http-equiv="pragma" content="no-cache" />
    <meta name="apple-mobile-web-app-capable" content="no" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <title>Multi level dropdown menu in Bootstrap 3</title>
    <link rel="stylesheet" href="css/topmenu.css" />
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
    <script src="http://code.jquery.com/jquery.min.js" ></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
    <!--[if lt IE 9]> <!-- 5. 인터넷익스플로러 9버전 이하일 경우 html5가 인식될 수 있게 해주는 스크립트 -->
    <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <script src="bootstrap/js/respond.min.js"></script>
    <script src="js/topmenu.js"></script>
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="index.php">Home</a>
        </div>
        <div class="collapse navbar-collapse" id="navbar-collapse-1">
            <ul class="nav navbar-nav">
                <?php require_once 'menu.php';?>
            </ul>
        </div>
    </div>
</nav>
</body>
</html>

=== menu.php ===

<?php
require_once 'dbconnect.php';
$sql = "SELECT * FROM menu_items";
$res = mysqli_query($dbconn, $sql);
while($row = mysqli_fetch_assoc($res)){
    $menu[] = $row;
}

$top_menu = bootstrap_menu($menu);
echo $top_menu;

function bootstrap_menu($array,$parent_id = 0,$parents = array())
{
    if($parent_id==0) {
        foreach ($array as $element) {
            if (($element['parent_id'] != 0) && !in_array($element['parent_id'],$parents)) {
                $parents[] = $element['parent_id'];
            }
        }
    }
    $php_menu = '';
    foreach($array as $element) {
        if($element['parent_id']==$parent_id) {
            if(in_array($element['id'],$parents)) {
                $dropdown_sub=$parent_id > 0 ? 'dropdown-submenu':'';
                $php_menu .= '<li class="dropdown '.$dropdown_sub.'">';
                $php_menu .= '<a href="'.$element['url'].'" class="dropdown-toggle" data-toggle="dropdown">'.$element['name'].' <span class="caret"></span></a>';
            } else {
                $php_menu .= '<li>';
                $php_menu .= '<a href="' . $element['url'] . '">' . $element['name'] . '</a>';
            }
            if(in_array($element['id'],$parents)) {
                $php_menu .= '<ul class="dropdown-menu">';
                $php_menu .= bootstrap_menu($array, $element['id'], $parents);
                $php_menu .= '</ul>';
            }
            $php_menu .= '</li>';
        }
    }
    return $php_menu;
}

?>

=== topmenu.css ===

/* dropdown submenu */
.dropdown-submenu{position:relative;}
.dropdown-submenu>.dropdown-menu{
    top:0;left:100%;
    margin-top:-6px;
    margin-left:-1px;
    -webkit-border-radius:0 6px 6px 6px;
    -moz-border-radius:0 6px 6px 6px;
    border-radius:0 6px 6px 6px;
}
.dropdown-submenu>a:after{
    display:block;
    content:" ";
    float:right;
    width:0;
    height:0;
    border-color:transparent;
    border-style:solid;
    border-width:5px 0 5px 5px;
    border-left-color:#cccccc;
    margin-top:5px;
    margin-right:-10px;
}
.dropdown-submenu:hover>a:after{
    border-left-color:#555;
}
.dropdown-submenu.pull-left{float:none;}
.dropdown-submenu.pull-left>.dropdown-menu{
    left:-100%;
    margin-left:10px;
    -webkit-border-radius:6px 0 6px 6px;
    -moz-border-radius:6px 0 6px 6px;
    border-radius:6px 0 6px 6px;
}

@media only screen and (max-width: 768px) {
   
}

@media only screen and (min-width: 768px) {

    /* 스마트폰에서는 동작하지 않게 */

    .dropdown-submenu:hover>.dropdown-menu {
        display: block;
    }
}

=== topmenu.js ===

$(function(){
    $('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) {
        event.preventDefault();
        event.stopPropagation();
        $(this).parent().siblings().removeClass('open');
        $(this).parent().toggleClass('open');
    });
    // 현재 선택한 메뉴 : active
    $("ul li").click(function() {
        // remove classes from all
        $("ul .active").removeClass("active");
        // add class to the one we clicked
        $(this).addClass("active");
    });

});

=== db 스키마 ===

CREATE TABLE IF NOT EXISTS `menu_items` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `parent_id` varchar(11) DEFAULT NULL,
  `name` varchar(200) NOT NULL,
  `url` varchar(200) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 AUTO_INCREMENT=12 ;

INSERT INTO `menu_items` (`id`, `parent_id`, `name`, `url`) VALUES
(1, '0', 'Daum', 'http://www.daum.net'),
(2, '0', 'Java', '#'),
(3, '0', 'PHP', '#'),
(4, '3', 'PHP Tutorial', '#'),
(5, '3', '사이트', '#'),
(6, '5', '티스토리', '#'),
(7, '2', 'Java Tutorial', '#'),
(8, '2', 'Java Resources', '#'),
(9, '2', '테이블', 'table.php'),
(10, '5', '네이버', 'http://www.naver.com'),
(11, '3', 'PHP Resources', '#');

메뉴 자동으로 생성하는 것은 구글에서 treemenu 를 검색하면 나온다.

이걸 부트스트랩 기반에 적용하는 것이다.

관리자 화면에서 메뉴를 자동으로 생성하는 것은 아직 완벽하게 만들어놓지 않아서 작성하지 않는다.

다만, 참조할 게시글만 적어둔다.

http://link2me.tistory.com/1146

http://www.phpzag.com/ 사이트에 보면 도움된다.

그리고 구글링으로 jstree 를 검색하면 나온다.

http://phpflow.com/php/dynamic-tree-with-jstree-php-and-mysql/

기존 treemenu를 부트스트랩 기반으로 연동하는 걸 테스트 하는 중이다.

jQuery 기반 동작 소스를 부트스트랩 기반으로 완벽하게 처리할 때까지 시도해볼 생각이다.

부트스트랩 기반으로 멀터레벨 드랍다운 메뉴를 만드는 걸 목표로 구글링해서 찾은 소스를 분석해가면서 만들어보려고 한다.

http://bootsnipp.com/snippets/featured/multi-level-dropdown-menu-bs3

에 나온 예제 소스를 가지고 분석해보자.

사이트 HTML 소스만으로 실행하면 아래 화면과 같은 결과가 나온다.

소스 보기

이 소스에서 bootstrap 관련 CSS와 JS를 연결하면, 아래와 같이 바뀐다.

소스보기

서브메뉴가 제대로 나오지 않는다는 걸 확인할 수 있다.

이제 topmenu.css 라는 이름으로 css 파일을 추가해보자. 

서브메뉴까지 다 나온 걸 확인할 수 있다.

여기까지 시도하려고 작성한 것은 아니다.

분석을 더 해보자.

<div class="container">
    <div class="row">
        <h2>Multi level dropdown menu in Bootstrap 3</h2>
        <hr>
        <div class="dropdown">
            <a id="dLabel" role="button" data-toggle="dropdown" class="btn btn-primary" data-target="#" href="/page.html">
                Dropdown <span class="caret"></span>
            </a>
            <ul class="dropdown-menu multi-level" role="menu" aria-labelledby="dropdownMenu">
              <li><a href="#">Some action</a></li>
              <li><a href="#">Some other action</a></li>
              <li class="divider"></li>
              <li class="dropdown-submenu">
                <a tabindex="-1" href="#">Hover me for more options</a>
                <ul class="dropdown-menu">
                  <li><a tabindex="-1" href="#">Second level</a></li>
                  <li class="dropdown-submenu">
                    <a href="#">Even More..</a>
                    <ul class="dropdown-menu">
                        <li><a href="#">3rd level</a></li>
                        <li><a href="#">3rd level</a></li>
                    </ul>
                  </li>
                  <li><a href="#">Second level</a></li>
                  <li><a href="#">Second level</a></li>
                </ul>
              </li>
            </ul>
        </div>
    </div>
</div>

<ul class="dropdown-menu"> 로 표기되고 있고,
<li class="dropdown-submenu"> 로 표기되고 있다.

=== topmenu.css ===

.dropdown-submenu { position: relative;}

.dropdown-submenu>.dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -6px;
    margin-left: -1px;
    -webkit-border-radius: 0 6px 6px 6px;
    -moz-border-radius: 0 6px 6px;
    border-radius: 0 6px 6px 6px;
}

.dropdown-submenu:hover>.dropdown-menu { display: block;}

.dropdown-submenu>a:after {
    display: block;
    content: " ";
    float: right;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    border-width: 5px 0 5px 5px;
    border-left-color: #ccc;
    margin-top: 5px;
    margin-right: -10px;
}

.dropdown-submenu:hover>a:after { border-left-color: #fff;}

.dropdown-submenu.pull-left { float: none;}

.dropdown-submenu.pull-left>.dropdown-menu {
    left: -100%;
    margin-left: 10px;
    -webkit-border-radius: 6px 0 6px 6px;
    -moz-border-radius: 6px 0 6px 6px;
    border-radius: 6px 0 6px 6px;
}

메뉴를 수동으로 직접 작성하는 것은 별로 어려울 것이 없을 거 같다.

목적은 메뉴를 PHP와 연동하여 자동으로 생성하는 걸 구현하고 싶다.

다음에는 PHP 와 연동하여 메뉴를 자동으로 생성하는 걸 해보자.

<?php
if(isMobile()){
    //include_once("m.php");
    echo 'Mobile';
}else{
    //include_once("pc.php");
    echo 'Windows';
}

// 접속 디바이스가 모바일인지 검사
function isMobile() {
        return preg_match("/(android|avantgo|blackberry|bolt|boost|cricket|docomo|fone|hiptop|mini|mobi|palm|phone|pie|tablet|up\.browser|up\.link|webos|wos)/i", $_SERVER["HTTP_USER_AGENT"]);
}
?>

아직 bootstrap 내용을 완벽하게 숙지하지 못한 상태에서 기능 익히느라고 Copy & Paste 하면서 형태를 변경해보면서 하다보니 원하지 않은 결과로 좀 고생하고 있다.

<nav class="navbar navbar-default navbar-fixed-top">

를 설정했는데 모달(modal)창이 계속 비활성화되어 왜 그런지 원인 찾으려고 무진장 고생을 했다.

navbar-fixed-top 때문에 생긴 현상이다.

이거 없앴더니 바로 정상 모드로 돌아온다.

if(tabName == '#modal-login'){
    //alert(tabName);
    $('#modal-login').on('shown.bs.modal', function () {
                $(this).find('input[type=text]:visible:first').focus();
    });
}

그리고 Path 설정을 하면서 고생 좀 하고 있는 중이다.

Web root 에 설정하면 문제가 없는데 실행되는 파일이 서브디렉토리에 있으면 문제가 되는거 같다.

현재 디렉토리 경로를 파악하여 어떤 경로에 있던 완벽하게 할 수 있는 코드를 만들어 볼 생각이다.

<?php
$cur_root = '../';  // 실행경로가 root 가 아니라서 root는 부모 디렉토리
$g = array(
    'path_root'   => $cur_root,
    'path_core'   => $cur_root.'_core/',
    'path_var'    => $cur_root.'_var/',
    'path_tmp'    => $cur_root.'_tmp/',
    'path_layout' => $cur_root.'layout/',
    'path_module' => $cur_root.'modules/',
    'path_plugin' => $cur_root.'plugin/',
    'path_bootstrap' => $cur_root.'plugin/bootstrap/',
    'path_page'   => $cur_root.'pages/',
    'path_file'   => $cur_root.'files/'
);

?>

var email = $('#email').val();
if(email== ''){
    alert('이메일주소를 입력하세요');
    email.focus();
    return false;
} else {
    var emailRegex = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;
    if (!emailRegex.test(email)) {
        alert('이메일 주소가 유효하지 않습니다. ex)abc@gmail.com');
        email.focus();
        return false;
    }
}

EditPlus 는 인터넷에서 구한 소스 및 텍스트를 정리하는데 최고로 편하다.

이런 작업을 할 때 반복적으로 해야 할 경우와 여러번  실행해야 하는 불편을 키 한번만 누르면 자동으로 실행되게 하는 편리한 기능이 장점 중 하나다.

빈줄지우기 와 줄끝 공백지우기를 한꺼번에 처리하는 걸 매크로 단축키로 지정했다.

여기까지 진행하고 나면 Ctrl + Q 를 눌러주면 매크로 녹음기능이 끝난다.

이후부터는 단축키로 지정한 Alt + 2 만 눌러주면 해당 설정한 매크로가 자동으로 실행된다.