Top Banner
AJAX Tool for Web Application Development ก : 11p14c561 : ( กก) : 1. : 084-159-2906 E-mail : [email protected] 2. ก กก : 086-771-6076 E-mail : [email protected] ก : .. : 081-831-4945 E-mail : [email protected] ก/ก :
26
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: 626 1

AJAX Tool for Web Application Development

�������������� ก"#$%&'�()*(+,&�- )��.*/0��1(,

�'($2���ก&� : 11p14c561 .�4�56 : ��ก ��������ก������������������ !�"#��$���"�%

(#��'���� ��ก�(ก)�) 67�*(+,& : 1. ���,�-���! � ����!�".�

�� : 084-159-2906 E-mail : [email protected]

2. ���,�-กB" �C��Dก� �กB" �� : 086-771-6076 E-mail : [email protected]

�&�&�8#67�.�9ก:& : �.�.I������! �B�,��� ! �� : 081-831-4945 E-mail : [email protected]

$(�ก(;/$=&,>9ก:& : $,#����ก ��� ! L�$��M�����ก $� ���� �! NBO�"�ก,! P������"��

Page 2: 626 1

i

)6�(;8?�

Q�RNNB'����$���"�%��S'���"��$M��T���.�� � %'�'���C�$�UQ����� V��W �ก �� ���� ������)-ก�N ����ก� �� V������� �"# ����ก��(ก)� X(��$�� ���ก��P"V��%YT������ �ก.(Y������W ��S'���"��$M�� V��WกS %$�� ����� �%�N#��ก�''QP� ����S' %$�� ����� �"# %#���I�L���Z� ����� �'����$�� ���ก�.��[Z�QM� ��Y��%Y��$���"�%�%��C� �QM� %��ZV �ก ���"#�"%����"���V�����S� �C�QP��N��.����S'���"��$M�� ���"��B���V���Z�ก�'ก��"%����"���$���"�% �����Y���I%�%�N#�� �\�ก�T.RUP����ก"V��$�� ก������$���� ���%��C�ก��"%����"���S'���"��$M�����ก��C���$���"�%QP V�.�� �QM�

��$���"�% ���NSกX! (AJAX ` Asynchronous JavaScript and XML) [1] �h�Z�''P�(��Q�ก��������S'���"��$M�� �����MV��QP��� �\� � �'ก�'[Z�QM�T���%.(Y� ���ก��'�V�.�� Z"��Y�N#�C�Q�i�กP"�� �C�QP�T VNC��h� ����P"���Y�P���QP V�Bก$�Y��%� %ก��"%����"� MV������ ก� �'���� $�� ���S� �"#ก�QM�������� QP��%����.(Y�

��Y��%Y Q�RNNB'��N#�PS��V���$���"�%���NSกX! T���.�� � %'�'��ก�'��S'���"��$M������ �ก.(Y������W �V��ก��%�N#�"�� V"#��S'���"��$M�� T�h�ก��M��� ����''���NSกX!��Y� \��N# ����"�����%"#��S' กS��N�C�T��T V�#��ก��ก �"#������������S'���"��$M���V��QPUV��Y� %Z�''ก�������%�$"���ก�� �����Y� �$�����%YN(� %���$�� $���%�N#������$���� �� �%�QM�Q�ก��"���S'���"��$M���''��Y���� T�h���S'���"��$M���%� %ก��M��� ����''���NSกX!.(Y� � X(���h��������%�N#MV��QP�ก��"��%Y �� �\�C�T���V���"#�#��ก.(Y� MV��"�$V�QM�NV���"#��"�Q�ก��C���� � ��Y��h�ก��V���� QP� %ก��C���$���"�%���NSกX! �QM�Q�ก��������S'���"��$M��QP��%.(Y��%ก����

Page 3: 626 1

ii

Abstract At the present, the web application technology has important roles in many areas such as

economics, communication, and education which their demand has greatly increased. The web application has been designed to be more beautiful and more efficient in order to respond user's requirements. However, there are many technologies and they're changing rapidly, the web owner must highly invest in the modification. The method, solving this problem, is to build the tool that can change the old web application by using the new technology. AJAX (Asynchronous JavaScript and XML)[1] technology is very useful for developers who want to build the web application, interacting with the user smoothly and nicely. The old web application must work as sending request to a server and waiting for respond but AJAX work as exchanging data in the background. Using this technology, the web is not to be reloaded a new page every time and is friendly to the user.

Today, AJAX strongly participates in the web development. There are 2 reasons about why to build a new tool. First, the using AJAX to change the old web application isn't convenient because the owner must to program in each file. Another reason is that the most web applications have a same development form, so this work is iterative. This project's idea is to develop and build a new tool that can change the old web application to the web application using AJAX. This concept will make the development be effective such as reducing the expense, reducing working hours, and supporting the using AJAX technology in the web application development.

Page 4: 626 1

iii

ก0AA0ก���.�4ก&> �$�����%Y�C��SN"B"V��T�������%����$�� กB,�N�ก �.�.I������! �B�,��� !

��N��!�%�(ก)��$���� � T\(� �.����)w! ���!��T" �"#�.��%����! �L���������! ��N��!�%�(ก)�V� �$���� X(��$���Z�" QP�$C���#�C������� QP�.�� Z"���� � � �%��h�#��M�! �"#T��QP�.��$���PS� V��W Q�ก�������$���� "�� �

.�.�'$B,�$�ก� NSC �%�QP��������'��B�Q�ก������

.�.�'$B,L�$��M�����ก $� ���� �! $,#����ก ��� ! NBO�"�ก,! P������"���%�#���I�z#���$�� Z� �"##�'ก�,!�����M�M%� "����"��%�{�%�[V�� �

.�.�'$B, $B,$Z ��N��!�Bก�V���%�QP�$�� Z� $�� �.��QNQ�����M� �' �������$B,I QP��h�$��%.�����$

.�'$B,������W �%�W����WL�$����ก $� ���� �! �"#������W�Bก$��%�QP�����Y �"#��%��P����# ������ � กC�"��QN "��#�#��"��%�[V�� �

�����%��B� [Z�N���C��$����Q$V.�ก�'.�'�#$B, '��� ��� [Z� %�#$B,�%��C�QP���ก���Bก$�#�'$�� �C��SN�"# %�Bก����%YT��

,�-���! � ����!�".� ,�-กB" �C��Dก� �กB"

Page 5: 626 1

iv

$&�)(B

)6�(;8?� ....................................................................................................................................................................I

ABSTRACT ........................................................................................................................................................... II

ก0AA0ก���.�4ก&>................................................................................................................................................. III

$&�)(B....................................................................................................................................................................IV

$&�)(B5&* ............................................................................................................................................................VI

)667� 1 )6,%& ............................................................................................................................................................ 1

1.1 RUP��"#$�� �C�$�U.��RUP� ............................................................................................................... 1 1.2 �� \B#��$!.���$���� .......................................................................................................................... 1 1.3 .�'�. .���$����.................................................................................................................................. 2 1.4 �Bก,!�"#�$���� ���%�QM�Q�ก������...................................................................................................... 2 1.5 ������ก��C��������................................................................................................................................ 3 1.6 .�Y� ���"##�#��"�ก��C��������.......................................................................................................... 3 1.7 #��M�!�%�$���V�N#T���'.......................................................................................................................... 5

)667� 2 6L:M7�/4�&,-0�(867��ก7�8-NO��...................................................................................................................... 6

2.1 ���NSกX! (AJAX - ASYNCHRONOUS JAVASCRIPT AND XML) [1]................................................................. 6 2.2 HTML, XHTML, CSS [2] ........................................................................................................................... 8 2.3 ECMASCRIPT [3]......................................................................................................................................... 8 2.4 XMLHTTPREQUEST [4] ............................................................................................................................... 8 2.5 XML [5]....................................................................................................................................................... 8 2.6 �����N������� �MIGRATING MULTI-PAGE WEB APPLICATIONS TO SINGLE-PAGE AJAX INTERFACES� ���

MESBAH & VAN DEURSEN [6] ............................................................................................................................ 9 2.7 JQUERY [7] ................................................................................................................................................... 9 2.8 JDOM [8]..................................................................................................................................................... 9 2.9 HTMLPARSER [9]........................................................................................................................................ 9

)667� 3 ก&�-0���&4'#�/4ก&���ก�)).................................................................................................................... 10

3.1 $�� �� �\�"#P"�กก��C����.����ก ...................................................................................... 10 3.1.1 ������� �������������ก����� ������� � �ก!" ................................................................... 10

3.2 .��กC�P�������C��.��/ �C���ก (INPUT/OUTPUT SPECIFICATIONS) ................................................................ 14 3.2.1 %����&�'�� (Input) .............................................................................................................................. 14 3.2.2 %����&� ก (Output).......................................................................................................................... 14

Page 6: 626 1

v

3.3 .��กC�P��P����%�ก��C���� (FUNCTIONAL SPECIFICATIONS).................................................................... 14 3.3.1 12�ก"���ก���ก��ก��������� �������������ก����� ������� � �ก!" ................................... 14 3.3.2 ก���%3�����4���� (Help) ..................................................................................................... 15

3.4 �\�R �ก X�� !��! (SOFTWARE ARCHITECTURE) ............................................................................ 15 3.5 ก�'Z,�ก�["� L�,�! (PRODUCT INTEGRATION) ................................................................................... 18

)667� 4 ก&�6;$�)................................................................................................................................................. 19

4.1 ก�����'��ก ................................................................................................................................ 19 4.2 ["ก�����'��ก ........................................................................................................................... 21

)667� 5 )6$�V. ....................................................................................................................................................... 25

5.1 .���B�"#.��������#........................................................................................................................... 25 5.2 RUP� �B�$ �"#�������ก�T............................................................................................................ 25

5.2.1 �29��3���ก�� �3ก�� JavaScript �����"! �" (Browser) E4��F................................................. 25 5.2.2 �29����ก������'� �G� �ก HTML �K� XML ............................................................................. 25 5.2.3 �29����ก��M&�������� ��� ������4��E4 ก��������.................................................................... 26 5.2.4 �29��' �ก����� AJAX 3P�'� �G���Q�4��� ................................................................................... 26

5.3 ������Q�ก�������"##�Bก ! ........................................................................................................... 26

�&8ก&��O&��0� ......................................................................................................................................................... 27

5&�X,-ก (APPENDIX)....................................................................................................................................... 28

ก. $ZV ��ก� �� �Y���V��"#��%�� ......................................................................................................................... 28 .. $ZV ��ก�QM������V��"#��%��........................................................................................................................ 29

ก��������� �������������ก����� ������� � �ก!"...................................................................... 29 ก���%3�����4���� (Help) .............................................................................................................. 37

Page 7: 626 1

vi

$&�)(B5&* Z�%� 1-1 �[�L�� ���#�#��"�ก��C��������................................................................................................... 4 Z�%� 2-1 ��"#��%��.��ก��C�����''���NSกX! �%�'��%�'ก�'ก��C����'���S'.............................................. 6 ���"��$M������T [1] ............................................................................................................................................. 6 Z�%� 2-2 ก�# �"[".��ก����.��"#�V�.�� Z"�''���NSกX! �%�'��%�'ก�'ก��C����'���S'���"��$

M������T [1]................................................................................................................................................ 7 Z�%� 3-1 �[�L���Z��$�#''ก��C����.���$���� ���"���S'���"��$M���h�ก��M��� ����''���NSกX!.. 10 Z�%� 3-2 �[�L��ก�Nก .���Z��$��"���S'���"��$M��QP� %ก��M��� ����''���NSกX! ............................. 13 Z�%� 3-3 �[�L�������$�����.����ก ................................................................................................. 17 Z�%� 4-1 ��S'���"��$M�� ����V���%� 1.................................................................................................................... 19 Z�%� 4-2 ��S'���"��$M�� ����V���%� 2.................................................................................................................... 20 Z�%� 4-3 ��S'���"��$M�� ����V���%� 3.................................................................................................................... 21 Z�%� 4-4 [".��ก��C���S'���"��$M���%�T��N�กก��"� ����V���%� 2 QP��h��''���NSกX! �����'� FIREFOX

.................................................................................................................................................................. 22 Z�%� 4-5 ["ก��C����.����S'���"��$M�� ����V���%� 3 �%�T V %ก��กS' SESSION.................................................. 23 Z�%� 4-6 ["ก��C����.����S'���"��$M�� ����V���%� 3 P"��N�ก[V��ก��"��h��''���NSกX!������ก �%Y

.................................................................................................................................................................. 24 Z�%� ก-1 FOLDER �AJAX TOOL� ............................................................................................................................ 28 Z�%� ก-2 SUBFOLDERS �"# FILES L��Q� FOLDER �AJAX TOOL� .......................................................................... 28 Z�%� .-1 FILE �AJAXTOOL.JAR� ............................................................................................................................ 29 Z�%� .-2 �V�� V�#���[Z�QM�.����ก �AJAX TOOL�................................................................................ 29 Z�%� .-3 ก��"���S'���"��$M��QP� %ก��M��� ����''���NSกX! .�Y� ���%� 1 ................................................. 30 Z�%� .-4 ก��"���S'���"��$M��QP� %ก��M��� ����''���NSกX! .�Y� ���%� 2 ................................................. 30 Z�%� .-5 ก��"���S'���"��$M��QP� %ก��M��� ����''���NSกX! .�Y� ���%� 3 ................................................. 31 Z�%� .-6 ก��"���S'���"��$M��QP� %ก��M��� ����''���NSกX! .�Y� ���%� 4 ................................................. 31 Z�%� .-7 ก��"���S'���"��$M��QP� %ก��M��� ����''���NSกX! .�Y� ���%� 5 ................................................. 32 Z�%� .-8 ก��"���S'���"��$M��QP� %ก��M��� ����''���NSกX! .�Y� ���%� 6 ................................................. 32 Z�%� .-9 ก��"���S'���"��$M��QP� %ก��M��� ����''���NSกX! .�Y� ���%� 7 ................................................. 33 Z�%� .-10 ก��"���S'���"��$M��QP� %ก��M��� ����''���NSกX! .�Y� ���%� 8 ............................................... 33 Z�%� .-11 ก��"���S'���"��$M��QP� %ก��M��� ����''���NSกX! .�Y� ���%� 9 ............................................... 34 Z�%� .-12 ก��"���S'���"��$M��QP� %ก��M��� ����''���NSกX! .�Y� ���%� 10 ............................................. 34 Z�%� .-13 ก��"���S'���"��$M��QP� %ก��M��� ����''���NSกX! .�Y� ���%� 11 ............................................. 35 Z�%� .-14 �\' PROGRESS BAR �%�.(Y� � P"��N�กก�B� OK................................................................................... 35 Z�%� .-15 ก��"���S'���"��$M��QP� %ก��M��� ����''���NSกX! .�Y� ���%� 12 ............................................. 36 Z�%� .-16 ก��"���S'���"��$M��QP� %ก��M��� ����''���NSกX! .�Y� ���%� 13 ............................................. 36

Page 8: 626 1

vii

Z�%� .-17 �"��ก HELP > MANUAL ���������Z��ก��#ก�'ก�QM������ก .............................................. 37 Z�%� .-18 P��� ABOUT ����.�� Z".����ก ................................................................................................ 37

Page 9: 626 1

1

)667� 1 )6,%&

1.1 ._B'&�/4�-&�$%&�(BN��._B'&

Q�RNNB'����$���"�%��S'���"��$M��T���.�� � %'�'���C�$�UQ����� V��W �ก �� ���� ������)-ก�N ����ก� �� V������� �"# ����ก��(ก)� X(��$�� ���ก��P"V��%YT������ �ก.(Y������W ��S'���"��$M�� V��WกS %$�� ����� �%�N#��ก�''QP� ����S' %$�� ����� �"# %#���I�L���Z� ����� �'����$�� ���ก�.��[Z�QM� ��Y��%Y��$���"�%�%��C� �QM� %��ZV �ก ���"#�"%����"���V�����S� �C�QP��N��.����S'���"��$M�� ���"��B���V���Z�ก�'ก��"%����"���$���"�% �����Y���I%�%�N#�� �\�ก�T.RUP����ก"V��$�� ก������$���� ���%��C�ก��"%����"���S'���"��$M�����ก��C���$���"�%QP V�.�� �QM�

��$���"�% ���NSกX! (AJAX ` Asynchronous JavaScript and XML) [1] �h�Z�''P�(��Q�ก��������S'���"��$M�� �����MV��QP��� �\� � �'ก�'[Z�QM�T���%.(Y� ���ก��'�V�.�� Z"��Y�N#�C�Q�i�กP"�� �C�QP�T VNC��h� ����P"���Y�P���QP V�Bก$�Y��%� %ก��"%����"� MV������ ก� �'���� $�� ���S� �"#ก�QM�������� QP��%����.(Y�

��Y��%Y Q�RNNB'��N#�PS��V���$���"�%���NSกX! T���.�� � %'�'��ก�'��S'���"��$M������ �ก.(Y������W �V��ก��%�N#�"�� V"#��S'���"��$M�� T�h�ก��M��� ����''���NSกX!��Y� \��N# ����"�����%"#��S' กS��N�C�T��T V�#��ก��ก �"#������������S'���"��$M���V��QPUV��Y� %Z�''ก�������%�$"���ก�� �����Y� �$�����%YN(� %���$�� $���%�N#������$���� �� �%�QM�Q�ก��"���S'���"��$M���''��Y���� T�h���S'���"��$M���%� %ก��M��� ����''���NSกX!.(Y� � X(���h��������%�N#MV��QP�ก��"��%Y �� �\�C�T���V���"#�#��ก.(Y� MV��"�$V�QM�NV���"#��"�Q�ก��C���� � ��Y��h�ก��V���� QP� %ก��C���$���"�%���NSกX! �QM�Q�ก��������S'���"��$M��QP��%.(Y��%ก����

1.2 -(A=V.�4$��#N��2����&,

1. �����กC�P�������'� �Q�ก��"%�����S'���"��$M�� �%� %ก��M��� ����''����T�h�ก�ก��M��� ����''���NSกX!

2. �����������$���� ���%�QM�Q�ก��"%�����S'���"��$M�� � Z�''�%�����.(Y�T��

Page 10: 626 1

2

1.3 N�)�NAN��2����&,

1. ก������P"�กก�N#��ZV'���Y�-��.��ก����� ���P"�P�����S'���"��$M���%� ���ก��"�� �"�.�� Z"�%� ���ก� ��h� XML ������V� ����T$"��� !

2. ����� �\�"%���ก��M��� ���.��� �Z�%��h��''T��� �ก"��$!�h�ก��M��� ����''���NSกX!T��

3. �$�����%YN#�(ก)�\(�ก��"%����"�ก��M��� �������T�h�ก��M��� ����''���NSกX!�"#N#�����$���� ���%�QM�Q�ก��"%����"��%Y

4. �V��.��.�� Z"�%�N#�"%����h�ก��M��� ����h��''���NSกX! ��� %ก�#'B���[Z�QM� 5. '���,����[".��.�� Z"�%��P"� �N�ก���NSกX! ��� %ก�#'B���[Z�QM� 6. �$���� ���%�QM�Q�ก��"%����"��%YN#\Zก���������N���

1.4 �V.ก� #̀�/4����������67�a1Oa,ก&�*(+,&

X�� !��!�%�QM�Q�ก�������$�� ���'' (Mold/Engine) %��� V�T�%Y - Eclipse ���QM� Java, JSP �h�L�)�Q�ก������ - Notepad++ ���QM� Javascript, HTML, XML �h�L�)�Q�ก������ - Apache Tomcat 6.0.14 - Window XP - Mozilla Firefox - jQuery - JDOM - HTMLParser

X�� !��!�%�QM�Q�ก�������$���� �� AjaxTool %��� V�T�%Y

- Eclipse ���QM� Java �h�L�)�Q�ก������ - Apache Tomcat 6.0.14 - Window XP - Swing-layout-1.0.3 - SWT plug-in .�� eclipse

Page 11: 626 1

3

Q��V��.���$���� �� �Bก,!�"#��ก�� %��� V�T�%Y

- Personal Computer P�� Notebook - Microsoft Word Documents, PDF files, Microsoft PowerPoint Files - Mouse, Keyboard

1.5 �,-6&�ก&�;%&�,0,�&,

1. �(ก)��$�����'�Y�� �� 1.1 �(ก)�Z�''ก��.%����S'���"��$M���''����T 1.2 �(ก)�ก��C����.�����NSกX! 1.3 �(ก)������N���%��ก%���.���

2. ���$�#P!$�� ���ก�.��#'' 2.1 �(ก)�Z�'' �"#������T. V��WQ�ก��"%�����S'���"��$M���h��''���NSกX!

3. ��ก�''#'' 3.1 กC�P��Z�''�"#������T.P"�กQ�ก��"%�����S'���"��$M���h��''���NSกX! 3.2 ��ก�''�$���� ���%�QM�Q�ก��"���S'���"��$M�� � Z�''�"#.��กC�P��

�%����T�� 4. �����#''

4.1 ������$���� ���%�QM�Q�ก��"���S'���"��$M�� � Z�''�"#.��กC�P���%����T��

5. ����'#'' 5.1 �C���S'���"��$M��P"��WZ�'' �����'ก�'�$���� ���%�T�������.(Y�

6. �B["�$���� �"#�.%�������

1.6 N(b,A�,�/4�484�-/&ก&�;%&�,0,�&,

#�#��"�Q�ก��C��������.���$�����$���� �����NSกX!�C�P�'�������S'���"��$M���� �\����T�����Z�%� 1-1

Page 12: 626 1

4

Z�%� 1-1 �[�L�� ���#�#��"�ก��C��������

Page 13: 626 1

5

1.7 .�4281,#67��&;-?&�4c;O�()

1. T�������'� � �"#�$���� ���%��� �\�"���S'���"��$M���''��Y���� T�h���S'���"��$M���%� %ก��M��� ����''���NSกX! ������C�TQM�Q�ก��������S'���"��$M��QP��%.(Y�

2. ������V���� QP� %ก��C���$���"�%QP VW �#�Bก !QM�Q�ก��������S'���"��$M��������h���["�ก���QP��N��.����S'���"��$M�� P�� �QM���$���"�%���NSกX!���� �ก.(Y�

3. �����"�$V�QM�NV���"#���� $�� �#��ก Q�ก��"%�����S'���"��$M������T �h�ก��M��� ����''���NSกX!

4. ������C�$�� Z������������ก X�� !��! �#�Bก !QM�Q�ก�������$���� ���ก%���ก�'��S'���"��$M��

5. �� �\�C��$���� ��ก��"���S'���"��$M��T�h�ก��M��� ����''���NSกX!�%Y �#�Bก !QM����ก�'X�� !��!����W�%��ก%���.���T��

Page 14: 626 1

6

)667� 2 6L:M7�/4�&,-0�(867��ก7�8-NO��

2.1 ���� ก"# (AJAX - Asynchronous JavaScript And XML) [1]

���NSกX!�h���$���"�%�%�QM�Q���S'���"��$M�� ����h���$��$P�(���%�QM�Q�ก��P"�.�� Z" V��W �N�ก�X�!����!��� %.���%ก�V�ก��P"��''��S'���"��$M������T �MV� $�� �S�Q�ก��P"��"#.���.��.�� Z"�%��P"�

Z�%� 2-1 ��"#��%��.��ก��C�����''���NSกX! �%�'��%�'ก�'ก��C����'���S'

���"��$M������T [1]

N�กZ�%� 2-1 classic web application model �h�ก�����ก��"ก�"%���.�� Z"�''

��S'TX !����T �%� %ก��V� HTTP Request �����.�.�� Z"ก�'��S'�X�!����!P"��N�ก��Y���S'�X�!����!กSN#�V�.�� Z"�%��h� Html TQP����T$"��� ! �V�� Ajax web application model �h�ก�����ก�

Page 15: 626 1

7

�C�����''���NSกX! ��� %ก��V� HTTP Request ��� Ajax engine N�ก�R��T$"��� ! ������S'�X�!����! P"��N�ก��Y���S'�X�!����!กSN#�V�.�� Z"TQ�Z�'' XML ก"�'T���T$"��� !

Z�%� 2-2 ก�# �"[".��ก����.��"#�V�.�� Z"�''���NSกX! �%�'��%�'ก�'ก��C����'���S'���"��$

M������T [1]

N�กZ�%� 2-2 ก��C����.�� classic web application model �%�'��%�'ก�'��"� N#�PS��V�

%ก����.�.�� Z".��T$"��� !T����X�!����! �"���N�ก#�����X�!����!# �"[".�� Z"��SN�"��N(��V�ก"�' ����T$"��� ! �V��ก��C����.�� Ajax web application model N#�PS��V� %ก����.�[V�� Ajax engine �"��กS���.� V�T����X�!����! ����%��R��T$"��� !T V ����QP��X�!����!# �"["N���SN � V� ����X�!����!# �"["��SNกSN#�� �\�C� �����'�T$"��� !T��

Page 16: 626 1

8

2.2 HTML, XHTML, CSS [2]

HTML �h�L�)� �!ก���%�\Zก����.(Y����������["�"#Z�''.��.�� Z"[V�� ������S'�'��!�X�! ����h� � �-��P�(��.�� ISO X(��N��ก���� World Wide Web Consortium (W3C)

XHTML �h�L�)� �!ก���MV���%��ก�' HTML � V V�� ��%� %$�� �.� ���Q�Z�''.����! �กก�V� �"# % � -�� �กก�V� L�)� HTML

CSS (Cascading Style Sheets) [3] �h�L�)��%�QM�กC�P��Z�''ก�����[" �MV� ���ก�.��� ����ก)��V�TPV �''TP� N#\ZกกC�P����� CSS

2.3 ECMAScript [3]

�h�L�)��$� !�%��C������ZV'���S'�'��!�X�! �MV� JavaScript ������.��\(�.�� Z" V��WQ���S'���"��$M�� �"#Q��%��%YกSN#QM� JavaScript �h�P"�ก JavaScript �h�L�)��$� !�%�\ZกQM�'��R��T$"��� ! ������.��\(� Document Object Model (DOM) �"#�����QM�����.�� Z"�%� %ก��"%����"�P��� � �'ก�'[Z�QM� ��� JavaScript \Zก����� �N�ก ECMAScript X(���h� � -��N�ก Ecma International Ecma International

2.4 XMLHttpRequest [4]

�h����%T��%��� �\�%�กQM�N�กL�)��$� ! V��W ������C�ก��"ก�"%����"#�'Z�'' XML N�ก��S'�X�!����! ���QM� HTTP X(������ก��M��� V�#P�V����S'�'��!�X�!����R��T$"��� ! (Client-Side) ก�' ��S'�X�!����!����R���X�!����! (Server-Side) X(��N#�C�ก��"ก�"%���[V��i�กP"���C�QP�[Z�QM�T V ����P"�P�����S'���"��$M��QP V��Y�P �

2.5 XML [5]

XML (Extensible Markup Language) X(���h�L�)� �!ก���C�P�'ก�QM��������T �������� W3C ��� %NB�#��$!������h� �����%����T�� �� V�ก��Q�#''�%� %$�� � ก V��ก��(�MV�QM�$� ���� �! %� % #''��'� �ก�$�"# �� P����NN#�h�$�"#��ก #�Bก !�%� %$�� ���ก�������.�� Z"\(�ก��) ��กN�ก�%Y���������h���Y�-��Q�ก�����L�)� �!ก���i��#����%ก.�Y�P�(�� XML QM�Q�ก��"ก�"%���.�� Z"#P�V���$����$� ���� �!�%�� ก V��ก�� �"#����ก��"ก�"%���.�� Z"[V��������!��S

Page 17: 626 1

9

2.6 �&,-0�(8������ pMigrating Multi-page Web Applications to Single-page AJAX

Interfacesr 2;8 Mesbah & van Deursen [6]

�h������N���%��ก%���.���ก�'ก��"%����"#�(ก)��$�����.����S'��N ��� %ก��'V�#�L�.����S'��N�"#$� ����� ! V��W��ก�h�� V"#M����"���"���ก �QP���ZVQ�Z���NSกX!���"��$M��

�����N��.�� Mesbah & van Deursen T���(ก)�Z�''Q�ก��"%����"�$� ����� ! V��WQP��h�Z�''���NSกX! ����%��(ก)��'V���ก�h�$� ����� ! V��W ���Z�%� 3 X(��T��� ก V��ก�'�$�����%Y$�� �$�����%YN#����T�%�Z�''ก��"%���ก��M��� �����V���Y� ���N#�����$���� ���%�QM�Q�ก��"%���ก��M��� �����������%��$�����%YT VT������T�%���S'����"��$M���Bก�'' � VN# %�''��! .����S'����"��$M���%��� �\�"%���T��

2.7 jQuery [7]

�h� library .�� javascript �%� %ก�QM���V����VP"���"# % � -��ก�QM� X(���� �\QM�V� ก�' library javascript ����WT�� ����C� �QM��(�.�� Z"[V�� XMLHttpRequest

2.8 JDOM [8]

�h� open source �%�QM�Q�ก����� html document ���N#���� � � -�� W3C

2.9 HTMLParser [9]

�h� ���V�� html �"�������h� tree �����QM� �N��'P�.�� Z" V��W.��� V"# node ���� P��.���P��(id), .�� Z".���P��

Page 18: 626 1

10

)667� 3 ก&�-0���&4'#�/4ก&���ก�))

��ก �$���� �����NSกX!�C�P�'�������S'���"��$M�� �%�T�������.(Y�Q��$�ก��%Y �h��$���� ���%�QM�Q�ก��"���S'���"��$M���%� %������T. � �%�กC�P�� T�h���S'���"��$M���%� %ก��M��� ����''���NSกX!T����V���#��ก�"#���S� ��� %.��กC�P�����X�� !��!�"#ก���ก�'' ����%Y

3.1 �-&�$&�&�=�/4'/(กก&�6%&�&,N��2.��ก��

��ก �%Y %ก��C����P"�ก $��

3.1.1 �./��- )��.*/0��1(,a'O�7ก&��1����28��))���� ก"#

P����%��%Y�h�P����%�P"�ก.�� ����ก X(��N#�C�ก��"���S'���"��$M������T�%� %������T. � �%�กC�P�� T�h���S'���"��$M���%� %ก��M��� ����''���NSกX! X(���� �\����T������[�L���Z��$� ���Z�%� 3-1

Z�%� 3-1 �[�L���Z��$�#''ก��C����.���$���� ���"���S'���"��$M���h�ก��M��� ����''���NSกX!

N�ก�[�L���Z��$� �� �\�C� ��I�'����"#��%��.���Z��$� �"#.�Y� ��Q�ก�QM�

��ก ������"���S'���"��$M��QP��h�ก��M��� ����''���NSกX! T������$C��I�'���Z��$� (Use Case Narrative) ����%Y

Page 19: 626 1

11

Use Case#AJ001 �"���S'���"��$M��QP� %ก��M��� ����''���NSกX!

Goal in Context [Z�QM��� �\�"���S'���"��$M��QP� %ก��M��� ����''���NSกX!���QM��$���� ���%������.(Y�

Primary Actor [Z�QM�

Stakeholder Interests Stakeholders and

Interests [Z�QM� ���ก��"���S'���"��$M���%� ���ก�QP� %ก��M��� ����''���NSกX!

Precondition [Z�QM� �V���S'���"��$M�� �%� ���ก��"�ก��M��� ����h��''���NSกX! ��� ��Y� C��P�V� tag .��.�� Z"�%� ���ก��C� �����[" �����$���� ���%�T�������.(Y� ������C�ก��"�QP� %ก��M��� ����''���NSกX!

Postconditions \����S'���"��$M���%�[Z�QM� ���ก��"�QP� %ก��M��� ����''���NSกX! %Z�'' � � ������T..��#'' �"#[Z�QM�Q�V����B �.�� �\Zก ���$'\��� N#�� �\�"���S'���"��$M���%� ���ก�QP� %ก��M��� ����''���NSกX!T��

Trigger [Z�QM� ���ก�QM��$���� ���%�T�������.(Y�Q�ก��"���S'���"��$M��QP� %ก��M��� ����''���NSกX!

Step Action

1 [Z�QM�กC�P��� �Z�%� ���ก�N#�"%����h�ก��M��� ����''���NSกX!

2

[Z�QM�กC�P��.�� Z"�%�N#�C� �����N�กP�����S'��N�%��"��ก

3 [Z�QM�กC�P�� C��P�V�.�� tag �%�N#�C�.�� Z"T����["

4

#'' �N��'����B �%��'�.�� � T���กVP���� �Z�%� ���ก�N#�"%����h�ก��M��� ����''���NSกX!, C��P�V�.��.�� Z"�%�N#�C� �����N�กP�����S'��N�%��"��ก �"# C��P�V�.�� tag �%�N#�C�.�� Z"T����["

5 #''�����V��.�� engine �%��C�P����%��(�.�� Z"N�กP�����S'��N �'V� � tag .��.�� Z"�%�[Z�QM� ���ก�

6 #''���� engine ������(�.�� Z" �"���C� ��"�QP���ก ���ZVQ�Z.�� XML 7 #''���� �V��.�� javascript �%�QM�Q�ก��(� XML �N�ก engine ��ก"�TQ�

P���� �Z�%�[Z�QM��"��ก

Description

8 #''�C�ก��"%����"�ก��M��� ������ �h�ก��P"�.�� Z"[V�� function javascript

Extensions Step Branching Action

Page 20: 626 1

12

5a ก,%\��[Z�QM�Q�V����B �%�#''T V���' [Z�QM�N# ����C�ก�Q�V����B QP V�%ก$�Y�

Remarks

N�ก$C��I�'���Z��$� �� �\�C�.�Y� ��Q�ก�QM��$���� ���"���S'���"��$M���h�

�''���NSกX! L��Q��Z��$� ������h��[�L��ก�Nก ���������QP��PS�L�� �ก����.(Y� ���Z�%� 3-2

Page 21: 626 1

13

Z�%� 3-2 �[�L��ก�Nก .���Z��$��"���S'���"��$M��QP� %ก��M��� ����''���NSกX!

Page 22: 626 1

14

3.2 NO�ก%&',;$0��,%&�NO&/ ,%&��ก (Input/Output Specifications)

3.2.1 $0��,%&�NO& (Input)

1. ��S'���"��$M������T (directory path .����S'���"��$M��) �%�[Z�QM� ���ก�N#�"%���ก��M��� ����h��''���NSกX! ���N# ����h���S'���"��$M���%� %������T.��� V�T�%Y

- \Zก��������� jsp ��V���Y� 2. P�����S'��N.��� �ZP��"��ก! �%�[Z�QM� ���ก�N#�"%���ก��M��� ����h��''���NSกX! (�h�

file �� �กB" .jsp ��V���Y�) 3. ��� ��� .���X�!����! �%�[Z�QM� ���ก�N#�C���S'���"��$M��[""��I!T�� 4. $ZV"��ก!�"# tag ID �%�[Z�QM� ���ก�N#�"%���ก��M��� ����h��''���NSกX! ���N# ��� %

������T.����%Y - tag ID X(���h�'���,����[".��.�� Z"�%�T��N�ก"��ก!�%��"��ก ����h�$V���%��ก��ก�'

tag ID .�� C��P�V�.�� Z"�%�"��ก!��Y�N#T�P"� � ( ����h� tag M�����%��ก������)

3.2.2 $0��,%&��ก (Output)

1. ��S'���"��$M��[""��I! �%�T��N�กก��"�QP� %ก��M��� ����h��''���NSกX! ���N#�กS'��ZVQ� directory �output� .����ก

3.3 NO�ก%&',;',O&67�ก&�6%&�&, (Functional Specifications)

N�ก$�� �� �\.����ก .��� �� �� �\�'V�ก��C�����h��R�ก!M�� V��WT����� V�T�%Y

3.3.1 }_�ก#1(,�ก7�8-ก()ก&��./��- )��.*/0��1(,a'O�7ก&��1����28��))���� ก"#

�������ก��"���S'���"��$M��QP� %ก��M��� ����''���NSกX!��Y� ��ก �� �\ 1. �N��'.�� Z".��.���%�[Z�QM�����.�� T���กV ก� �N��' file ��S'��N.��� �ZP��"��ก!�%�

[Z�QM� ���ก�N#�"%���ก��M��� ����h��''���NSกX! $��N# ����h� file .jsp ��V���Y� 2. �C�ก�$��"�ก��S'���"��$M�� ���''�%� ���ก�N#�"%���ก��M��� ����h��''���NSกX!

��กS'T��Q���ก ������ก� �� �Y� mold P�� engine "�T QP��� �\�"%���ก��M��� ����h��''���NSกX!T��

Page 23: 626 1

15

3. �C�ก��� tomcat server �%�\Zก �� �Y� �ก�' ����ก 4. %P����'��!�X�!���.(Y� � T��QM�����["��S'���"��$M�� ���''�%�$��"�ก � �����QP�

[Z�QM��C�ก��"��ก� �ZP��"��ก!�%� ���ก�N#�"%���ก��M��� ����h��''���NSกX! ��� ��Y�กC�P�� tag Id �%�$ZVก�'"��ก!��Y�W����

5. ����NC����$ZV"��ก!�"# tag ID �%�[Z�QM� ���ก�N#�"%���ก��M��� ����h��''���NSกX! 6. ��ก��C����.�� tomcat server "� � ���[Z�QM��C�ก��"��ก$ZV"��ก!�"# tag ID ��SN�%�'���

�"�� 7. %ก� �N��'Q� ������ �V�[Z�QM����.�� Z".��.��$'P��T V กV���%�N#�C�����ก�

�"���S'���"��$M��QP� %ก��M��� ����''���NSกX! 8. �C�ก����� �"# �� �Y� mold P�� engine "�Q���S'���"��$M�� ���''�%�$��"�ก � �����

�C�ก��"���S'���"��$M�����ก"V��QP� %ก��M��� ����''���NSกX!T�� 9. �C���S'���"��$M��[""��I!�%�T���C�ก��"��h��''���NSกX!�%�'����"�� �กS'T��Q�

directory �output� .����ก

3.3.2 ก&��$;��-&�1?-8�'/�� (Help)

�� �\�����ก��#ก�'ก�QM���� � ��Y�����Z.�� Z"�ก%���ก�'��ก T��

3.4 $=&._A8ก���"�}A#�-�# (Software Architecture)

ก���ก�''�$�����.��X�� !��!T���'V��V�� V��W.����ก ��ก�h� 3 #��' (Layers) T���กV

1. �V�� V�#��� (Interface) �h��V��.����ก �C�P�' �� V�ก�'[Z�QM���� #ก�'����

- Main Page P���P"�ก.����ก

2. �V��$�'$B (Controller) �h��V���%� �� V�#P�V���V�� V�#���ก�'�V��.�� Z" ������C�.�� Z" �# �"[" #ก�'����

- MainProcess �h��V��$�'$B ก��C����P"�ก.����ก - ValidateInputModule �h�� �Z"�%��C�ก��'.�� Z".��.��N�ก[Z�QM� � �N��' ���

�N��'�V���S'��N�%��'�.�� � %Z�''\Zก ��� �ก�'������T..����ก P��T V �"# �N��'�V�[Z�QM�T�����.�� Z".��.�� �$'\���P��T V \�� �N��'$�� \Zก ����%�'����"�� กSN#�C�ก��V�$ZV"��ก! �"# tag id X(���h�.�� Z".��.���%�[Z�QM�กC�P�� T��� MoldBuilderModule V�T

Page 24: 626 1

16

- MoldBuilderModule �h�� �Z"�%�QM�Q�ก����� Mold P�� Engine ���N#�'$ZV"��ก! �"# tag id N�ก ValidateInputModule �"���C�T���� Mold N�ก��Y� N#�V� Mold �%�����T��� MoldInstallerModule V�T

- MoldInstallerModule �h�� �Z"�%�N#�C�ก��' Mold N�ก MoldBuilderModule ������%�N#�C� Mold T �� �Y�T��Q���S'����"��$M�� �%� ���ก�N#�"%���ก��M��� ����h����NSกX!

3. �V��.�� Z"(Data) �h��V��.��.�� Z"�%��ก%���.���ก�'��ก ��Y�.��.���"#.���ก��Y�P �

#ก�'���� - WebAppPath (input) �h� directory path .����S'���"��$M���%�[Z�QM� ���ก�N#

�"%���ก��M��� ����h��''���NSกX! - WebPage (input) �h�P�����S'��N.��� �ZP��"��ก! �%�[Z�QM� ���ก�N#�"%���ก�

�M��� ����h��''���NSกX! - DomainName (input) �h���� ��� .���X�!����! �%�[Z�QM� ���ก�N#�C���S'���"��$

M��[""��I!T�� - LinksAndTagID (input) �h�$ZV"��ก!�"# tag ID �%�[Z�QM� ���ก�N#�"%���ก��M��� ���

�h��''���NSกX! - WebAppObject (output) �h���S'���"��$M��[""��I! �%�T��N�กก��"�QP� %ก�

�M��� ����h��''���NSกX! ���N#�กS'��ZVQ� directory �output� .����ก - Mold / Engine �h�� V�� �!�%�\Zก����.(Y���� MoldBuilderModule T��QM� �� �Y�"�T

Q���S'���"��$M���%� ���ก�N#�"%����h�ก��M��� ����''���NSกX! ����V��.�� Mold T���กV o Text file �%��กS' code function javascript �%�N��ก��ก%���ก�'ก��M��� ����''��

�NSกX! X(��N#QM���ก"�Q�P�����S'��N�%� %"��ก!�%��� ���ก��"%����h����NSกX!��ZV

o File jsp �%�N��ก�� %� �'$C����.� (request) N�ก javascript �"��$��.�� Z"TQP�Q�Z�''.�� XML

o jQuery.js �h� library .�� javascript �''QP V QM�N��ก�ก�'�V�� content .�� HTML [V�� javascript �%��C�$�U ��� %$�� �� �\Q�ก�N��ก�ก��C�����'' AJAX T����V���V������%ก����

o JDOM.jar �h� library .�� JAVA QM�Q�ก�N��ก�ก�' DOM element V��WQ�P�����S'��N

Page 25: 626 1

17

o htmlParser.jar �h� library .�� JAVA QM�Q�ก�N��ก��V�� content V��W.�� HTML

�$�����.����ก ��Y��� �V���%Y %�V��#ก�'�"# %ก��M��� V�.�� Z"#P�V��ก��

���Z�%� 3-3

Z�%� 3-3 �[�L�������$�����.����ก

Page 26: 626 1

18

3.5 ก&�)��`&ก&�X/0A5(`�# (Product Integration)

��ก �%�T�������.(Y�#ก�'����P�� ����� (source code) �C�$�U�%��% ���T�������.(Y��������%Y

- �V�� V�#��� (Interface) �%�QM��C�P�' �� V�ก�'[Z�QM� - �V��$�'$B (Controller) .����ก ��Y�P � - �V��.�� Z" (Data) T���กV Mold �ก���� �V���%��C� �N�ก Open Sources �"#

Component ����W �V��.����ก �%������.(Y� ����C� �N�ก Open Sources �"# Component ����W �

#�Bก !QM� T���กV �V��.�� Mold ��� V�T�%Y - jQuery.js - JDOM.jar - htmlParser.jar