Onionmixer: VisualWorksTutorial2 Page16 추가

2012-12-27T08:21:26Z

VisualWorksTutorial2 Page16 추가

New page

{{CincomTop|{{CincomSmalltalkHeadBanner|웹로그의 통계2 레슨15|Web에서 보기}}}}

{| style="border: none; width:100%;"
|- style="text-align:center;font-weight:bold; font-style: normal;font-size:110%;"
| colspan="2" | | 목차 | 레슨14 | 정리 |<hr style="color:black;background-color:black;height:4px;">
|-
| style="text-align:right;width:60px;float:left;" | {{HeadImageOpenbook}}
| {{HighlightBold|WebToolkit}}은 ASP, JSP, J2EE처럼 기존 개념을 사용해서 Web을 베이스로 하는 어플리케이션을 작성하기 위한 개발환경입니다. 차이점은 Smalltalk언어를 사용한다는 것입니다. {{HighlightBold|WebToolkit}}은 기본 제품에 포함된 Parcel입니다.
|-
| style="text-align:right;width:60px;float:left;" | {{HeadImageDominos}}
| 이 레슨에서는 {{HighlightBold|WebToolkit}}을 사용하는 Web 어플리케이션 작성방법에 대한 설명은 상세하게 하지 않습니다. Web로그 해석 어플리케이션을 Web 베이스의 어플리케이션으로 어떻게 치환하는가를 간단히 설명할 뿐입니다. {{HighlightBold|WebToolkit}}에 대한 세세한 부분에 관해서는 {{HighlightBold|WebToolkit}}의 튜토리얼을 참조해주십시오.
|-
| style="text-align:right;width:60px;float:left;" | {{HeadImageCertifacate}}
| {{CincomSmalltalkGreenBigFont|이 레슨에서는 WebToolkit Parcel을 로드하는 방법을 보여드릴 것이며, VisualWave로 Web 서버를 여러분 PC에서 작성하겠습니다. VisualWave가 실행되면 Web포맷으로 실행하는 어플리케이션의 사이트 구성 및 구축방법을 표시합니다. 지금까지는 GUI에서 작성했기에 Web에 관련된 작업은 아무것도 하지 않았습니다. 하지만 WebLog클래스용으로 작성된 메서드는 Web 베이스의 어플리케이션으로도 동작합니다. 이러한 작업을 매우 간단하게 행할 수 있습니다.}}
|-
| style="text-align:right;width:60px;float:left;" | {{HeadImageDesign}}
| 시작하기 앞서 몇 가지 부분을 명확히 할 필요가 있습니다. 처음 Web 어플리케이션을 실행할 때, Web에서 동작하도록 위해 적응해야만 합니다. Web은 "request - response"라는 단순한 시스템의 형태입니다. URL(http://www.cincom.co.jp)를 입력했을 때, 유저가 실행하는 것은 서버에 데이터 스트림을 요구하는 것 뿐입니다. 서버는 데이터 스트림을 꺼내서 유저에게 송신합니다. 이것으로 트렌젝션은 종료됩니다. 더 이상의 통신은 이뤄지지 않습니다. 브라우저는 데이터스트림을 취득해서 HTML에 들어간 태그에 따라 정형화 됩니다.

이번 어플리케이션은 GUI 어플리케이션으로 설계했습니다. 위젯이 적절한 Web 컴퍼넌트로 "변환"되지 않을 경우가 있습니다. 이러한 것들엔 스핀 버튼, 그룹 박스, 메뉴 바가 적절합니다. 어플리케이션을 최종적으로 Web 어플리케이션으로서 동작시킬 경우엔, HTML로 변환가능한 위젯을 사용해서 설계해야만 합니다. HTML로 변환 가능한 위젯 일람을 아래 표시하겠습니다. Web어플리케이션에서 필요로하는 모든 기능을 제공하기에 충분할 것입니다.
* 입력 필드
* 라디오 버튼
* 체크 박스
* 콤보 박스
* 메뉴 버튼
* 액션 버튼

VisualWorks나 {{HighlightBold|VisualWave}}에서 Web 어플리케이션을 구축하는 방법을 자세히 알고싶은 경우엔, {{HighlightBold|doc(docj)}} 디렉토리에 있는 문장을 참고해주십시오.
* {{HighlightBold|WebAppDevGuied_ja.pdf}} - Web Application Developer's Guide
* {{HighlightBold|WebGUIDevGuide_ja.pdf}} - Web GUI Developer's Guide
* {{HighlightBold|WebServerConfig_ja.pdf}} - Web Server Configuration Guide
|-
| style="text-align:right;width:60px;float:left;" | {{HeadImageSteps}}
| 1. VisualWorks가 기동되지 않은 경우는 기동시킵니다. VisualWorks {{HighlightBold|메인 런쳐}} 윈도우의 {{HighlightBold|System>>지정 Parcel 로드...}}를 선택해주십시오.

2. 표시된 다이얼로그 박스에 {{HighlightBold|Web*}}을 입력하고 OK를 눌러주십시오.

[[image:cincom_tutorial2_fig2131.png|none|326px|thumb|그림 15-1. WebToolkit Parcel의 선택]]

{{CincomSmalltalkBlueFont|Parcel 일람이 표시됩니다. {{HighlightBold|WebToolkit}}을 선택합니다. VisualWorks 일본어판을 사용하시는 분은 필요에 따라 일본어에 맞춘 Parcel {{HighlightBold|JaWebToolkit}}을 로드해주십시오.}}
|-
| style="text-align:right;width:60px;float:left;" | {{HeadImageDominos}}
| 입문서 : Parcel

3. 메인 런쳐 윈도우 툴바에 새로운 아이콘이 추가됩니다.

[[image:cincom_tutorial2_fig2131b.png|none|595px|thumb|그림 15-2. Web콘솔 아이콘]]

4. 아이콘을 클릭하고 Web서버 콘솔 윈도우를 표시합니다.

[[image:cincom_tutorial2_fig2132.png|none|631px|thumb|그림 15-3. WebToolkit(Web Server)콘솔 윈도우]]

5. {{HighlightBold|서버 작성}} 버튼을 클릭해주십시오.

6. {{HighlightBold|서버 타입}}을 {{HighlightBold|Smalltalk HTTP Server(Tiny HTTP)}}로 변경해주십시오. 이 서버는 어플리케이션 개발이나 테스트에 사용합니다. 이것은 HTTP 서버를 사용하지 않고 Web 브라우저에서 요구를 수신하며 응답을 송신합니다. {{HighlightBold|WevToolkit}} 시스템의 부수적인 추가 서버입니다. WebToolkit은 분리된 HTTP서버(Apache나 IIS)도 서포트 합니다.

7. {{HighlightBold|Host}}는 표준 {{HighlightBold|localhost}}이며, 포트는 표준 {{HighlightBold|8008}}을 사용합니다.

[[image:cincom_tutorial2_fig2133.png|none|631px|thumb|그림 15-4. Tiny HTTP Server의 기본구성]]

디폴트로 Tiny HTTP 서버는 8008포트를 사용합니다. 임의의 유효 포트번호는 사용할 수 없습니다.

8. {{HighlightBold|작성후 기동}} 버튼을 클릭합니다.

서버 리스트에 추가됩니다.

[[image:cincom_tutorial2_fig2134.png|none|631px|thumb|그림 15-5. Web서버가 작성되었습니다.]]

여러분의 기기가 접속되어있는 네트워크상의 기기로부터, Web 브라우저를 사용해서 포트 8008을 통해 접속 가능합니다.

9. Web브라우저를 기동시켜 아래와 같은 URL을 입력해주십시오.

<syntaxhighlight lang="text">
http://localhost:8008
</syntaxhighlight>

[[image:cincom_tutorial2_fig2135.png|none|843px|thumb|그림 15-6. Web Toolkit 첫 페이지]]

10. 파일 브라우저를 사용해서 {{HighlightBold|web}}디렉토리 하위에 있는 서브 디렉토리 {{HighlightBold|weblog}}를 작성합니다(VisualWorks의 투트 디렉토리 하위에 있는 web디렉토리).

[[image:cincom_tutorial2_fig2136.png|none|575px|thumb|그림 15-7. web디렉토리 하위에 있는 weblog 디렉토리]]

11. 적당한 텍스트 에디터를 사용해서 아래 내용와 같이 {{HighlightBold|hello.html}} 파일을 작성하고 {{HighlightBold|weblog}} 디렉토리에 저장합니다.

<syntaxhighlight lang="html4strict">
<html>
<body>
<center>
<h2>WebLog 통계 홈페이지에 잘오셨습니다</h2>
<br><br>
입구는<a href="hello.ssp">이곳</a>입니다
<br><br>
</center>
</body>
</html>
</syntaxhighlight>

12. 적당한 텍스트 에디터를 사용해서 아래 내용와 같은 {{HighlightBold|hello.ssp}} 파일을 작성하고 {{HighlightBold|weblog}} 디렉토리에 저장합니다.

<syntaxhighlight lang="html4strict">
<html>
<body>
<center>
<h2>WebLog 통계 홈페이지에 잘오셨습니다</h2>
<br><br>
오늘 날짜는,
<%= Date today %>
입니다.
</center>
</body>
</html>
</syntaxhighlight>

13. Web브라우저에 잘오셨습니다 페이지에서 {{HighlightBold|사이트 관리}} 링크를 클릭합니다.

[[image:cincom_tutorial2_fig2137.png|none|624px|thumb|그림 15-8. 잘오셨습니다 페이지의 사이트 관리 링크]]

14. 텍스트 박스에 {{HighlightBold|eblogstats}}를 입력하고 {{HighlightBold|신규 사이트 작성}} 버튼을 클릭해주십시오.

[[image:cincom_tutorial2_fig2138.png|none|609px|thumb|그림 15-9. 새로운 사이트 작성 실행시의 어플리케이션(Internet Explorer 6.0)]]

15. 다음 스크린에서 다음과 같은 내용을 입력해주십시오.
* 홈디렉토리 : {{HighlightBold|$(VISUALWORKS)/web/weblog}}
* 홈페이지 : {{HighlightBold|hello.htm}}
* 에일리어스(Alias) : {{HighlightBold|weblogstats}}
* 설명 : {{HighlightBold|WebLog클래스를 Web페이지로}}

{{HighlightBold|실행}}을 클릭해주십시오.

[[image:cincom_tutorial2_fig2138a.png|none|549px|thumb|그림 15-10. Weblogstats 사이트의 구성]]

16. 사이트 구성이 로드되어 "개요"페이지가 표시됩니다. 페이지를 아래로 스크롤하면 두 개의 파일 링크가 표시됩니다.

[[image:cincom_tutorial2_fig2138b.png|none|523px|thumb|그림 15-11. 사이트 구성과 사이트에 존재하는 파일 일람작성에 성공]]

17. {{HighlightBold|hello.htm}}링크를 클릭합니다. 그리고 {{HighlightBold|hello.ssp}} 링크를 클릭합니다. 두 번째 페이지(hello.ssp)에 표시된 날짜는 현재날짜입니다.

[[image:cincom_tutorial2_fig2138c.png|none|675px|thumb|그림15-12. 첫 Smalltalk Server Page(SSP)]]

{{CincomSmalltalkBlueFont|Smalltalk 코드를 인식할 수 있는 Web서버만이, 올바르게 "ssp"다룰 수 있습니다. 올바르게 표시되었다면, WebToolkit을 사용해서 구성된 사이트가 제대로 동작하는 것을 의미합니다.}}
|-
| style="text-align:right;width:60px;float:left;" | {{HeadImageDesign}}
| 오리지널 Web로그 통계코드를 파일 인 합니다. 방법은 레슨1의 스텝 1~5를 참조해주십시오. 이 코드는 세 가지 다이얼로그를 표시했었던 것을 기억해주십시오. Web베이스의 어플리케이션으로 만들어졌기 때문에, 이러한 부분을 삭제해서 동작하지 않게 만들 필요가 있습니다. 이것이 완료되면 Web페이지에 모든 결과를 표시하는 SSP를 작성할 수 있습니다. VisualWorks 이미지에 격납되어있는 메서드를 동작시켜 Web페이지를 작성하는 것이 얼마나 손쉽게 가능한지 직접 느껴보십시오.

마지막으로, SSP 파일을 세 개 작성합니다. 이것들은 Web 어플리케이션처럼 외관을 세련되게 만듭니다.
|-
| style="text-align:right;width:60px;float:left;" | {{HeadImageSteps}}
| 18. {{HighlightBold|System Browser}}를 기동시켜주십시오. VisualWorks {{HighlightBold|메인 런쳐}} 윈도우로에서 {{HighlightBold|툴바}} 네 번째 버튼을 클릭하거나, {{HighlightBold|Browser>>System}} 메뉴를 선택해주십시오.

19. 앞서 레슨에서 썼던 "WebLogStats"코드가 남아있는 경우엔 삭제합니다. {{HighlightBold|System Browser}}에서 {{HighlightBold|WebLogStats}} 패키지까지 스크롤합니다. {{HighlightBold|WebLogStats}}를 {{HighlightBold|<오퍼레이트 클릭>}}후 {{HighlightBold|삭제}}(Unload)를 선택합니다. 그리고, {{HighlightBold|weblogstats_2_stage1.st}}를 파일 인 합니다.

20. {{HighlightBold|WebLog}}클래스의 인스턴스측 {{HighlightBold|initialize}} 메서드 끝에 아래와 같은 행을 추가합니다.

<syntaxhighlight lang="smalltalk">
filter := 'ws00'.
</syntaxhighlight>

21. {{HighlightBold|WebLog}}클래스의 인스턴스측 {{HighlightBold|start}}메서드를 아래와 같이 수정합니다.

<syntaxhighlight lang="smalltalk">
start
self startHits.
self startPageCount.
</syntaxhighlight>

22. {{HighlightBold|startHits}} 메서드와 {{HighlightBold|startPageCount}} 메서드에서 {{HighlightBold|Dialog warn:}}문을 삭제합니다.

23. 적당한 텍스트 에디터를 사용해서, 아래 내용의 {{HighlightBold|teaser.ssp}}파일을 작성하고 {{HighlightBold|weblog}}디렉토리에 저장합니다.

<syntaxhighlight lang="html4strict">
<html>
<head><title>WebLog 통계 티저 광고</title></head>
<body>
<center>
<h2>WebLog 통계 티저 광고</h2>
</center>
<%
"get the weblog object for this client session"
aWebLog := session at: 'aWebLog' ifAbsent: [WebLog new].
logFiles := aWebLog getLogFiles.
logFiles do: [ :aFile |
count := aWebLog showHits: aFile.
popularPages := aWebLog showPageCounts: aFile.
response write: ('파일 :', aFile, '<br>').
response write: ('히트..:', count printString, '<br>').
response write: ('탑10 페이지<br>').
1 to: 10 do:
[ :each | response write: ('<br>', (popularPages at: each) printString).].
response write: ('<br><br>').
].
%>
</body>
</html>
</syntaxhighlight>

24. Web브라우저를 기동해서 아래의 URL을 입력해주십시오.

<syntaxhighlight lang="text">
http://localhost:8008/weblogstats/teaser.ssp
</syntaxhighlight>

[[image:cincom_tutorial2_fig2138d.png|none|579px|thumb|그림15-13. Web브라우저에서 Web로그 통계결과를 표시]]

{{CincomSmalltalkBlueFont|Web어플리케이션으로서, 외관을 향상시킬 필요가 있습니다. 이 튜토리얼에서는, 다음에 나오는 세 개의 SSP파일에 대해 자세한 코드 설명은 하지 않습니다. 여기서는 작성된 Smalltalk 코드를 사용해서 Web페이지를 작성하는 것이 약간의 노력만으로 가능하다는 것을 보여드리겠습니다.}}

{{CincomSmalltalkBlueFont|하지만 {{HighlightBold|WebLog}}클래스에서 좀 더 정보를 끌어낼 필요가 있습니다. 그것은 클래스와 Web페이지간에 데이터를 주고받는 "Accessor와 getter" 작성입니다. 이것들은 GUI어플리케이션 작성 레슨7(스텝5)에서 설명했습니다. 오리지널 코드를 파일 인 했기에, 동일한 작업을 반복할 필요가 있습니다.}}

25. {{HighlightBold|accessing}} 프로토콜에 다음 네 가지 메서드를 작성해주십시오(만일 기존에 작성되어있는 경우엔 필요 없습니다.).

<syntaxhighlight lang="smalltalk">
filter
^filter
</syntaxhighlight>

<syntaxhighlight lang="smalltalk">
filter: aFilter
filter := aFilter
</syntaxhighlight>

<syntaxhighlight lang="smalltalk">
logDirectory
^logDirectory
</syntaxhighlight>

<syntaxhighlight lang="smalltalk">
logDirectory: aLogDirectory
logDirectory := aLogDirectory
</syntaxhighlight>

26. 적당한 텍스트 에디터를 사용해, 아래 내용에서 {{HighlightBold|step1.ssp}} 파일을 작성후 {{HighlightBold|weblog}} 디렉토리에 저장합니다.

<syntaxhighlight lang="html4strict">
<%
"get the weblog object for this client session"
aWebLog := session at: 'aWebLog' ifAbsent: [WebLog new].
session at: 'aWebLog' put: aWebLog.
%>
<html>
<head><title>WebLog 통계 스텝1</title></head>
<body>
<center>
<h2>WebLog 통계</h2>
로그파일 장소를 입력해주십시오.
<form method=post action=step2.ssp>
<table border=0 cellpadding=1 cellspacing=1>
<tr>
<td align=right>로그 디렉토리</td>
<td align=left>
<input type=text name=txtLogDirectory size=40
value="<%= aWebLog logDirectory %>">
</td>
</tr>
<tr>
<td align=right>필터</td>
<td align=left>
<input type=text name=txtFilter size=40
value="<%= aWebLog filter %>">
</td>
</tr>
</table>
<input type="submit" value=" OK ">
</form>
<br><br><a href="hello.htm">홈페이지로 돌아감</a>
</center>
</body>
</html>
</syntaxhighlight>

27. 적당한 텍스트 에디터를 사용해, 아래 내용에서 {{HighlightBold|step2.ssp}} 파일을 작성후 {{HighlightBold|weblog}}디렉토리에 저장합니다.

<syntaxhighlight lang="html4strict">
<%
aWebLog := session at: 'aWebLog'.
aWebLog logDirectory: (request anyFormValueAt: 'txtLogDirectory').
aWebLog filter: (request anyFormValueAt: 'txtFilter').
session at: 'aWebLog' put: aWebLog.
%>
<html>
<head><title>WebLog 통계 스텝2</title></head>
<body>
<center>
<h2>WebLog 통계 스텝2</h2>
<form method=post action=step3.ssp>
<select name="cboLogFile">
<%
logFiles := aWebLog getLogFiles.
logFiles do: [ :aFile |
response write: ('<option value="',aFile, '">', aFile).].
%>
</select>
<input type="submit" value=" OK ">
</form>
<br><br><a href="step1.ssp">스텝 1으로 돌아감</a>
</center>
</body>
</html>
</syntaxhighlight>

28. 적당한 텍스트 에디터를 사용해, 아래 내용에서 {{HighlightBold|step3.ssp}} 파일을 작성후 {{HighlightBold|weblog}}디렉토리에 저장합니다.

<syntaxhighlight lang="html4strict">
<html>
<head>
<title>WebLog 통계 스텝3 </title>
</head>
<body>
<center>
<h2>WebLog 통계 스텝3 </h2>
<%
"get the weblog object for this client session"
aWebLog := session at: 'aWebLog' ifAbsent: [WebLog new].
aLogFile := request anyFormValueAt: 'cboLogFile'.
count := aWebLog showHits: aLogFile.
popularPages := aWebLog showPageCounts: aLogFile.
response write: ('파일:', aLogFile, '<br>').
response write: ('히트..:', count printString, '<br>').
response write: ('탑 10페이지<br><br>').
response write: ('<table border=1 cellpadding=1 cellspacing=1>').
1 to: 10 do: [ :each |
response write: ('<tr>').
line := (popularPages at: each) printString.
count := line copyFrom: 1 to: (line indexOf: $-) - 1.
page := line copyFrom: (line indexOf: $') + 2 to: (line size) - 1.
response write: ('<td>', 페이지, '</td><td>', 카운트,'</td>').
response write: ('</tr>').
].
response write: ('</table>').
%>
<br><br>
<br><br><a href="step1.ssp">스텝 1으로 돌아감</a>
</center>
</body>
</html>
</syntaxhighlight>

29. Web브라우저를 기동시키고 아래와 같은 URL을 입력해주십시오.

<syntaxhighlight lang="text">
http://localhost:8008/weblogstats/step1.ssp
</syntaxhighlight>

[[image:cincom_tutorial2_fig2138e.png|none|546px|thumb|그림 15-14. Web브라우저에서 Web로그 통계 결과를 표시]]

30. System Browser로 돌아가, 패키지 Pane에서 {{HighlightBold|WebLogStats}}를 클릭(선택)합니다. {{HighlightBold|<오퍼레이트 클릭>}}후 {{HighlightBold|File Out>>Package...}} 를 선택해주십시오.

31. {{HighlightBold|weblogstats_2_webtoolkit.st}}를 입력합니다.

32. {{HighlightBold|VisualWave(Web)서버 콘솔}} 윈도우로 돌아갑니다. 서버를 선택(반전)후, {{HighlightBold|정지}} 버튼을 클릭합니다.

33. 서버가 아직 선택되어있는 상태에서, {{HighlightBold|서버 삭제}} 버튼을 클릭합니다. 삭제를 확인하는 다이얼로그에서 {{HighlightBold|Yes}}를 클릭합니다.

34. {{HighlightBold|VisualWave(web) 서버 콘솔}} 윈도우를 닫습니다. 콘솔의 {{HighlightBold|File>>VisualWave}} 종료는 선택하지 마십시오. 이것을 선택하면 VisualWorks가 종료됩니다.
|-
| style="text-align:right;width:60px;float:left;" | {{HeadImageCertifacate}}
| <font style="text-align:center;font-weight:bold; font-style: normal;font-size:110%;">정리</font>

이 레슨에서는 기본적인 오리지널 Web로그 통계 코드에 간단한 변경점을 추가해서 HTML페이지에 Smalltalk 스크립트를 기술한 간단한 데모를 시연했습니다. VisualWorks {{HighlightBold|WebToolkit}}을 사용해서 Web베이스의 어플리케이션을 간단히 작성할 수 있었습니다.

{{HighlightBold|아래와 같은 내용을 학습하였습니다}}
* {{HighlightBold|Web Toolkit}} Parcel의 로드
* {{HighlightBold|Web Toolkit}}을 사용해서 가상 사이트 작성
* Web페이지와 Smalltalk 클래스간에 커뮤니케이션하는 Smalltalk Server Pages(SSP)를 작성
|- style="text-align:center;font-weight:bold; font-style: normal;font-size:120%;"
| colspan="2" |<hr style="color:black;background-color:black;height:4px;"> | 목차 | 레슨14 | 정리 |
|}

VisualWorksTutorial2:Page16 - Revision history

Onionmixer: VisualWorksTutorial2 Page16 추가