Moodle !!!

많은 분들께 낯선 이름이 아닐까 싶습니다.
세계적으로 많이 사용되는 LMS(Learning Management System) 입니다.

Web Matrix 의 설명에 따르면

Moodle 은 자료실, 포럼, 퀴즈, 과제물, 교육 목표, 설문 조사, 여론 조사, 데이터 수집, 강좌, 위키 및 프로젝트와 같은 도구를 교육자에게 제공하여 어떤 주제에 대한 웹 기반 강좌를 생성하고 학생을 그러한 강좌에 초대할 수 있도록 하는 LMS(교육 관리 시스템)입니다. 사용자 지정 역할, 가져오기/내보내기/보관, 지급 및 다른 시스템과의 통합과 같은 다양한 관리 기능이 있습니다. Moodle 은 PHP 소프트웨어이지만, 거의 모든 플랫폼과 대부분의 데이터베이스에서 실행됩니다.

많은 부분들에 있어서 궁금증이 생겨서 한번 설치 해게 되었습니다.
한번? 파헤쳐봐야겠네요...

몰랐는데 Microsoft Web Platform 에 포함이 되어있네요.
한마디로 설치가 완전 쉽다는 거죠.
PHP Engine 과 Windows 용 MySQL 설치까지... 완전 자기가 혼자 다해줍니다. ㅋㅋㅋ 꽁짜꽁짜.. 완전 꽁짜... ㅋㅋ

그럼 설치해 보도록 하겠습니다.

새 사이트 만들기에서 Moodle 을 선택하려합니다.


Moodle 을 선택합니다.


다음 화면은 Capture 가 안되버렸네요...
과정은 Moodle 설치에 앞서서 PHP Engine 과 MySQL Windows 버전을 다운받고 설치를 합니다.
그리고 MySQL 관리자 계정에 대한 설정을 합니다.

그리고 아래 화면으로 이동을 합니다.

라이센스에 대한 설명을 하고요...

설치모듈에 대한 Update 를 check 합니다.
이 때 시간이 조금 오래 걸리는데요... 인내심을 가지고 기다리십시요.
그렇지 않고 "왜 안움직여? 죽은거여?" 라며 다시한번 "Continue" 버튼을 누르시게 되면
아래와 같은 Error 화면을 만나시게 될겁니다. ^^


잘 참으신 분들은 아래의 화면을 만나십니다. Plug in 에 대한 Update Check 입니다.

또 Continue 버튼을 클릭해 줍니다.

새 Version 에 대해서 확인이 성공적으루다가 끝났나 봅니다. ㅋㅋ
"Continue" 버튼을 눌러줍니다.

사이트 주인인 Admin 의 정보를 입력하는 화면입니다.
암호는 숫자와 대문자 특수문자등을 입력해 주십시요. ^^


Site 의 설명을 입력하는 화면입니다. 대문에 표시가 될 겁니다.
그리고 "Save changes" 버튼을 쿡!!!



다 됐습니다. ㅋㅋ

다음 부터는 설정 수정이며 각 모듈에 대해서 살펴봐야겠습니다. ㅋㅋㅋ

행복한 고수되셔요...


woojja ))*
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
반응형

'Moodle' 카테고리의 다른 글

[Moodle] Block 의 Header 찾아 삼만리...  (0) 2011.08.19
[Moodle] 개발 Tip (1)  (0) 2011.07.28
[Moodle] 언어 팩(Language Pack) 추가하기.  (0) 2011.06.22

다음의 내용과 소스는
혁명을 꿈꾸다 HTML5 & API 입문
앞서가는 디자이너와 퍼블리셔를 위한 HTML5 & CSS
을 참고 하였습니다.


이번엔 Web SQL Database 를 살펴볼까요?
Web SQL Database 는 지난 아티클에서 소개한 Storage 와 함께 기본적인 Web Storage 중 하나입니다.
말씀 안드려도 딱! 알고 계시겠지만 Client 에 데이터를 저장한다는 공통점을 가지고 있지요.

개발자분들께서는 SQL 에 익숙하시니 금방 접근 하실수 있으리라 생각됩니다.
개발자가 아닌 분들도 그리 어렵지 않은 내용이니 너무 어려워 마시고요... ^^

그럼 Database 를 생성하는 작업부터 시작해 보겠습니다.

14-1. Create Database
생성하기 전에 먼저 사용하는 Web Browser 가 Web SQL Database를 지원하는지 확인해 봐야겠죠?
if (!window.openDatabase) {
document.write("이 Browser 는 Web SQL Database 를 지원하지 않습니다.");
return false;
} else {
...
}

확인도 했으니 이젠 Database를 생성해 보겠습니다.
다음과 같은 Database 를 생성하는 Method 를 제공합니다.

if (!window.openDatabase) {
document.write("이 Browser 는 Web SQL Database 를 지원하지 않습니다.");
return false;
} else {
var db = openDatabase("MyFirstDatabase", "1.0", "첫번째 테스트 데이터베이스", "2*1024*1024");
}

openDatabase 함수를 사용하여 Database 를 생성합니다. 그리고 함수에 사용되는 parameter 들은 아래와 같습니다.

openDatabase("Database 이름", "Database Version", "Database 설명", "Database Size");

함수명 이름만 봐서는 Open 이라는 말에 이미 존재하는 Database 를 연다고 생각하기 쉬운데 Database 가 존재하지 않으면 Database 를 생성한다는 것! 기억해 두셔요...

14-2. transaction
Database 가 생성도 되었으니 이젠 슬슬 접근해 보겠습니다.
접근하는 Method 는 transaction()입니다.

if (!window.openDatabase) {
document.write("이 Browser 는 Web SQL Database 를 지원하지 않습니다.");
return false;
} else {
var db = openDatabase("MyFirstDatabase", "1.0", "첫번째 테스트 데이터베이스", "2*1024*1024");
db.transaction(function (tx) { //SQL 을 실행하고 Control 합니다.
...
},
function(error) {  //transaction 에 Error 가 발생한 경우
...
},
function() { //transaction 을 성공했을 때
...
});
}

Error 발생시 그리고 성공완료시에 진행할 코드는 생략가능한 부분입니다.

요기까지가 Database 를 생성하고 접근하는 것 까지의 순서입니다.
많이 어렵게 느껴지시나요?

그럼 계속 이어나가겠습니다.


14-3. executeSql
이젠 테이블을 생성하고 데이터를 입력하는 작업을 해보겠습니다.
이런 작업을 할때 사용하는 Method 는 executeSql() 입니다.
if (!window.openDatabase) {
document.write("이 Browser 는 Web SQL Database 를 지원하지 않습니다.");
return false;
} else {
var db = openDatabase("MyFirstDatabase", "1.0", "첫번째 테스트 데이터베이스", "2*1024*1024");
db.transaction(function (tx) { //SQL 을 실행하고 Control 합니다.
tx.executeSql('CREATE TABLE worklist(idx integer primary key, subject, memo)');

tx.executeSql('INSERT INTO worklist(idx, subject, memo) VALUES (1, "업무", "WCF Server 작성")';
tx.executeSql('INSERT INTO worklist(idx, subject, memo) VALUES (2, "약속", "SQLer Article작성")';
tx.executeSql('INSERT INTO worklist(idx, subject, memo) VALUES (3, "가정", "일주일식량 장보기")';
});
}

Table 을 생성하고 세건의 Data 를 입력하는 코드입니다.

음.. 여기까지 작업했으니 제대로 Database 가 생성되고 데이터가 제대로 들어갔는지 확인해 볼까효~~ ^^


확인도 됐으니.. 이젠 데이터를 삭제해 보겠습니다.
삭제하는 구문은 여러분도 알고 계시겠지만 서도...
tx.executeSql('DELETE FROM worklist WHERE idx=2');

테이블 삭제요?
tx.executeSql('DROP TABLE worklist');

^^


14-4. 예제
그럼 위 사항들을 모두 적용한 예제를 만들어 보겠습니다.
<!DOCTYPE html>
<html lang="ko">
 <head>
        <meta charset="utf-8" />
  <title>Web SQL Database 예제</title>
        <script type="text/javascript">

                if (!window.openDatabase) {
                    document.write("이 Browser 는 Web SQL Database 를 지원하지 않습니다.");
                    return false;
                } else {

                    var db = openDatabase("MyFirstDatabase", "1.0", "첫번째 테스트 데이터베이스", "2*1024*1024");

                    db.transaction(function (tx) { //SQL 을 실행하고 Control 합니다.
                        tx.executeSql('SELECT Count(idx) FROM worklist');
                    },
                    function(error) {  //transaction 에 Error 가 발생한 경우
                        alert("Select Error : " + error.message);
                        tx.executeSql('CREATE TABLE worklist(idx integer primary key, subject, memo)');
                    },
                    function() { //transaction 을 성공했을 때       
                    });

                    db.transaction(function (tx) { //SQL 을 실행하고 Control 합니다.
                        tx.executeSql('INSERT INTO worklist(idx, subject, memo) values (1, "업무", "WCF Server 작성")');
                        tx.executeSql('INSERT INTO worklist(idx, subject, memo) values (2, "약속", "SQLer Article작성")');
                        tx.executeSql('INSERT INTO worklist(idx, subject, memo) values (3, "가정", "일주일식량 장보기")');
                    },
                    function(error) {  //transaction 에 Error 가 발생한 경우                   
                        alert("insert Error : " + error.message);
                    },
                    function() { //transaction 을 성공했을 때
                        alert("insert Success");       
                    });

                };
        </script>
 </head>
 <body>
 </body>
</html>

 


Safari 의 Development Tool 인 Web Inspector 를 통해서 본 모습입니다.
보시면 제가 만든 Database 의 모습을 보실 수있을 겁니다. 데이터도 잘 들어가 있군요... ㅋㅋ

두번 Refresh 하면 에러납니다. ㅋㅋㅋ
왜 그런지 한번 돌려서 확인해보셔요... ㅋㅋㅋ

아 그리고 Database 의 버전이나 동기화에 대한 문제에 대해서는 숙제로 남겨놓기로 하겠습니다.


아래 이미지는 Webkit 에서 제공하는 예제인 Sticky Note 입니다. (안타깝지만 internet explore 9.0 과 firefox 4.0.1 에서는 돌아가지 않습니다.)
http://www.webkit.org/demos/sticky-notes/index.html
한번 간단히 살펴보셔도 좋을 듯합니다.

지난 글과 이번글을 통해서 Web Storage 와 Web SQL Database 에 대해서 알아 보았습니다.
이제 데이터베이스까지 Client 로 넘어왔습니다. 글만 보고 있어도 클라이언트의 한계가 조금씩 없어지는 것 같아 기분좋아지지 않으신가요? 하긴 생각해야할 것들과 개발해야 하는 것들이 점점 많아지긴 하겠지만 말이죠.
더욱더 UX 라고 하는 사용자 경험에 손쉽게? 다가갈 수 있지 않을까 싶습니다. 아! 다른 녀석들의 도움없이요... ^^


그럼

행복한 고수되셔요... ^^


woojja ))*
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
반응형

'Web > HTML 5' 카테고리의 다른 글

[HTML 5] 17. Web Socket  (1) 2011.06.25
[HTML 5] 16. Web Worker  (0) 2011.06.23
[HTML 5] 14. Web Storage  (0) 2011.06.21
[HTML 5] 13. Communication API  (0) 2011.06.19
[HTML 5] 12. Offline Web Application  (0) 2011.06.18

이젠 Web Storage 를 살펴보려 합니다.

다음의 내용과 소스는
혁명을 꿈꾸다 HTML5 & API 입문
앞서가는 디자이너와 퍼블리셔를 위한 HTML5 & CSS
을 참고 하였습니다.

Offline Web Application 과 비슷하게 갑자기 전원이 꺼진다거나 다시 PC 를 켰을때 이전에 작업한 데이터를 보존할수도 있고, 웹메일을 Web Storage 에 저장해 두었다가 읽는다거나, 서버의 많은 정보를 Client 에 저장해 둘 수 있습니다.

Web Stroage 는 Client 의 disk 에 소량의 데이터를 저장하기 위한 Storage로 이전까지는 Cookie 를 사용했습니다만 Cookie 와는 다음과 같은 몇가지 다른 점이 있습니다.
 크기에 제한이 없음.  Cookie 는 4KB 로 제한이 있지만 Web Storage 는 제한이 없습니다.
 서버로 보내지지 않음.  Cookie 는 HTTP Request 에 의해서 자동으로 서버에 전송이 되었지만 Web Storage 는 서버로 전송되지 않습니다.
 유효기간의 제한이 없음.  Cookie 처럼 특정기간이 지나면 자동으로 삭제되지 않습니다.
 JavaScript 객체를 저장할 수 있음.  JavaScript 객체를 저장할 수 있습니다.

Web storage 는 Web Browser 마다 별도로 가지고 있는 저장 공간에 Data 를 Key-Value 형식으로 저장합니다.

Web Storage 는 용도에 따라서 Local Storage 와 Session Storage 로 나뉘는데요. 두 Storage 의 차이는 저장기간이나 유효범위만 다를 뿐 거의 같은 API 를 사용합니다.

그럼 Local Storage 부터 살펴보도록 하겠습니다.

13-1. Local Storage
Local Storage 는 저장기간에 제약이 없고 Web Site 의 Domain 에 따라서 생성되는 Storage 입니다.
저장기간도 사용자가 삭제하기 전까지 영구적으로 저장할 수 있습니다. 그렇기 때문에 기존의 Cookie 를 이용한 저장작업을 Local Storage 가 대신하기에 충분합니다. 거기다 Server 측과의 통신작업도 없기때문에 Client 들이 더욱 좋아라 하리라 생각합니다. Server 측에 부하도 주지 않으니 더욱...

그럼 그 사용법을 한번 보기로 하죠.
먼저 Web Browser 가 Local Storage 를 지원하는지 Check 해 봐야 할 것입니다.

<script type="text/javascript">
if(!window.localStorage) {
document.write('이 Browser 는 Local Storage 를 지원하지 않습니다.');
} else {
.....
};
</script>

이젠 저장하는 방법을 보겠습니다.

<script type="text/javascript">
if(!window.localStorage) {
document.write('이 Browser 는 Local Storage 를 지원하지 않습니다.');
} else {
localStorage.setItem("NickName", "woojja");
};
</script>

저장을 했으니... 가져와야겠죠?

<script type="text/javascript">
if(!window.localStorage) {
document.write('이 Browser 는 Local Storage 를 지원하지 않습니다.');
} else {
localStorage.setItem("NickName", "woojja");
alert(localStorage.getItem("NickName"));
};
</script>

지우고 싶다고요? ㅋㅋ

<script type="text/javascript">
if(!window.localStorage) {
document.write('이 Browser 는 Local Storage 를 지원하지 않습니다.');
} else {
localStorage.setItem("NickName", "woojja");
alert(localStorage.getItem("NickName"));
localStorage.removeItem("NickName");

};
</script>

하나하나 지우지 말고 말끔히 지우실랍니까? ㅋㅋ

<script type="text/javascript">
if(!window.localStorage) {
document.write('이 Browser 는 Local Storage 를 지원하지 않습니다.');
} else {
localStorage.setItem("NickName", "woojja");
alert(localStorage.getItem("NickName"));
localStorage.removeItem("NickName");

localStorage.clear();
};
</script>


쉽죠? 쉽죠? ㅋㅋㅋ
너무 쉬운건 매력없잖아효? ㅋㅋㅋ
이번엔 조금 다른 방법을 살펴보도록 하겠습니다.

저장할 때는

localStorage.setItem("NickName", "woojja");
localStorage.NickName = "woojja";
localStorage["NickName"] = "woojja";


가져올 때는
var NickName = localStorage.getItem("NickName");
var NickName = localStorage.NickName;
var NickName = localStorage["NickName"];


지울 때는
localStorage.removeItem("NickName");
delete localStorage.NickName;
delete localStorage["NickName"];


와 같은 방법으로 사용을 합니다.

전체 Storage Data 에 대해서
for(var i=0; i<localStorage.length; i++) {
var key = localStorage.key(i);
var value = localStorage[key];
...
}

또는
for(var key in localStorage) {
var value = localStorage[key];
...
}

이렇게 접근해서 사용할 수 있습니다.


Session Storage 도 사용 방법은 다르지 않습니다.
내용에 약간의 차이가 있을 뿐인데요...
그럼 이번엔 Session Storage 를 살펴보도록 하겠습니다.

13-2. Session Storage
Session Storage 는 Local Storage 와 같이 도메인마다 생성이 되지만 Browser Window 의 유효범위와 생존기간을 갖습니다.
그래서 Local Storage 와는 다르게 Browser Window가 닫히면 Session Storage도 같이 삭제됩니다.
그럼 Browser Window를 복제하면 어떻게 될까요?
예상은 하고 계시겠지만, 복제된 순간까지는 Session Storage 의 내용은 같겠지만 그 이후의 내용은 서로에게 아무런 영향을 주지도 않고 별개의 Storage 로 작동하게 됩니다.
이런 특징을 갖는 Session Storage 는 사용자의 동작을 추적하여 기록할 때 사용할 수 있다고 합니다.

Session Storage  의 사용은 Local Storage 와 같다고 말씀을 드렸는데.
단지 localStorage 를 sessionStorage 객체로 바꿔 사용하시기만 하면 됩니다.

13-3. Storage Event Handling
Storage 는 Storage 의 변경에 대해서 window 객체가 Storage Event 를 발생시킵니다. 
다음 표는 그 Event 가 가지고 있는 속성들 입니다.
 속성  설명 
 key  변경된 Key, clear() Method 가 호출되면 null 을 반환한다.
 oldValue  변경되기 전의 값(복사본). 새로운 키로 값을 등록하였다면 null.
 newValue  변경된 후의 값(복사본). 값이 삭제되었을 때는 null.
 url  Event 가 발생한 문서의 URL.
 storageArea  변경된 Storage 참조.

13-4. 예제
아래 예제는 LocalStorage 에 대한 내용입니다.
신기하게도 그대로 남아 있네요... (당연한거겠지만요... ㅋㅋ) 
<!DOCTYPE html>
<html lang="ko">
 <head>
        <meta charset="utf-8" />
  <title>간단 메모지</title>
        <script type="text/javascript">
            function saveText() {
                info = document.getElementById("info");
                info.style.display = "block";
                localStorage.setItem("memo", msg.value);
            };
            function pageload() {
                msg = document.getElementById("txtBox");
                msg.value = localStorage.getItem("memo");
            };
            function clr() {
                msg.value = "";
                localStorage.clear();
                info.style.display = "none";
            };
         </script>
 </head>
 <body onload="pageload()">
        <h2>간단한 메세지</h2>
        <textarea id="txtBox" onKeyDown="saveText();" onKeyUp="saveText();" cols="50" rows="5"></textarea><br/>
        <input type="button" value="메모지 비우기" onClick="clr();" onKeyUp="clr();" />
        <p id="info" style="display:none;">메모내용이 자동 저장되었습니다.</P>
 </body>
</html>

 



다음 예제는 session Storage 에 대한 내용입니다.
값을 두개 넣고 난후 윈도우 창을 복제하였습니다.
그리고 두번째 생긴 Window 에서 값을 넣어 본 것입니다. 두개의 storage 가 별개라는 것을 말씀드리려 한 것이죠..
<!DOCTYPE html>
<html lang="ko">
 <head>
        <meta charset="utf-8" />
  <title>Session Storage Viewer</title>
 </head>
 <body onload="ShowAll()">
        <h1>Session Storage Test</h1>
        키 : <input id="k" type="text"> 값 : <input id="v" type="text">
        <button onclick="Save()">저장</button>
        <button onclick="Remove()">삭제</button>
        <button onclick="window.open(location.href);">윈도우 생성</button>
        <hr>
        <select id="entries" size=5 onchange="onEntrySelected()">
        </select>
        <button onclick="ShowAll()">다시 표시</button>

        <script type="text/javascript">

            var key = document.getElementById("k");
            var value = document.getElementById("v");
            var entries = document.getElementById("entries");

            function ShowAll() {
                entries.innerHTML = "";
                for (var i=0; i < sessionStorage.length; i++ )
                {
                    var k = sessionStorage.key(i);
                    entries.options[entries.options.length] = new Option(k + ":" + sessionStorage[k], k);
                }
            };

            function Save() {
                sessionStorage[key.value] = value.value;
                ShowAll();
            };

            function Remove() {
                delete sessionStorage[key.value];
                ShowAll();
            };

            function onEntrySelected() {
                var selectedOption = entries.options[entries.selectedIndex];
                key.value = selectedOption.value;
                value.value = sessionStorage[selectedOption.value];
            };
         </script>

 </body>
</html>


오늘은 Web Storage 에 대해서 살펴 보았습니다.

잘 기억해 두시기 바랍니다.
이젠 Cookie 보다는 이 두녀석을 사용하시는 걸 고려하실 날이 머지 않았으니 말이죠...

그럼 행복한 고수되십시요...

woojja ))*
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\

 
반응형

'Web > HTML 5' 카테고리의 다른 글

[HTML 5] 16. Web Worker  (0) 2011.06.23
[HTML 5] 15. Web SQL Database  (0) 2011.06.21
[HTML 5] 13. Communication API  (0) 2011.06.19
[HTML 5] 12. Offline Web Application  (0) 2011.06.18
[HTML 5] 11. Drag & Drop API  (0) 2011.06.18

+ Recent posts