[MariaDB] Windows에서 MariaDB 세팅하기[MariaDB] Windows에서 MariaDB 세팅하기

Posted at 2018. 6. 26. 14:54 | Posted in MySQL/MariaDB
반응형




■ 윈도우즈에서 마리아DB 세팅하기




01. 내 컴퓨터를 열고 상단의 시스템 속성을 클릭한다.




02. 좌측 카테고리에서 고급 시스템 설정을 클릭한다.




03. 시스템 속성 창에서 아래와 같이 작업을 수행한다.

 ① 상단 탭 메뉴에서 고급을 선택한다.

 ② 환경변수 버튼을 클릭한다.




04. 환경변수 창이 팝업되면 아래와 같이 작업을 계속 진행한다.

 ① 시스템 변수 목록에서 Path를 찾아 선택한다.

 ② 편집 버튼을 클릭한다.




05. 이제 Path 시스템 변수를 편집한다.

 ① 마리아DB가 설치된 경로의 bin 폴더의 경로까지의 주소를 복사한다.

 ② 시스템 변수 편집 창에서 변수 값 부분에 복사한 주소값을 추가한다.

     마지막에 꼭 세미콜론( ; ) 기호를 넣어주는거 잊지말자.

 ③ 확인 버튼을 클릭하여 시스템 변수 편집창을 닫는다.



 

06. 다시 환경 변수 창에서 확인 버튼을 클릭하여 환경 변수 창을 닫는다.




07. 시스템 속성창에서도 확인 버튼을 클릭하여 창을 닫아준다.




08. Windows 버튼 + R 버튼 키를 눌러서 실행창을 띄운다.

 ① cmd를 입력한다.

 ② 확인 버튼을 클릭한다.




09. 이제 명령 프롬프트 창을 열고 마리아DB를 실행시켜보자.

 C:\Users\Name>mysql -u -root -p

 Enter password: ******



위와같이 실행된다면 윈도우즈에서 마리아DB의 설치와 세팅이 완료된 것이다.





반응형
저작자표시

'MySQL > MariaDB' 카테고리의 다른 글

[MariaDB] Ubuntu MariaDB 시간 변경  (0) 2019.07.30
[MariaDB] 테이블 구조 복사 쿼리  (0) 2019.01.09
[MariaDB] root 계정의 비밀번호 및 보안 설정 - Ubuntu  (0) 2018.12.11
[MariaDB] MariaDB의 데이터 베이스 및 사용자 계정 추가하기  (0) 2018.06.26
[MariaDB] Windows에 MariaDB 다운받고 설치하기  (0) 2018.04.10
//

[jQuery] SNS 공유 팝업창 제작(심화)[jQuery] SNS 공유 팝업창 제작(심화)

Posted at 2018. 6. 7. 17:33 | Posted in JavaScript & jQuery/jQuery
반응형

참고 : https://opentutorials.org/course/50/190





어떤 사이트의 유지보수 업무를 맡았을때의 일이다.

사이트가 설계부터 상당히 조악했었다. include 부터가 이상하게 꼬여 있었기에.

사이트의 이벤트 페이지를 SNS에 공유하는 기능을 만들때였다.


내가 원하는건 해당 SNS공유 버튼이 있는 EVENT 페이지에서의 내용이

SNS에 잘 공유되는 것이었는데, 계속 원치 않는 메인페이지로만 공유되고.

관련 이미지도 띄울 수 없는 사태였다.













include 경로가 굉장히 이상하게 꼬여있었기에.

왠만하면 그냥 자동으로 되는 SNS Share 기능이 제대로 작동 될수가 없던 그런 상황이었다.

결국 SNS 공유 기능에 사용되는.


meta 태그의 property 속성 og: 관련 내용을 직접 설정하는 식으로 내용을 해결해 나가야 했고.

괜히 5분 10분이면 끝날작업을, 엄청 생고생 하며 만들었고.


짜증이 매우 났기에, 또 이런 상황에 대응하기위한 모듈을 만들 생각으로

이렇게 포스팅하게 되었다.



# 소스코드

<script type="text/javascript">
function shareSns(sns) {
    var getUrl = "?name=<?=$_GET['eventName']?>&title=<?=$_GET['eventTitle']?>&img=" + jQuery("img:eq(10)").attr("src");
    var fullUrl = "";
    if(sns == "f") {
        fullUrl = "http://www.facebook.com/share.php?u=" + encodeURIComponent("http://wickedmiso.com/events/sns_share.php" + getUrl);
    } else if(sns == "t") {
        fullUrl = "https://twitter.com/?status=" + encodeURIComponent("http://wickedmiso.com/events/sns_share.php" + getUrl);
    } else if(sns == "k") {
        fullUrl = "https://story.kakao.com/share?url=" + encodeURIComponent("http://wickedmiso.com/events/sns_share.php" + getUrl);
    }
    window.open(fullUrl, "", "width=600, height=500, menubar=no, toolbar=no, scrollbars=no");
}
</script>



encodeURIComponent


웹을 통해서 데이터를 전송할 때 특정 문자들은 특수한 기능으로 사용된다.

예를들어, http://a.com?name=egoing&job=programmer에서

&job=programmer 중 '&'는 하나의 파라미터가 끝나고 다음 파라미터가 온다는 의미이다.

그런데 다음과 같이 job의 값에 &이 포함된다면 시스템은 job의 값을 제대로 인식 할 수 없게 된다.

http://a.com?name=egoing&job=programmer&blogger

이런 문제를 회피하기 위해서 다음과 같이 치환해 준다.

http://a.com?name=egoing&job=programmer%26bloogger

그럼 시스템에서는 %26을 &으로 해석하고 의도대로 해석 할 수 있게 된다.

이러한 처리를 이스케이핑(eascaping) 라고 부른다.




# 출력결과 - sns_share.php

<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta property="og:title" content="<?=$_GET["title"]?>"/>
<meta property="og:image" content="<?=$_GET["img"]?>"/>
<meta property="og:type" content="travel"/>
<meta property="og:site_name" content="HUISTENBOSCH"/>
<meta property="og:description" content=""/>
<input type="hidden" id="name" value="<?=$_GET['name']?>"/>
<input type="hidden" id="title" value="<?=$_GET['title']?>"/>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.7.0.min.js"></script>
<script language="javascript">
jQuery(document).ready(function(){

    var eventName = jQuery("#name").val();
    var eventTitle = jQuery("#title").val();
    var mobile = "";
    var smartPhones = [
          "iphone", "ipad", "lgtelecom", "windows ce", "blackberry", "skt", "mobile", "samsung", "nokia", "blackberry"
        , "android", "android", "sony", "phone", "webos", "sonyerricsson", "opera mini", "opera mobi", "iemobile"
    ];

    for(var num in smartPhones) {  
        if(navigator.userAgent.toLowerCase().match(new RegExp(smartPhones[num]))) {
            mobile = "http://m.wickedmiso.com/event.php";
        }
    }

    var url = (mobile) ? mobile : "http://wickedmiso.com/events/";

    var redirect =
          "?eventName=" + eventName
        + "&eventTitle=" + eventTitle;

    location.href = url + redirect;
});
</script>
</head>
<body>
</body>
</html>




# 출력결과




반응형
저작자표시

'JavaScript & jQuery > jQuery' 카테고리의 다른 글

[jQuery] 커스텀 팝업창 오픈하기  (0) 2018.08.14
[jQuery] 클릭 드래그 방식으로, 테이블 위치 이동, 변경하기  (0) 2018.08.09
[jQuery] 움직이는 팝업 레이어 만들기  (0) 2018.05.29
[jQuery] 따라다니는플로팅 배너 제작  (0) 2018.04.23
[jQuery] 선택 날짜를 태그로 생성하는 모듈  (0) 2018.04.19
//

[jQuery] 움직이는 팝업 레이어 만들기[jQuery] 움직이는 팝업 레이어 만들기

Posted at 2018. 5. 29. 16:27 | Posted in JavaScript & jQuery/jQuery
반응형




■ jQuery :: draggable을 이용한 움직이는 모달 창 만들기




01. jQuery :: draggable();


jQuery의 draggable은 선택한 레이어를 클릭 드래그 할 수 있게 만들어 주는 기능이다.

해당 포스팅은 draggable을 사용하여특정 레이어를 팝업하고 움직일 수 있는 dialog기능과 같은 모달, 팝업창을 띄우려고 한다.

jQuery UI 데모페이지의 예제 소스는 아래와 같다.

<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Draggable - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<style type="text/css">
    #draggable { width:150px;height:150px;padding:0.5em; }
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
    jQuery(document).ready(function() {
        jQuery("#draggable").draggable();
    });
</script>
</head>
<body>
<div id="draggable" class="ui-widget-content">
    <p>Drag me around</p>
</div>
</body>
</html> 

참고 : https://jqueryui.com/draggable/




02. CSS :: position


position 프로퍼티는 레이어를 겹치거나, 특정 위치에 나오게끔 지정하기위해 사용된다.

해당 포스팅에서는 팝업창의 위치를 띄울 absolute와 닫기버튼의 위치지정을위해 static을 사용하였다.

참고 : http://ko.learnlayout.com/position.html



① position:static


static은 기본값이다. position:static;이 설정된 엘리먼튼느 그다지 특별한 방식으로 위치가 지정된 것이 아니다.

정적(static) 엘리먼트는 위치가 지정된 것이 아니라고 표현하며, static이 아닌 다른 값으로 지정된 엘리먼트에 대해 위치가 지정되었다고 표현한다.


② position:absolute


absolute는 뷰포트에 상대적으로 위치가 지정되는게 아니라 가장 가까운곳에 위치한 조상 엘리먼트에 상대적으로 위치가 지정된다.

절대위치가 지정된 엘리먼트가 기준으로 삼는 조상 엘리먼트가 없으면 문서 본문(document body)을 기준으로 삼고, 페이지 스크롤에 따라 움직인다.



# 소스코드

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>:: 제이쿼리 UI Draggable ::</title>
<script src="http://code.jquery.com/jquery-1.12.4.js"></script>
<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<style type="text/css">
    #popWindow {
        position:absolute;
        display:none;
        background-color:#000000;
        left:10%;
        top:10%;
    }

    #closeBtn {
        position:absolute;
        width:24px;
        z-index:1;
        margin-left:-16px;
        margin-top:-8px;
    }

    #popBottom {
        height:28px;
        text-align:left;
        font-weight:bold;
        color:#FFFFFF;
        padding-left:10px;
        padding-right:10px;
    }
</style>
<script type="text/javascript">
    function popWindowOpen() {
        jQuery("#popWindow").css("display", "block");
        jQuery("#popWindow").draggable();
    }

    function popWindowClose() {
        jQuery("#popWindow").css("display", "none");
    }
</script>
</head>
<body>
<div >
    <div id="popWindow">
        <div style="text-align:right;">
            <a href="javascript:;" onClick="popWindowClose();">
                <img id="closeBtn" src="./images/close_icon.png"/>
            </a>
        </div>
        <a href="javascript:;" onClick="">
            <img src="./images/an_jihyun.jpg" style="position:static;"/>
        </a>
        <div id="popBottom">
            <label>
                <input type="checkbox" onClick="popWindowClose();">&nbsp;
                오늘&nbsp;하루&nbsp;이&nbsp;창을&nbsp;열지&nbsp;않습니다.
            </label>
        </div>
    </div>
</div>
<input type="button" onClick="popWindowOpen();" value="팝업창 오픈"/>
</body>
</html> 




# 출력결과


위 이미지와 같이 창을 팝업하면 클릭 드래그 하여 브라우저 이곳저곳으로 움직일 수 있다.





☞ 이어지는 글 : [jQuery] 팝업 창 외에 다른 항목 선택 불가 필름 만들기






반응형
저작자표시

'JavaScript & jQuery > jQuery' 카테고리의 다른 글

[jQuery] 클릭 드래그 방식으로, 테이블 위치 이동, 변경하기  (0) 2018.08.09
[jQuery] SNS 공유 팝업창 제작(심화)  (0) 2018.06.07
[jQuery] 따라다니는플로팅 배너 제작  (0) 2018.04.23
[jQuery] 선택 날짜를 태그로 생성하는 모듈  (0) 2018.04.19
[jQuery] 테이블(TABLE) 행(ROW) 순서위치 이동시키기  (2) 2018.03.22
//

[jQuery] 따라다니는플로팅 배너 제작[jQuery] 따라다니는플로팅 배너 제작

Posted at 2018. 4. 23. 10:07 | Posted in JavaScript & jQuery/jQuery
반응형




■ CSS :: position 속성을 이용한 쫒아다니는 윙 배너 제작




#01 position : static

 -. static은 기본값이다.
 -. position:static;이 설정된 엘리먼트는 위치가 지정된 것이 아니다.
 -. 정적(static) 엘리먼트는 위치가 지정된 것이 아니라고 표현하며
 -. static이 아닌 다른 값으로 지정된 엘리먼트에 대해 위치가 지정됐다고 표현한다.



#02 position : fixed

 -. 고정(fixed) 엘리먼트는 뷰포트(viewport)에 상대적으로 위치가 지정되는데, 이는 페이지가 스크롤되더라도 늘 같은 곳에 위치한다는 뜻이다.
 -. top이나 right, bottom, left 프로퍼티가 사용된다.




# 소스코드

<html>
<head>
<title>:: 따라오는 스크롤 배너 ::</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<style type="text/css">
    .frame {
        width:1140px;
        margin-left:auto;
        margin-right:auto;
    }

    .main {
        float:left;
        margin-right:10px;
        width:780px;
        height:5000px;
    }

    .box { width:100%;height:1000px; }
    .box:nth-child(1) { background-color:#FF9933; }
    .box:nth-child(2) { background-color:#66CCCC; }
    .box:nth-child(3) { background-color:#9933CC; }
    .box:nth-child(4) { background-color:#006699; }
    .box:nth-child(5) { background-color:#FF00FF; }

    .banner {
        float:left;
        background-color:#CCCCCC;
        width:350px;
        height:5000px;
    }

    #chase {
        width:300px;
        overflow:hidden;
        margin-top:10px;
        margin-left:10px;
        margin-right:10px;
        margin-bottom:10px;
    }

    #chaseImg {
        width:100%;
    }

    #chaseBar {
        width:100%;
        background-color:#000000;
        color:#FFFFFF;
        font-weight:bold;
        text-align:center;
    }
</style>
<script type="text/javascript">
jQuery(window).scroll(function() {


    // 브라우저 화면 스크롤의 현재 높이가 플로팅 배너의 높이보다 클경우

    if(jQuery(window).scrollTop() > jQuery(".banner").offset().top) {


        jQuery("#chase").css("position", "fixed");

    }


    // 브라우저 화면 스크롤 현재 높이가 플로팅 배너의 높이보다 작을경우

    else if((jQuery(window).scrollTop() < jQuery(".banner").offset().top)) {


        jQuery("#chase").css("position", "static");

    }
}); 
</script>
</head>
<body>
    <div class="frame">
        <div class="main">
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
        </div>
        <div class="banner">
            <div id="chase">
                <img src="./maxim.jpg" id="chaseImg"/>
                <div id="chaseBar">새해 福덩이 안지현</div>
            </div>
        </div>
    </div>
</body>
</html>




# 출력결과





반응형
저작자표시

'JavaScript & jQuery > jQuery' 카테고리의 다른 글

[jQuery] SNS 공유 팝업창 제작(심화)  (0) 2018.06.07
[jQuery] 움직이는 팝업 레이어 만들기  (0) 2018.05.29
[jQuery] 선택 날짜를 태그로 생성하는 모듈  (0) 2018.04.19
[jQuery] 테이블(TABLE) 행(ROW) 순서위치 이동시키기  (2) 2018.03.22
[jQuery] AJAX를 사용한 파일 업로드  (1) 2018.03.18
//

티스토리툴바