85
Mr.Warawut Khangkhan Mr.Warawut Khangkhan Facebook: http://www.facebook.com/AjWarawut Twitter: http://twitter.com/awarawut E-Mail: [email protected] Mobile: 089-461-9591

พื้นฐานภาษาสำหรับพัฒนาเว็บไซต์

  • Upload
    warawut

  • View
    928

  • Download
    1

Embed Size (px)

DESCRIPTION

การทำงานของ Client-Server ประเภทของโปรแกรมบนเว็บ ภาษาที่ทำงาน Client-Side Scripting ภาษาที่ทำงาน Server-Side Scripting ภาษาอื่นที่ใช้สร้างเว็บไซต์

Citation preview

Page 1: พื้นฐานภาษาสำหรับพัฒนาเว็บไซต์

Mr.Warawut KhangkhanMr.Warawut KhangkhanFacebook: http://www.facebook.com/AjWarawut

Twitter: http://twitter.com/awarawutE-Mail: [email protected]

Mobile: 089-461-9591

Page 2: พื้นฐานภาษาสำหรับพัฒนาเว็บไซต์

��������������� ������������� ����- ����� ��� (Client-Server)

� ��� ������������� ���

� ������������� !"��� ���� (Client-Side Scripting)

� ������������� !"� ����� ��� (Server-Side Scripting)� ������������� !"� ����� ��� (Server-Side Scripting)

� ����#�����$%&'�&�� ������

Mr.Warawut Khangkhan 2����� 3 *#+�,������'��-�.�*./�� ������

Page 3: พื้นฐานภาษาสำหรับพัฒนาเว็บไซต์

Mr.Warawut Khangkhan ����� 3 *#+�,������'��-�.�*./�� ������ 3

Page 4: พื้นฐานภาษาสำหรับพัฒนาเว็บไซต์

�������������� �������-�����������

Mr.Warawut Khangkhan ����� 3 *#+�,������'��-�.�*./�� ������ 4

Page 5: พื้นฐานภาษาสำหรับพัฒนาเว็บไซต์

�������������� �������-����������� ������������ !��������"#��$�%$�

Mr.Warawut Khangkhan ����� 3 *#+�,������'��-�.�*./�� ������ 5

Page 6: พื้นฐานภาษาสำหรับพัฒนาเว็บไซต์

�������������� �������-����������� ������������ !�����&�� �%'�

Mr.Warawut Khangkhan ����� 3 *#+�,������'��-�.�*./�� ������ 6

Page 7: พื้นฐานภาษาสำหรับพัฒนาเว็บไซต์

�����������������! ���

Mr.Warawut Khangkhan ����� 3 *#+�,������'��-�.�*./�� ������ 7

Page 8: พื้นฐานภาษาสำหรับพัฒนาเว็บไซต์

Mr.Warawut Khangkhan ����� 3 *#+�,������'��-�.�*./�� ������ 8

Page 9: พื้นฐานภาษาสำหรับพัฒนาเว็บไซต์

���� ����������������� �������������� ��� ��0����������� Static (Static Programming)

� ��� ��0����������� Dynamic (Dynamic Programming)

Mr.Warawut Khangkhan ����� 3 *#+�,������'��-�.�*./�� ������ 9

Page 10: พื้นฐานภาษาสำหรับพัฒนาเว็บไซต์

�����()*+����%�!! Static (Static

Programming)

Mr.Warawut Khangkhan ����� 3 *#+�,������'��-�.�*./�� ������ 10

Page 11: พื้นฐานภาษาสำหรับพัฒนาเว็บไซต์

�����()*+����%�!! Dynamic (Dynamic

Programming)

Mr.Warawut Khangkhan ����� 3 *#+�,������'��-�.�*./�� ������ 11

Page 12: พื้นฐานภาษาสำหรับพัฒนาเว็บไซต์

Mr.Warawut Khangkhan ����� 3 *#+�,������'��-�.�*./�� ������ 12

Page 13: พื้นฐานภาษาสำหรับพัฒนาเว็บไซต์

������������������������ !������������������������ ! (Client(Client--Side Side

Scripting)Scripting)� �1� ������0����'������ (Script) �������� !"��� ���� %2� JavaScript ��� DOM �1��&�

� '2�����3� !"�042$� HTML ���54�������6�7&�0 ������� ��� *#���'���264&$%&�.��� %2� ����'7��&���� �#� ������3'��&�4����64&$%&�8� ����264&$%&�.��� %2� ����'7��&���� �#� ������3'��&�4����64&$%&�8� �����.� ����0� �#+-� ���59�����'7���� �%.� �1��&�

� �!33:�.������$%&02���*�2-��0$� ����� AJAX *#� *���������2��.�$����$%&���$-&�.� ������

Mr.Warawut Khangkhan ����� 3 *#+�,������'��-�.�*./�� ������ 13

Page 14: พื้นฐานภาษาสำหรับพัฒนาเว็บไซต์

,�������+���(#�����)'-�(#./0� �������� HTML – HyperText Markup Language

� XHTML – eXtensible HyperText Markup Language

� DOM (Document Object Model) & JavaScript

Mr.Warawut Khangkhan ����� 3 *#+�,������'��-�.�*./�� ������ 14

Page 15: พื้นฐานภาษาสำหรับพัฒนาเว็บไซต์

HTML� 02��3�� HyperText Markup Language

� �# ����������.��;� �1����� %��������0�0 �'��< ����� 7�0(Hypermedia Document Description Language)

� 60�*�2$����� ��#�2�0 www (World Wide Web)� 60�*�2$����� ��#�2�0 www (World Wide Web)

� $%&�.�����.� (Markup Tag) *#����-�&��������:�����'7�6� �&�4� �4���* ����.�5:#��= 62������������ ������� ��� (Web Browser)

� $����� (Tag) 3���'2���0�0 (Attribute) *#�����:�����'7�6�� 54�*./���9+��70 World Wide Web Consortium (W3C) �70����2�����3������ SGML (Standard Generalized Markup Language)

Mr.Warawut Khangkhan ����� 3 *#+�,������'��-�.�*./�� ������ 15

Page 16: พื้นฐานภาษาสำหรับพัฒนาเว็บไซต์

����+����!��� HTML (HTML Elements)� ���� HTML – �����7&�0 ��#��-��0 < ��� > �70�.���$���2�� tag 3��&��� ��#��-��0��+�42�.� ��������7&�0 tag �����&���� tag '�+�':7� �������� �# ��������2�&�����>7���� '����5$%&���7& �0

� ��������/��� �# ����0������ �1� 2 '2�� �# '2�� �������� -�# ��0��2� ?����� ��������/��� �# ����0������ �1� 2 '2�� �# '2�� �������� -�# ��0��2� ?���� �>7@ ���'2��3����� -�# 0��2� ?�����>7@ �9��3��&����-�7 ��#��-��0 Slash (/) �&-�&�%#������.+�7&�0

� ��������� (Attribute) – �# �:;'��.�����'����5���-�7 *��� ��� *#� *������'��A���*���������$-&�.� tag �2��= ������ HTML �70�������������3�������7&�0 %#� ����2� (Name = “Value”)

Mr.Warawut Khangkhan ����� 3 *#+�,������'��-�.�*./�� ������ 16

Page 17: พื้นฐานภาษาสำหรับพัฒนาเว็บไซต์

����+����!��� HTML (HTML Elements)

Mr.Warawut Khangkhan ����� 3 *#+�,������'��-�.�*./�� ������ 17

Page 18: พื้นฐานภาษาสำหรับพัฒนาเว็บไซต์

*����� �����,��� HTML<html>

<head>

<title> %#� �#�� </title>

</head></head>

<body>

�&�4�����&�����'7��� ��� *3</body>

</html>

Mr.Warawut Khangkhan ����� 3 *#+�,������'��-�.�*./�� ������ 18

Page 19: พื้นฐานภาษาสำหรับพัฒนาเว็บไซต์

$"1&����� HTML1. ���� ���������������� (Heading)

Mr.Warawut Khangkhan ����� 3 *#+�,������'��-�.�*./�� ������ 19

Page 20: พื้นฐานภาษาสำหรับพัฒนาเว็บไซต์

$"1&����� HTML (Cont.)2. ���� ������������������ (Paragraps)

Mr.Warawut Khangkhan ����� 3 *#+�,������'��-�.�*./�� ������ 20

Page 21: พื้นฐานภาษาสำหรับพัฒนาเว็บไซต์

$"1&����� HTML (Cont.)3. ���� <br> - $%&'��-�.����-�7 �#��&�����9+�����.7$-�2 ��2�2$%2 �����&�02

-�&�$-�2

Mr.Warawut Khangkhan ����� 3 *#+�,������'��-�.�*./�� ������ 21

Page 22: พื้นฐานภาษาสำหรับพัฒนาเว็บไซต์

$"1&����� HTML (Cont.)4. ���� <a> - �1��������$%&'��-�.�'�&����� %#���0��0.� �'�� HTML,

�4���*, '�0� ���#��=

Mr.Warawut Khangkhan ����� 3 *#+�,������'��-�.�*./�� ������ 22

Web Design

Page 23: พื้นฐานภาษาสำหรับพัฒนาเว็บไซต์

$"1&����� HTML (Cont.)5. ���� <frame> - $%&���-�7%#� �'�� HTML ����&�����'7�$���2��

��.���-�#�5�

Mr.Warawut Khangkhan ����� 3 *#+�,������'��-�.�*./�� ������ 23

Page 24: พื้นฐานภาษาสำหรับพัฒนาเว็บไซต์

$"1&����� HTML (Cont.)6. ���� <table> - '��-�.��'�&������� �703�54���2�� �1����� <tr> $%&

���-�7�5�$������������� <td> $%&���-�7 ����$-&�.������ �9���&�4�������3:��0$�'����5 �1�7&�.+��&���� �4���* ���� ���#��=

24

Page 25: พื้นฐานภาษาสำหรับพัฒนาเว็บไซต์

$"1&����� HTML (Cont.)7. ���� ����� ���������� (List) – $� HTML ������7&�0

- Unordered Lists- Ordered Lists- Definition Lists- Definition Lists- Nested Lists

Mr.Warawut Khangkhan ����� 3 *#+�,������'��-�.�*./�� ������ 25

Page 26: พื้นฐานภาษาสำหรับพัฒนาเว็บไซต์

$"1&����� HTML (Cont.)� Unordered List – �4�����2�0 '.C�.��;��'7���2����0���020��� %2�

�4�������9� (�) �1��&� ���'�&�� List ����2�����7.�3�$%&���� <ul> ������-�7��0�������&������0$� List 7&�0���� <li>

Mr.Warawut Khangkhan ����� 3 *#+�,������'��-�.�*./�� ������ 26

Page 27: พื้นฐานภาษาสำหรับพัฒนาเว็บไซต์

$"1&����� HTML (Cont.)� Ordered List – �1� List ��������3.7 ��0����7.� *#���� '��&�4����

���0��&��.� �1����7.� %2� �.+������������ -�#.�7.�-�.�'#��07� �1��&� ���$%&���3���&�0�.� Unordered Lists ��23�$%&���� <ol> �������<ul><ul>

Mr.Warawut Khangkhan ����� 3 *#+�,������'��-�.�*./�� ������ 27

Page 28: พื้นฐานภาษาสำหรับพัฒนาเว็บไซต์

$"1&����� HTML (Cont.)� Definition List – �1� List ��������$%&���-�7���3���.7���� %2�

*3���:��� �1��&� �70$%&���� <dl> �9����2�� �8� 2 '2�� �# '2�������3���.7���� �������-��0�����3���.7���� �703�$%&���� <dt> ��� <dd> ������7.�������7.�

Mr.Warawut Khangkhan ����� 3 *#+�,������'��-�.�*./�� ������ 28

Page 29: พื้นฐานภาษาสำหรับพัฒนาเว็บไซต์

$"1&����� HTML (Cont.)� Nested List – �1��4���������$%& List �&�$� List ���.� *#�

��� '��&�4������-.��&020 -�#���.+������ %2� ��4�-�� �1��&�

29

Page 30: พื้นฐานภาษาสำหรับพัฒนาเว็บไซต์

$"1&����� HTML (Cont.)8. ���� <img> - �1��������$%&'��-�.��'7��4���*$� �'�� HTML

30Mr.Warawut Khangkhan ����� 3 *#+�,������'��-�.�*./�� ������

Page 31: พื้นฐานภาษาสำหรับพัฒนาเว็บไซต์

���� HTML �����!�� ������%1. ���� <form> - �1����������$-& ������� ���������'�&������ *#����.�

�&�4�3��64&$%&

Mr.Warawut Khangkhan ����� 3 *#+�,������'��-�.�*./�� ������ 31

Page 32: พื้นฐานภาษาสำหรับพัฒนาเว็บไซต์

���� HTML �����!�� ������% (Cont.)2. ���� <input> - �1��������$%&'�&���4�����������&�4� �&���0$��������

(���� <form>) �� 6 �4��� 7.���+

� Text

� Password� Password

� Radio

� Checkbox

� Submit

� Reset

Mr.Warawut Khangkhan ����� 3 *#+�,������'��-�.�*./�� ������ 32

Page 33: พื้นฐานภาษาสำหรับพัฒนาเว็บไซต์

���� HTML �����!�� ������% (Cont.)� Text – ���.��;� �1�%2��&����'��-�.�64&$%&*��*��&��������&�������

� Password – �1��4����'��-�.��.��&�4���&�0�.� Text ��23��'7� �1�� Password – �1��4����'��-�.��.��&�4���&�0�.� Text ��23��'7� �1� ��#��-��07�3.� (*) �9+�$-& -�� $%&��;����'�&�� �1�%2��.��&�4� �1��-.'�2��=

Mr.Warawut Khangkhan ����� 3 *#+�,������'��-�.�*./�� ������ 33

Page 34: พื้นฐานภาษาสำหรับพัฒนาเว็บไซต์

���� HTML �����!�� ������% (Cont.)� Radio – �1��4��������.��&�4�������-�7��� �#��&$-&64&$%& �#����$7���

-�9��

� Checkbox – �1��4��������.��&�4����64&$%& �#��&�4�7&�����2� 1 ��0���

Mr.Warawut Khangkhan ����� 3 *#+�,������'��-�.�*./�� ������ 34

Page 35: พื้นฐานภาษาสำหรับพัฒนาเว็บไซต์

���� HTML �����!�� ������% (Cont.)� Submit – �1��4��������.��&�4��.+�-�7$�������� �70�������

����� ���3�'�&���:D�$-& � $%& �#��&����'2��&�4���

� Reset – �1��4��������.��&�4��.+�-�7$�������� �70������� ����� ���3�'�&���:D�$-& � $%& �#��&�������&�4���+�

Mr.Warawut Khangkhan ����� 3 *#+�,������'��-�.�*./�� ������ 35

Page 36: พื้นฐานภาษาสำหรับพัฒนาเว็บไซต์

���� HTML �����!�� ������% (Cont.)3. ���� <select> - �1��������$%&'�&���4�����������&�4� �&� �������0��� �#�

-��0��0��� �70���.��;� �1� ��4��� Drop-Down %2�0$-&���-0.7*#+��������'7�6���3��*��������� ����� ���

Mr.Warawut Khangkhan ����� 3 *#+�,������'��-�.�*./�� ������ 36

Page 37: พื้นฐานภาษาสำหรับพัฒนาเว็บไซต์

���� HTML �����!�� ������% (Cont.)4. ���� <textarea> - �1��������$%&'�&���4�����������&�4� �&� ����&����

���A���0-�#����������&�4��2��= ����&����$-&64&$%&�8� �&���

Mr.Warawut Khangkhan ����� 3 *#+�,������'��-�.�*./�� ������ 37

Page 38: พื้นฐานภาษาสำหรับพัฒนาเว็บไซต์

XHTML� 02��3�� eXtensible HyperText Markup Language

� �1�������� ��73�����6�������'����5$���������������� HTML ���XML �.�'���%��62�� ����� ���7&�:��.� �70$%&*#+�,������'�&�� syntax ��XML ���$%&�4�������� HTMLXML ���$%&�4�������� HTML

Mr.Warawut Khangkhan ����� 3 *#+�,������'��-�.�*./�� ������ 38

Page 39: พื้นฐานภาษาสำหรับพัฒนาเว็บไซต์

Mr.Warawut Khangkhan ����� 3 *#+�,������'��-�.�*./�� ������ 39

Page 40: พื้นฐานภาษาสำหรับพัฒนาเว็บไซต์

�2���3�$"1&�������(),��� XHTML1. ��������E DOCTYPE

2. ��������E Namespace

3. ��������E%��7 “Encoding”

Mr.Warawut Khangkhan ����� 3 *#+�,������'��-�.�*./�� ������ 40

�4������� ��0� -�#� HTML ��23� *����4���� ������-�7 �#�������� �������������

Page 41: พื้นฐานภาษาสำหรับพัฒนาเว็บไซต์

1. ���+����4 DOCTYPE� �1����-�.� �#� �����&� ��0����'.�� XHTML ���3��&������E�������-�2���':7�� �'�� XHTML *#���$-& ��� ����� ��������2� *3'�&���9+�7&�0������ �1� XHTML ���%.�$7

Mr.Warawut Khangkhan ����� 3 *#+�,������'��-�.�*./�� ������ 41

Page 42: พื้นฐานภาษาสำหรับพัฒนาเว็บไซต์

2. ���+����4 Namespace� �1���0%#������������������2��= ���042$� �'�� XHTML �9��3�'.�*.�A��.�������:�&$� �'�� DTD '��-�.���������E Namespace $� XHTML '����5&��62����� URL

Mr.Warawut Khangkhan ����� 3 *#+�,������'��-�.�*./�� ������ 42

Page 43: พื้นฐานภาษาสำหรับพัฒนาเว็บไซต์

3. ���+����4 “Encoding”� %2�0$-& ��� ����� �������2��.�.��������2������7&54��&�����9+� �70$�����

XHTML 3�����������E Encoding �&$����� <meta> �9�����-�7�2�$����������� “http-equiv” �1� “Content-Type” ������:�4��������&�������-�7$����������� “content”�&�������-�7$����������� “content”

Mr.Warawut Khangkhan ����� 3 *#+�,������'��-�.�*./�� ������ 43

Page 44: พื้นฐานภาษาสำหรับพัฒนาเว็บไซต์

�2�����()����#� XHTML1. �&������E DOCTYPE �1��.�.���*��*�$-C2 '� �70�&������E�&���

����-�2���':7��-�&� �'�� HTML

2. %#��������'.����������������&� �1�.����.�*��*� ��� �2��.+� %2� <html>, <p> �1��&�<p> �1��&�

3. �&����-�7�2�$-&�.�������������������E�9+��� '� $���;�����2�&�������-�7�2�$7= $-&$'2%#��������������.+���� *#�$-&�����$%&����2���.��������'.����� ��0�$%&�����������.+�7&

4. �2�������-�7$-&�.������������&�$'2 ��#��-��0 ‘ ’ -�# “ ” '�

5. �:��������'.���&��������>7���-�.� %2� <p> … </p> �1��&�

Mr.Warawut Khangkhan ����� 3 *#+�,������'��-�.�*./�� ������ 44

Page 45: พื้นฐานภาษาสำหรับพัฒนาเว็บไซต์

�2�����()����#� XHTML (Cont.)6. �����2���&��>7����7&�0��� �&�%2��2����&����7&�0 ��#��-��0 Slash (/)

%2� <br /> �1��&�

7. �2$-&$'2 ��#��-��0 “Double Dashes (--)” ��0$��&����-��0 -�:�� �'�� XHTML ��;����&����$'2$-& ���%2��2�� ��#��-��0 (- -) -�#�� �'�� XHTML ��;����&����$'2$-& ���%2��2�� ��#��-��0 (- -) -�#$%& ��#��-��0 �2��.� (=) ���

8. ���-�7$-&$'2'.C�.��;� “&lt;” ��� “&gt;” ������$%& ��#��-��0 < ��� > ������7.�

Mr.Warawut Khangkhan ����� 3 *#+�,������'��-�.�*./�� ������ 45

Page 46: พื้นฐานภาษาสำหรับพัฒนาเว็บไซต์

����)-�������() XHTML

Mr.Warawut Khangkhan ����� 3 *#+�,������'��-�.�*./�� ������ 46

Page 47: พื้นฐานภาษาสำหรับพัฒนาเว็บไซต์

5���$6������� XHTML ! Browser

Mr.Warawut Khangkhan ����� 3 *#+�,������'��-�.�*./�� ������ 47

Page 48: พื้นฐานภาษาสำหรับพัฒนาเว็บไซต์

DOM & JavaScript� DOM 02��3�� Document Object Model

� �1��*�������������'#�������-�2����������.�'�������2��= '����5 �&�59������.���:� Content ����'�&���2��= $� �'�� XHTML (HTML) 7&

� DOM 3������������� ��� *3�.+�-�7 �1��� 3���� ������������������ DOM 3������������� ��� *3�.+�-�7 �1��� 3���� �����������������-�.� Object Oriented ��� Model

� DOM 3��� element -�# tag �2��= �1� Node ���&��& �70����'�&�� DOM 3�������7&�0 object ��� method

Mr.Warawut Khangkhan ����� 3 *#+�,������'��-�.�*./�� ������ 48

Page 49: พื้นฐานภาษาสำหรับพัฒนาเว็บไซต์

DOM & JavaScript (Cont.)� JavaScript ������6��&�4���� !"���64&$%& (Client) ��2��0.���$%& *#� *��� �������'����5 �70 ��0� !"�042$��������#��= �9���!33:�.������$%& JavaScript ��� !"�042$� web browser -��0�4���� %2� *#�'�&�� �#+-���� ����0����� '���0$� ��� *3 *#����3'�����54��&����&�4����64&$%&����2���� �&����� ��0$� ��� *3 *#����3'�����54��&����&�4����64&$%&����2���� �&����� �1��&�

� �������������.����$%& JavaScript Engine *#� ��0�$%&�������'�&�� %���.�5:���������-�#��*�� �%.���.+�=

Mr.Warawut Khangkhan ����� 3 *#+�,������'��-�.�*./�� ������ 49

Page 50: พื้นฐานภาษาสำหรับพัฒนาเว็บไซต์

����)-��*� �����#� DOM & JavaScript

Mr.Warawut Khangkhan ����� 3 *#+�,������'��-�.�*./�� ������ 50

Page 51: พื้นฐานภาษาสำหรับพัฒนาเว็บไซต์

DOM & JavaScript (Cont.)� CSS – Cascading Style Sheet

� CSS �# �1� ������0���������$%&���-�7�4������ �'��-�# ��� *3

� -�.������ Style Sheet �# ����0�'��� (Style) �9�� �1����3.7�4����$� �'���� �#+-� (Content) ���3��'7��� ��� *3 ���$-&�&������� �1����� �'���� �#+-� (Content) ���3��'7��� ��� *3 ���$-&�&������� �1��������'.����'���%#�254��������'7�6�7&�0 ��23�$%& �1��.����-�7�4����$-&�.� �#+-��� ��� *3���� 5&��������&��4����-�#'���%�����'2��$7��3���6��.� ��� *3���&����'���%��$�'2���.+�

Mr.Warawut Khangkhan ����� 3 *#+�,������'��-�.�*./�� ������ 51

Page 52: พื้นฐานภาษาสำหรับพัฒนาเว็บไซต์

��������������� ���7(�� �# �&����-�7�4�����2��= $-&�.����'.�� HTML -�# XHTML ����&���� �703������E�0�'2���� �#+-��� ��� *3 -�#�&$�'2�� 7�0��.���7& -�#'�&�����'���%�� (.css) ��&�&��59����'���%���.+�

� ������-�7���%���3���-�73��%#����� HTML �70��� -�#���-�7 �1�%#�� ������-�7���%���3���-�73��%#����� HTML �70��� -�#���-�7 �1�%#����' -�# id �9��3�'2�6�$-&���� HTML �����%#�����.����' -�# id $�'���%�����4�������������-�7�&$�'2����'���%��

Mr.Warawut Khangkhan ����� 3 *#+�,������'��-�.�*./�� ������ 52

Page 53: พื้นฐานภาษาสำหรับพัฒนาเว็บไซต์

��������������� ���7(� (Cont.)

Mr.Warawut Khangkhan ����� 3 *#+�,������'��-�.�*./�� ������ 53

Page 54: พื้นฐานภาษาสำหรับพัฒนาเว็บไซต์

Mr.Warawut Khangkhan ����� 3 *#+�,������'��-�.�*./�� ������ 54

Page 55: พื้นฐานภาษาสำหรับพัฒนาเว็บไซต์

������������������"#!$���! (Server-Side

Scripting)� ����������.+�-�73� ��7�9+���� ��#�� ����� ������'����5'�&�� ��� *3����������'���.�64&$%&7& (Dynamic) �9��042$��4���� ����**�� �%.�� (Web Application) ���$%&�.�02���*�2-��0$��!33:�.� %2� �����0������(E-Commence) ��������0����.C%����� (Online Banking) (E-Commence) ��������0����.C%����� (Online Banking) ��0����2�� *0���;����E -�# Search Engine �1��&�

� ����'��������������������042��� !"� ����� ��� ��7.���+

� PHP

� ASP, ASP.NET

� JSP

� Ruby On Rails (ROR)

Mr.Warawut Khangkhan ����� 3 *#+�,������'��-�.�*./�� ������ 55

Page 56: พื้นฐานภาษาสำหรับพัฒนาเว็บไซต์

PHP� 02��3�� Hypertext Preprocessor

� 7&�.����*./����������� *#�'�&�� �'����� HTML 39����$-&��� ��0����'.�� PHP �&��E.0��� !��.�042$����'.�� HTML ��0$�& ��#��-��0<?php … ?> -�# <? … ?> *#����$-&���'�&�� �'����� Dynamic <?php … ?> -�# <? … ?> *#����$-&���'�&�� �'����� Dynamic HTML �1��02��'�7�� ��������'��A���*����9+�

� $%&��� ��� *3���3�� �1��&�'�&�������'���.�64&$%&

� -����.������� ��� ��� ������7 ���$����*�;�%0�� ��������'� ��� ����**�� �%.�� *#�$%&�����0$������

Mr.Warawut Khangkhan ����� 3 *#+�,������'��-�.�*./�� ������ 56

Page 57: พื้นฐานภาษาสำหรับพัฒนาเว็บไซต์

��������-��� PHP� $%&7&���

� �1����������������� !"� ����� ���

� ��0��4&�2�0 �#��3�� PHP !� �&��$� HTML ���$%&����'�&�� Syntax �����2�0=�����2�0=

� '����5������7& �����������'��A���*

� $%&�2���.� XML 7&�.���� $%&�.�������8��&�4�7&

� $%&�.��&�4��.�.���7&02�������'��A���*

� $%&�.�����'�&���&�4�7&��� Scalar, Array, Associative Array

Mr.Warawut Khangkhan ����� 3 *#+�,������'��-�.�*./�� ������ 57

Page 58: พื้นฐานภาษาสำหรับพัฒนาเว็บไซต์

��������-��� PHP (Cont.)� $%&�.����������6���*7&

� '����5������7&$������F��.���������2��%��7�.� %2� Unix, Windows -�#Mas OS

� '�.�'�:������������� %���.�5: (Object-Oriented)� '�.�'�:������������� %���.�5: (Object-Oriented)

� ������7&$� ��� ����� ���-��0%��7 %2� Personal Web Server (PWS), Apache, Tomcat, OmniHttpd ��� Internet

Information Service (IIS)

Mr.Warawut Khangkhan ����� 3 *#+�,������'��-�.�*./�� ������ 58

Page 59: พื้นฐานภาษาสำหรับพัฒนาเว็บไซต์

��������-��� PHP (Cont.)� '����5�������2���.�����3.7���,���&�4����-���-��0 %2� Oracle,

FilePro, MS SQL, mSQL ��� MySQL �1��&�

� �:C��$-&64&'�&�� ���������������62���������%��7�2��= 7& %2� LDAP, IMAP, POP3 ��� HTTP �1��&�IMAP, POP3 ��� HTTP �1��&�

Mr.Warawut Khangkhan ����� 3 *#+�,������'��-�.�*./�� ������ 59

Page 60: พื้นฐานภาษาสำหรับพัฒนาเว็บไซต์

�������������� PHP

Mr.Warawut Khangkhan ����� 3 *#+�,������'��-�.�*./�� ������ 60

Page 61: พื้นฐานภาษาสำหรับพัฒนาเว็บไซต์

����+����!���*� �*+����% PHP1. HTML �1��������$%&$����'�&�� ��� *3 ���.��;� �1� Static

Language -��059� �&�4���0$� ��� *33��2����� ����0�����$7=

2. ���� PHP � Short Style �4������+3�$%&������������ SGML (Standard � Short Style �4������+3�$%&������������ SGML (Standard

Markup Language)<? echo “���� PHP � Short Style”; ?>

� XML Style �1��4�������$%&�.����� XML (eXtensible

Markup Language)<?php echo “���� PHP � XML Style”; ?>

Mr.Warawut Khangkhan ����� 3 *#+�,������'��-�.�*./�� ������ 61

Page 62: พื้นฐานภาษาสำหรับพัฒนาเว็บไซต์

����+����!���*� �*+����% PHP (Cont.)2. ���� PHP (�2)

� SCRIPT Style �4�������$%&�.����� HTML �70������:�����$����'.�� -�#��.����$%& JavaScript ��� VBScript

<SCRIPT LANGUAGE=‘php’><SCRIPT LANGUAGE=‘php’>echo “���� PHP � SCRIPT Style”;

</SCRIPT>

� ASP Style �1��4�������$%&�.����� ASP (Active Server Pages)<% echo “���� PHP � ASP Style”; %>

Mr.Warawut Khangkhan ����� 3 *#+�,������'��-�.�*./�� ������ 62

Page 63: พื้นฐานภาษาสำหรับพัฒนาเว็บไซต์

����+����!���*� �*+����% PHP (Cont.)3. PHP Statement 3��&�042��0$�&��� �>7����>7���� ����>7�&�0���'.��

7&�0 ��#��-��0 Semicolon ( ; ) %2�echo “PHP Statement”;

4. Whitespace �1��.�.���-�#���'.��������2 -�� ��2���$-& ��7%2��2��-�#4. Whitespace �1��.�.���-�#���'.��������2 -�� ��2���$-& ��7%2��2��-�#����9+�����.7$-�2 �9�������7&�0 Carriage Return (�9+�����.7$-�2), Space ��� Tabs �9������ PHP ��� HTML 3��2'�$3Whitespaceecho “PHP Statement”;echo “PHP Statement”;���echo “PHP Statement”; echo “PHP Statement”;

Mr.Warawut Khangkhan ����� 3 *#+�,������'��-�.�*./�� ������ 63

Page 64: พื้นฐานภาษาสำหรับพัฒนาเว็บไซต์

����+����!���*� �*+����% PHP (Cont.)5. -��0 -�: (Comments) �# '2�����$%&'��-�.�A���0��0�� �07��

������� �9��$����� PHP 3�$%&'.C�.��;� /* … */ ��;������-��0����.7 ���'.C�.��;� // ��;����������.7 7�0�echo “PHP Statement”; // ��������� PHP Statementecho “PHP Statement”; // ��������� PHP Statement/* ��������� ������� ������������� !����" */echo “�"�����# (Comments)”;

Mr.Warawut Khangkhan ����� 3 *#+�,������'��-�.�*./�� ������ 64

Page 65: พื้นฐานภาษาสำหรับพัฒนาเว็บไซต์

Mr.Warawut Khangkhan ����� 3 *#+�,������'��-�.�*./�� ������ 65

-- File form.html --

Page 66: พื้นฐานภาษาสำหรับพัฒนาเว็บไซต์

Mr.Warawut Khangkhan ����� 3 *#+�,������'��-�.�*./�� ������ 66

-- File simple.php --

Page 67: พื้นฐานภาษาสำหรับพัฒนาเว็บไซต์

Mr.Warawut Khangkhan ����� 3 *#+�,������'��-�.�*./�� ������ 67

Page 68: พื้นฐานภาษาสำหรับพัฒนาเว็บไซต์

ASP, ASP.NET� ASP 02��3�� Active Server Pages

� ASP �# ������0����$%&*./�� ����**�� �%.�����*./���9+��70����.���������� �4������ �'�� ASP 3������� ASP ����.�042��0$�& ��#��-��0

<% … %><% … %>

� ASP 7&54�*./�� �1� ASP.NET

� ASP.NET ��� � ������0� .NET Framework �&���$%& ��� ��� *3���*./��7&�0 ASP.NET 3�3.7 ���042$�������'�:� .aspx ����.+���� �ASP.NET Server Control (��:2����������042 !"� ����� ���) ��$%&���element ���'�&���9+�3������ HTML �#��3��'����5373���2�������-�7$-&�.���������� ��7�9+��2�-�&���+ ���'����5��'���2 -�:���;��2��= ��� ��7�9+�7&02�������'��A���*

Mr.Warawut Khangkhan ����� 3 *#+�,������'��-�.�*./�� ������ 68

Page 69: พื้นฐานภาษาสำหรับพัฒนาเว็บไซต์

ASPASP

ASP.NETASP.NET

Mr.Warawut Khangkhan ����� 3 *#+�,������'��-�.�*./�� ������ 69

Page 70: พื้นฐานภาษาสำหรับพัฒนาเว็บไซต์

JSP� JSP 02��3�� Java Server Pages

� �1�����'������ !"� ����� ���

� JSP ����.�042��0$�& ��#��-��0 <% … %>

� �E.0����'�&�������� JAVA� �E.0����'�&�������� JAVA

� JSP 3������'�:� �1� .jsp

Mr.Warawut Khangkhan ����� 3 *#+�,������'��-�.�*./�� ������ 70

Page 71: พื้นฐานภาษาสำหรับพัฒนาเว็บไซต์

���%��%��8��� JSP1. JSP 7&'#��7�:;'��.���� Java ��02�� ������ 39�'����5������7&$��:�

�*������ �2�2�3� �1� Windows, Linux -�# Mac OS

2. $%&��� Java API 7&-���-��0 �9�� Java API �# ��:2������'���%2�0����0����'�7��$����$%&��� �2�2�3� �1������7�2,���&�4� -�#����.�'2�����0����'�7��$����$%&��� �2�2�3� �1������7�2,���&�4� -�#����.�'2�� ��� �1��&�

3. ������* ���� (Component) ��.���$%&7&�� �2�&� '�0 ���'�&��$-�2 7.��.+�39��2�&� '�0 ��� ��0�'������$-�2 *#���������.+��2� 39�%2�0$-&�.�*./��'����5'�&��'����6����7& ����9+�

Mr.Warawut Khangkhan ����� 3 *#+�,������'��-�.�*./�� ������ 71

Page 72: พื้นฐานภาษาสำหรับพัฒนาเว็บไซต์

���%��%��8��� JSP (Cont.)4. ������0#7-0:2�$����$%&��� �# '����5���-�7����$-�2�9+���$%&���7& ����.+�0.�

'����5����$%&����2���.� XML 7&02��7�

5. JSP ������3.7����&*�7*��7�2��= �2�2�3� �1��&6�7*��7��� ��7�9+���-�2����� ��0��������-�#�&6�7*��7��� ��7�9+���-�2������7'�������� �&��'����5 ��0��������-�#�&6�7*��7��� ��7�9+���-�2������7'�������� �&��'����5���3'��&6�7*��77&�.���������3:7 ���.+���������7�.0'4�

Mr.Warawut Khangkhan ����� 3 *#+�,������'��-�.�*./�� ������ 72

Page 73: พื้นฐานภาษาสำหรับพัฒนาเว็บไซต์

Mr.Warawut Khangkhan ����� 3 *#+�,������'��-�.�*./�� ������ 73

Page 74: พื้นฐานภาษาสำหรับพัฒนาเว็บไซต์

Ruby On Rails (ROR)� �# ����**�� �%.�� ��� ����� (Web Application Framework)

� Ruby 3�%2�0$-&�**�� �%.�����'�&����9+�'����5������7&� Rails 3�%2�0$�����.+��2�������-�7�2�����������2��= ��0$��**�� �%.��� ROR 3����$-&���*./�� �������$%&��� ������74���.��� ����**�� �%.���2�0� ROR 3����$-&���*./�� �������$%&��� ������74���.��� ����**�� �%.���2�0�9+�

� '5��!�0������ Rails 3�$%&����'�&��������������Model-View-Controller (MVC)� M – �1��.� ���'5��� (Status)

� V – �1�'2�����$%&'�&�� User Interface

� C - �1��.�3.7����.��**�� �%.��

Mr.Warawut Khangkhan ����� 3 *#+�,������'��-�.�*./�� ������ 74

Page 75: พื้นฐานภาษาสำหรับพัฒนาเว็บไซต์

�8�+/�)���%���������� MVC

Mr.Warawut Khangkhan ����� 3 *#+�,������'��-�.�*./�� ������ 75

Page 76: พื้นฐานภาษาสำหรับพัฒนาเว็บไซต์

Mr.Warawut Khangkhan ����� 3 *#+�,������'��-�.�*./�� ������ 76

Page 77: พื้นฐานภาษาสำหรับพัฒนาเว็บไซต์

Mr.Warawut Khangkhan ����� 3 *#+�,������'��-�.�*./�� ������ 77

Page 78: พื้นฐานภาษาสำหรับพัฒนาเว็บไซต์

Mr.Warawut Khangkhan ����� 3 *#+�,������'��-�.�*./�� ������ 78

Page 79: พื้นฐานภาษาสำหรับพัฒนาเว็บไซต์

�����������%&'('�������" !�����������%&'('�������" !

� XML

� WML

� WML Script

Mr.Warawut Khangkhan ����� 3 *#+�,������'��-�.�*./�� ������ 79

Page 80: พื้นฐานภาษาสำหรับพัฒนาเว็บไซต์

XML� 02��3�� eXtensible Markup Language

� �1���������,�����54�*./���9+��70����� W3C

� $%&��� ����0��&�4����� ��� ��� -�#��.� HTML ��2������'����5 -�#��2�HTML ������'����5'�&�� �'���&�4�$-&������'�&����� �1�����,�� ���0.���HTML ������'����5'�&�� �'���&�4�$-&������'�&����� �1�����,�� ���0.���'2�����$%&A���0�&�4�$� �'�� ��0��2� “DTD (Document Type Definition)” ���$-&'����5'2���� XML �������6��.���*�� ����:�%��7������.���� �'���� XML Parser 7&

� XML 0#7-0:2�$�����.7���� ������ *#�$-&$%&����&���*������7& %2� 5&��&����'�&�� ������$-&74�.���*�� ���7&�&�E9������� HTML 5&��&����'�&�� ������$-&747&���#5#�&�E9������� WML

Mr.Warawut Khangkhan ����� 3 *#+�,������'��-�.�*./�� ������ 80

Page 81: พื้นฐานภาษาสำหรับพัฒนาเว็บไซต์

WML� ���.��;���&�0�.����� HTML

� WML 3���042�.��&3���.7*#+�,�������� XML

� WML ���&3���.7$�7&���I �;J������������2�� �# -&�����&6�7*��7$� �#�����0���;� �#�����0���;�

� WML ���#5#3� ��0��2� ? ��� *3@ (Web Pages) $���2��-�&�3� ��0��2� ?����7@ (Card) ���3�����-��0= ����7���'2���0.��#5#3� ��0��2� ?'���.�@ (Deck)

Mr.Warawut Khangkhan ����� 3 *#+�,������'��-�.�*./�� ������ 81

Page 82: พื้นฐานภาษาสำหรับพัฒนาเว็บไซต์

WML Script� �1��������54��������*./���9+�$-&���.��;������������� JavaScript

� WML Script ��������� Server-Side �703�54�����$-&�&�4�042$��4������ binary �2� ��&�39�'2���.�$-& client

Mr.Warawut Khangkhan ����� 3 *#+�,������'��-�.�*./�� ������ 82

Page 83: พื้นฐานภาษาสำหรับพัฒนาเว็บไซต์

Mr.Warawut Khangkhan ����� 1 �����4& �#+��&� ���0��.��<� *3 ��� *3 ��� ������ 83

Page 84: พื้นฐานภาษาสำหรับพัฒนาเว็บไซต์

Web SiteWeb Site� ��� �E�� �������%.0. (2554). ��� ��!������� ����� ����������

$�%����&'��. '#��&� �#� 7 �.�0�0�, 2554, 3��http://dit.dru.ac.th/home/004/tachakorn/WEBDE/Chapter3.pdfapter3.pdf

� Thai WBI, Website. (2554). ���$�%�� Homepage ��)�*�HTML. '#��&� �#� 27 *ME3���0�, 2554, 3�� http://www.thaiwbi.com/course/html/index2.html

Mr.Warawut Khangkhan ����� 1 �����4& �#+��&� ���0��.��<� *3 ��� *3 ��� ������ 84

Page 85: พื้นฐานภาษาสำหรับพัฒนาเว็บไซต์

BookBook� %����� ��0�'�. (2554). ��� !����"���+,�����. ��:� �*N : -&��-:&�'2��3���.7 �� ��7� �� � ���*��+���.

Mr.Warawut Khangkhan ����� 1 �����4& �#+��&� ���0��.��<� *3 ��� *3 ��� ������ 85