Modul Pemrograman Web I

50
MODUL MATA KULIAH PEMROGRAMAN WEB I STMIK ASIA MALANG

Transcript of Modul Pemrograman Web I

Page 1: Modul Pemrograman Web I

MODUL

MATA KULIAH

PEMROGRAMAN WEB I

STMIK ASIA MALANG

Page 2: Modul Pemrograman Web I

����������i�

� �

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

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

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

���������������!��"�#��������������� �����$ ��%�����#���������&'�%����$�

������ ���������� �������� ��������� ���� #������� ������� ����$� �����

�� ������������������������#����������� ����������������%��������$��

� ��������� (�������� ������ ���� ��%����)����������� ��� � ������� ��� � � ���

��� ������� �������������������������������%�����������������������������

���������������� ���������� #���� ��� �������������*��$������������%�������

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

�������� ������� �� ����� ��������� ����� ���� �� ����� ���� �� &'�%�����

�������������������� �������������������%���� ���(�������*����

�������� ������ ���� ����������� ��������� �!�� #�!�� +� ����������

������������$� �������� ������� ����� �������� ��������� ,���� ������� ��������� �����

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

#-��������������������$������������������������������� ����� ����������� ��

�� ��� ����� ������������ �� ��������� ����� �������� �"� #��������� �����

�����$��

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

�� ����� �.%�����%�� ���� �� ��� ���� �������� ���� ������� �� � �����

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

��

� ���������

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

� #(��������������������$�

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

Page 3: Modul Pemrograman Web I

����������ii�

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

� ���(����. ����������� ���������������������������������������������������������������������� /�� '���������������� ���������������������������������������������������������������������������� /�

� -��0�������������������� ���������������������������������������������������������������� /�� (����������������������������#(����,�$ ��������������������������������������� /�

� � .�����.��������� �������� �������������������������������������������������������� /�� � .����������)���������� ������������� ������������������������������� 1�

� � .����������(���.,��2������������������������������������������������������������ 1�

� � .����������������������������������������������������������������������� 1�� 3�����������������'��������3�4�5 ���������������������������������������������������� 6�

� � .�������'�� ������������������������������������������������������������������������������� 6�� � .�����'�������������������������������������������������������������������������������� 6�

� � .������'�� ������������������������������������������������������������������������������� 6�� � .�� �����'�� �������������������������������������������������������������������������� 7�

� � .�0� ����'������ �������������������������������������������������������������������� 7�� 8������������������������������������������������������������������������������������������ 7�

� � .�-���������������������������������������������������������������������� 7�

� � .����������������������������������������������������������������������������������� 7�� � .�����%��3��� ����������������������������������������������������������������������� 7�

� � .������������������9����������� �� ������� ���������������������������� :���������� ���� �����!�"#���������������������������������������������������������������������$�

� ����� ������ ��������������������������������������������������������������������������������� 4�� '�����������(������!��" ����������������������������������������������������������������� 4�

� -��'�����'� ��!��" ������������������������������������������������������������������������� ;�� � .�����������(������!��"����������������������������������������������������� ;�

����������%��&�������#�'����������������������������������������������������������������������(�

� �������������9����� ������������������������������������������������������������������� <�� '��"���<�

� -������������������������������������������������������������������������������������������������� /5������)���*+�"� �������������������������������������������������������������������������������������,�

����)���*-+" ����������������������������������������������������������������������������������������$�� ���8��� ������������������������������������������������������������������������������������������ /4�

����)����"��������� �������.���"/ �������������������������������������������������0�� ���������� ��������������������������������������������������������������������������������� /=�

� � .�����'������������������������������������������������������������������������������ /=�

� � .�������'�� ��������������������������������������������������������������������������� /=�� � .������'�� ����������������������������������������������������������������������������� /=�

� � .�(�%����������'����������������������������������������������������������������� /=�� � .�������9��������������������������������������������������������������������������� /=�

� � .���%����� ������������������������������������������������������������������� /=�� � .����������������%��� ������������������������������������������������������������� /=�

� '����������)����� ���!��" �������������������������������������������������������� /=�� -������������������������������ ������������������������������������������� /<�

����)�����)�����1 �������������������������������������������������������������������������������,2�

�� (����. �����&'��%���������������������������������������������������������������������� 16�'� �����(�������������������������������������������������������������������������������������� 17�

����)������ ���� ���������������������������������������������������������������������������,3�� ����� ������ ������������������������������������������������������������������������������� 1;�

� � .�������������������������������������������������������������������������������� 1;�

� '��>�����?������ ��������������������������������������������������������������������������� 1=������/�������'�� ��&����"����4��'��������������������������������������������,(�

(����������

Page 4: Modul Pemrograman Web I

����������iii�

� ���>��������*�� ������������������������������������������������������������������������������ 1<�

� '������������(�������� �����%%���������������������������������������������������� 1<�� -�����������>�����8���� ���%�������� ������������������������������������� 6/�

����/�����14� ��������1���� ����������*������������������������������22�� ��������(��� ���������������������������������������������������������������������������������� 66�

� '��,� ����(��� �������������������������������������������������������������������������������� 6:�����/����"�����14�� �������"��&4��)���&�5����������������������������20�

� ������������(��� �������������������������������������������������������������������������� 6=�

� '����������>�������������������������������������������������������������������������� 6<�

Page 5: Modul Pemrograman Web I

Sekolah Tinggi Manajemen Informatika & Komputer

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

��������� �������������������������������� � � � �������������������������� ���������1�

email : [email protected], blog : http://tit4ni4.wordpress.com

BAB I

INTERNET DAN SEARCH ENGINE �

�� ���+ ���+�����+����

������� ����� 2��� � ����� �������� ������ ��������� ���� ��������� �� �������� ��� �

������ ���� ��������� �������� �-� ������� ��������� ������ �� ���������.���������� ���� ����������������.����������������

8������������������� ������� ������������������� ����������������������������������������������������� ��� ����������������� ������ ������������������ �������

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

�� ��6�+�!�����+����

�� �� ������� ������� ��������� ������� ��������� ���� ������� ����� (������������������ �������� �������� �� ����� /<4< � �������� ������� �?��� ���� ������� �?��23��

#� *�%� � ?�����%�� �����%�� ���%�� 2������$ � �� ���� ������� �� ��������������������� ������� ����� ���������������������������������,2�@ ������������������������������ ����� ������ ���� �� ��� ��������� �������� ������� �������� ������� �?��23��

����%��� ������ ������ � ���� ��� � ��������� ������ ��������� ����� ��� ���� � ��

�������� ������ ��� ��� ���� ������� ������� ���� �� %����� ������ ��������� �������������������������� ���������������-�)���#�����������-�����������%��)������������%��$��

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

(��������� ��������� �������� �������� #,�� (��������� ��� (�����$� �������� �������

������� ��������� ���� ��������� ���� ����������� ��������� �� �����. ������ *���������� ��������� �������� ����� ����� �� ������� ������ �� ����� ����� ���� ����� ����

����������������� ������������������ �������� ������� ��� ���%�������� �� ������� �?��23�� ����� ����������� 6� ������ ����� ������ ������ � ?�����%��

�������� � ,�*������� ��� -�������� � ����� '������ � ,�*������� ��� ,��� � �� ���� ��������������������������������� �� �������/<4< � ����%����������?��23�� �����������

�� �� ����� >������� /<;1�� �� ��� ����� ���� ��� ������� ��� ���������� ������ �� �������� ����� � �� ������ ��*�������� �� ������ ��������� ���� �������� � �������� ���������?��23���������������������������

>���������������?��23�� ���%������� �� �� �������A��"23�A����������������������� ��A�?��23�A������������������%������������������.��������������� ���*�������.��*���������9������ �� ��� ������� �������� ������ ���� ���� (�?��� ������ � ���� ���� ���

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

7� 6������-�������������+����• �5� �1�� ������� ������ ��� ��������� ��������� ������� ������� �� �� ����

�������(����,�����������%�������������������� �����������������������������• �����&������ '����� ���� �� � ���� ������ ����� � � ���� ��%������ ������ ��

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

• � �#� ���8������ ��5��4&���&���#��+���������� ���� �������������������� �������������������������'������� �������� �����(�"���(�"��������������������� ���������� ���������� ����(��%��������������#(��$���������������

��������� ���������%������������8����������(�"���%���������������������������

������������ ���(2 � ����������� ���������%����������� ���������������*� ����• %�+�� � %�����5� ���'�� +���� ���.���� 9.�� !���1����:�+� ������ ����� ��� ���

���������� ��������� #�������$�� (��� ����� ���� ��������� �� � 9�?�� ���������

��������� ����� ��%�������� ���� ����� ��%����� //:� ����� �� � ���� ����������������������������� �������������������������� ��������� ����

� "�"�������"���%����������+����9 ��#���:��� �5� �5������� 1��54'���

�� �� ������ �� ��� ������ ���� ����������������������� �������� ��� �������� B���

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

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

Page 6: Modul Pemrograman Web I

Sekolah Tinggi Manajemen Informatika & Komputer

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

��������� �������������������������������� � � � �������������������������� ���������2�

email : [email protected], blog : http://tit4ni4.wordpress.com

�B��� ���������� ���� ������������������� ������������������ ����������������� ��

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

���� ��� ���������� �������� ���� �� ���� ������� ���� ����� �������� ���������������� ,���� ��������� ����� ����� ��������� ��������� ������ ������� ���������� ���

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

,� "������55;"����4'����"��������1�����

- -��%������� ������������� �-��%��-���������� �(������-��%���%��"�������

- -��%���������+���.������������������ ������������ �������������������������- -��%�������������������������)���������� ����� ���������������- ����������(�C�� ���%������� ��D������������%������������������

- -��%���������2�E������������������������ ����

- ������������%������� ���� ������ ������� ��������- -��%�����������<��������������������� ���F�����+�-�����%������

����#->�/$G��- -��%�����������<��

- -��%���������*�����

- ����������������� ����� �������� � ����%����-��%���&� ���������- >.����� ��������� ������������#���������������$� ��%��������������!�� ��

�?������������������������ �� ���������- -��%���������"������=�>� �����������������������������������

- -��%���������-'��- -��%���������75�����

2� �����#���� ��# ������?-+���%�- -��%����� �������������� ����������������� �-��%�� �5 �1������'����

- (������-��%���%��"�'������7���������

- �����������%�� �5 41������'����� ������������81�������=���������14���8�4� ���� ��5��+� #�����+� 3-� ������$� �� %��%�� ������� 7��=�4��>� ���������������������� �������������*����������������������E��������� � �����������������-�58��������������1�����

- -��%���&�7�������� ��-��%���������������������������������������������- -��%�� ������� ��.������ ����� �������� ������������ ����� ��������� �����

����������������� �������� ���-��%���������-'��- -��%���������-'� ��-��%�����������<��

- ��''���'��������������������5�1����� �����������������������������������

����%��������������������55: Area code: Telephone number:

����������������@2A�������������������������@0@(0((((�������������������������������� ������

���������������������7�4��8������������������ ������#41$�

- -��%�����������<�- -��%���������*����������������������� ���(���.,��2���������

�A� "��%!����%�����-"����+�������9����+������+)�7���+-)� �+:�#�?���

��# ������%���+�� ������������������ � ����� ���������� ���� ���� ����� ������ ��� �������� ��������� ��������������� �������� ��� ������� *��� �� �� � ���� ����� ������� ��������� � �����

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

(�����������%������������������������ �������+�

- (������%��%�������%������������ �������

- ,�������������������������������telkomnet@instan��

Page 7: Modul Pemrograman Web I

Sekolah Tinggi Manajemen Informatika & Komputer

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

��������� �������������������������������� � � � �������������������������� ���������3�

email : [email protected], blog : http://tit4ni4.wordpress.com

- �� ������������ �� ������5'����- 2��������� ������� �����5=5<=<<<<��

- ���� ���������������%��%�)����

- '������ ����� ���������������������������������������������������34�5���

�� "��%���#��+-%+�"��+-?��+����$�@��������� '������� � ����� ������ ��������� ����� ���� ������� ����� �������� ������ ������������������������������������ ������%�������+��������3E�������4�5�

��

��

��

��

���

���

��

��

��

���

�� �5�������������������������������������� ������� ���������������������������

,� "��4�����

��������������������������� ���� �������+�8��� �3 �� �&��� ������ �8����� ������ ������ �� �� �!�����(�������.��������������������������������������������� �

��������#��*�$ � ����%������������������8�����

2� ���5������������ ���������������������������� �������������������������������������+�

���&�5����'��

(�����������������������������������������������������������������������&�5���<��(���������������������������������������������������������������#��������������� ��%��%�����������%�$��

���&�5���1�

���������������������������������������������������������������� ��'���������

���&�5�+�=�����'���������������� ������������H�������%����������������&�5�!����

'�������������������� �������������������������&�5������������������������������%��3��������������������������&�5�*�.����

�������� �������������������������*������

1� 2 3 4 5�

Page 8: Modul Pemrograman Web I

Sekolah Tinggi Manajemen Informatika & Komputer

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

��������� �������������������������������� � � � �������������������������� ���������4�

email : [email protected], blog : http://tit4ni4.wordpress.com

���&�5�!���8������������������������������������������ ������ �����������

���&�5�"�5�

,���������%���������������.���� ����������������������� � �����������������������������������������������>��������

A� ������������������� ����� ���������� ������� ��� ���� ������� '������� ������� ����I����+))����C��������� ��������������3�*�����7�5�����������%��������� ������� �����

I����+))C� �� ������ ����������������������%��������������������������� ����I����C�

B� 6����5���������������������������������������

*� "�"������#�"����������

����������������� �� �������������������������������������������������������������� ����� ���������������������������������� �� ��������������������������� �������,?"�#,������

?�����%��"�%����$� ����������������4�C������������� 7���������15'����5�����4��4D4����

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

- ��������,?"������ ������� �������www.weaneseducation.com��

- ������������9>�����������32�3?��

,� "�5������4����&��

- �����������#�������)��������)�����$�����������������������������-���.-��������������"��+�

♦ '�����!���������������������� ���������������� �� �����������������������♦ ,���� �"���� ���� � ����� �������� ����� �� ��������� ������ ������ ���� � �� �����

������������������������������ ������������%�������

������� ������ � ����� �������� ������� ���� ��������� �������� ����� ��%���� ������.��������������������������� ��0����������������������������������������������������������������������������������������������������� �����������������������������������������

���� ��������� ���� E�4��F� ����� ��� ������� ���������� E�4�'F� �� ������� � ���� ������

��� ����� ����� �������������������%��3������������������������������.����������������� ��������� ����E�4�'F�� ,������������ ������� ������ ��������� %������ ������ �� ���

������ � ������ ����� ����� ������� ������ ���������� '������� ������ J� ������ ���� ��� ����%�� ����� ���������� ��������

�� www.YAHOO.com�

B�������������������������������������%��3���� �������� ��������� �������� ������������������������������������ ������������������������������������������������

��������� �� ��E���E� ���� ��� ����� ���� ��� ����� ������� ����%�������� B����� ���� �������

����������������.������������������������������������������ �����������B������ �������������%��������������������������������������������������������.�������

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

Page 9: Modul Pemrograman Web I

Sekolah Tinggi Manajemen Informatika & Komputer

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

��������� �������������������������������� � � � �������������������������� ���������5�

email : [email protected], blog : http://tit4ni4.wordpress.com

,� www.Altavista.com�

����������������&��������������� ����B������������������ ������������������� ��

������������ ����� ����� ������������������%��������������� ����������%�������

�������������� ��%����� ����� ��������B���� � ������������������������������� �����������������%��3������������������������������������ ��������������

��

2� www.Google.com

������ ��� �� ������ ���������� �� ��� ������ ���� ����� ���� ��������� �������� ����&�����������B�������������� �����������%��3���������� ����������������������������������������� ����� �� B����� �� ����&������ ������� ����� ���������� ��������� ��������� ������

��������� �������������������������������� �������������������� �������������� �� �������K��%������%L��

��"����#�������������%�"��+����%�� �� ���������

• ��'��� '��%��������������� ����� ����� �������������3 ��.-����#-����-$��

� '������������������������������������������#��������.��� $�

� ���� ������������3 ��.������#-����&$�•••• %��&���

� ������9�������������� �������

� �������� ���������*����%��������

Page 10: Modul Pemrograman Web I

Sekolah Tinggi Manajemen Informatika & Komputer

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

��������� �������������������������������� � � � �������������������������� ���������6�

email : [email protected], blog : http://tit4ni4.wordpress.com

� ����������������������� �������������������� �����>���

Page 11: Modul Pemrograman Web I

Sekolah Tinggi Manajemen Informatika & Komputer

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

��������� �������������������������������� � � � �������������������������� ���������7�

email : [email protected], blog : http://tit4ni4.wordpress.com

BAB II

DASAR-DASAR HTML �� ��� �!�#����

!��"� ����� ���������� ����� ������ ������ ������� ���� ������� ����� ������������������� ���� � �� �� �������� ������� ��� ������ ����� ���� ���������� �������� ������

������� ����������� � !��"� ��������� ����� ������� ����� ������������ ������������������������������#��� �$������������������������������������ �������������������

'�����."�� ���������������� ��-3?2������%��������%��"��� ��0���� ��������� �������/<=<��'�����."������������� ������ ��������� ������ ������� ��������������E�� �������������

���������������������������+�•••• ������%�� ���� �������� ����� ������ ���������� ������%�� ��� ������ ���� ����� ������

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

•••• ���������������������*��������������������������� ��������������������������������������� ����

•••• ������%�� ���� ���� ����� ������ ����� ��� ��������� ����� ������ �� ���������

#��������� ������ ������)�����.������ ���� ������� ����� ��������� ����� ����� ������

������������$������������� ���������� ���� ������ '�����."��� ��� ���������� �����% � ������� ��������������������������������

�������������������������������!��"�

�� ��+����+� -��"���!�"#�

8����!��"��������������� ������������������� ������.����!��"������������� ��E������� �

����� !��"� ����� ������ ��������� ����� � ����� �� ������ �������� 2����� � ����� ������ ����� �����*������!��"�����������%�������8������� �!������" �2���%����-������� � ���� �������������� ����������������������������������!��"��

8���� !��"� ������� ���� �������� ���� ����� ����� �������� � �E���� � ��%����� � ����

�������������������������+�

<html>

<head>

<title>Latihan 1</title>

</head>

<body>

Ini adalah teks yang ditampilkan di browser !!

</body>

</html>

��������� ������� ���������������M����N� ��M)����N�������� �������� ���������������

!��"������M!�� N�������M)!�� N�������� ���������������� ��������������*���� ���*��� � �� ���.����� �� ����� ����M�����N� ���� � �� �� ����� ��� ��� ������� �� ��� ������� ����

Page 12: Modul Pemrograman Web I

Sekolah Tinggi Manajemen Informatika & Komputer

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

��������� �������������������������������� � � � �������������������������� ���������8�

email : [email protected], blog : http://tit4ni4.wordpress.com

���������� �� -������ ��������� ���� M'� �N� ������ M)�� �N� ������� ��������� ���� �� ��� �������� ����� ������!��"��

7� ��%�����- ��!�"#�

'����� �� �� ��������� ���� ���� ������ !��"� ���� �� ������� ��������� ������ �������������� �������������� ������� ��������� � �����.�����'������� �� ����������������M�� �N�

�������������M)�� �N������M�� �N��������������������������+��

��&4� ����������

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

#�������$� 8��������������� �����������������%����� �

#�!����� ������%����� � ������

#������������ 0�������������������� �����K8�E� L ��������%����� ��� �������� ��������

�%������ '���������� ������ �������������E���

�������� '���������� ������ �������������E���

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

&����� ������������������ ��������

����� ���� ������E�

-�����+�<html>

<head>

<title>Latihan 2</title>

</head>

<body background="Setup.gif" bgproperties="fixed" bgcolor="#0000FF"

link="#0000FF"

vlink="#FFFF00" alink="#800000">

Contoh atribut body :

</body>

</html>

"��=����� �'4����!�"#�

(�����!��" ���� ���������������������� ����� ���������������������� ����������.������������� ���������+�• ����M'?N�

����M'?N� ���������������������������������� �������������� ������������������� �����������������3�����

• ����M�N�

����M�N� �������������������������������������������� �������� ����������������� ������ ������ ��������� ���� �� ��������� �������� � ���� �������� �� ��� ��������� ���������������������� ���� �������� ���� ����������������������������

-�����+�<html>

<head>

<title>Latihan 3</title>

</head>

<body bgproperties="fixed" bgcolor="#FFFFFF" link="#0000FF" vlink="#FFFF00"

alink="#800000" text="#000000">

<br>Ini baris pertama

<br>dan ini baris kedua

<p>Sedangkan ini adalah sebuah paragraf panjang yang berisikan beberapa baris

teks dalam satu paragraf.</p>

<p>Ini Paragraf kedua.</p>

</body>

</html> �

• ���� M!?N� ������� ����� �������� ������ ��������� ����������� ���� ��� ������������������������� �������+�

��&4� *4����

����� �������������+�"��� �?����������%�����

� ��� "����� �������������������

��O�� ������������

Page 13: Modul Pemrograman Web I

Sekolah Tinggi Manajemen Informatika & Komputer

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

��������� �������������������������������� � � � �������������������������� ���������9�

email : [email protected], blog : http://tit4ni4.wordpress.com

2���� �� ��������������������� ������

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

Page 14: Modul Pemrograman Web I

Sekolah Tinggi Manajemen Informatika & Komputer

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

�������� �������������������������������� � � � �������������������������� ���������10�

email : [email protected], blog : http://tit4ni4.wordpress.com

-�����+�<html>

<head>

<title>Latihan 4</title>

</head>

<body bgproperties="fixed" bgcolor="#FFFFFF" link="#0000FF" vlink="#FFFF00"

alink="#800000" text="#000000">

<br>Ini baris pertama

<br>dan ini baris kedua

<hr align="left" color="#00FF00">

</body>

</html>

• ����M!N� ������P�/.�4�(������������������ ���������� ��������-����+�<html>

<head>

<title>Latihan 5</title>

</head>

<body bgproperties="fixed" bgcolor="#FFFFFF"

link="#0000FF" vlink="#FFFF00" alink="#800000"

text="#000000">

<h1>Ini Heading 1</h1>

<h2>Ini Heading 2</h2>

<h3>Ini Heading 3</h3>

<h4>Ini Heading 4</h4>

<h5>Ini Heading 5</h5>

<h6>Ini Heading 6</h6>

</body>

</html>

• ����M-����N�

(���������������������������-����+�<html>

<head>

<title>Latihan 6</title>

</head>

<body bgproperties="fixed" bgcolor="#FFFFFF" link="#0000FF" vlink="#FFFF00"

alink="#800000" text="#000000">

<h1 align="center">Ini Heading 1</h1>

<Center><h2>Ini Heading 2</h2></Center>

</body>

</html>

• �����%���8�����������%��� 8������ ������ ������� ����� ��� ������ ������ ����� ���.���� ���� ��������� �����%����������� ��������������������+�

���� *4����

M'N� !�����������

M�N� !�����������

M��N� !����������������

M,N� 9�����������

M������N� !����� �%�����

M'�9N� !�����������������

M�����N� !�������������%���

M���N� ����%�����

M���N� ������%�����

• ����M8��N�����8��� ������������������������ ������� ������������

M8���F8�%�PL�������LG�F-����P����G�F��O�P,����GN�

-�����+���<html>

<head>

<title>Latihan 7</title>

</head>

<body bgproperties="fixed" bgcolor="#FFFFFF" link="#0000FF" vlink="#FFFF00"

alink="#800000" text="#000000">

<h1 align="center"><b><u><font face="Arial Narrow">Ini Heading 1</font></u></b></h1>

Page 15: Modul Pemrograman Web I

Sekolah Tinggi Manajemen Informatika & Komputer

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

�������� �������������������������������� � � � �������������������������� ���������11�

email : [email protected], blog : http://tit4ni4.wordpress.com

<Center><p><i><font face="Arial Unicode MS" color="#0000FF" size="4">Ini Heading

2</font></i></p></Center>

</body>

</html>�

Page 16: Modul Pemrograman Web I

Sekolah Tinggi Manajemen Informatika & Komputer

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

�������� �������������������������������� � � � �������������������������� ���������12�

email : [email protected], blog : http://tit4ni4.wordpress.com

BAB III

GAMBAR DAN LINK

�� "���"��!����%�"��+�

(������!��"�������������������������� �������������������� ��������8����������������� ����� ���������� ������ ���+� 9�8 � 0�9 � �-@ � �29� �� �8�� 2���� �������� ������

������� �������� ������� ������� ���� ������� ������ 9�8� ����� 0�9�� ,���� ����������������� ��� ����� ������!��"� ������� ����M��9N�� ����M��9N���������� ���������������������������������+�

��&4� ����������

�?-� 2����������������

�"�92� �������� ������� ����� �� �������� ������ � ������� � ����� ��� �� �� �'����� �"���������?������

� ��� "������������ �������������E���

!������ ������������� �������������E���

���� ������������E���������

�-����+�

�<html>

<head>

<title>Latihan 2</title>

</head>

<body bgproperties="fixed" link="#0000FF"

vlink="#FFFF00" alink="#800000">

Contoh gambar dalam HTML

<p align="center"><img border="0"

src="pe01832_.gif" width="224" height="203"

alt="Ini Gambarku"></p>

</body>

</html>

���

��� #����

"������������������������������ ��������� �������� ����������� ��������� 0���� ���� �.%��%� ��������������������������������������������%������������������������� ����� ������� �������� ��� ������� ����� ����� ���� ���������������� ��� ������� �����

������������������� ����������%���� ����� ������� �����������������M�N������ M�N� ����� ��������� ��� �������� ������ !?38� �� 2��3�� !?38� ������� ������� ��������� ������� ���� ������ �� ����� 2��3� ������� ����� �� ������������������ ������������!��"��

-�����+�

�����������%���������������� ��������������

Page 17: Modul Pemrograman Web I

Sekolah Tinggi Manajemen Informatika & Komputer

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

�������� �������������������������������� � � � �������������������������� ���������13�

email : [email protected], blog : http://tit4ni4.wordpress.com

<html>

<head>

<title>Latihan 2</title>

</head>

<body bgproperties="fixed" link="#0000FF"

vlink="#FFFF00" alink="#800000">

<h1>&nbsp;<a href="#EndOfFile"><img

border="0" src="pe01832_.gif" width="84"

height="77" alt="Ini Gambarku"

align="middle"></a><font

color="#0000FF">Some

example of hyperlink</font></h1>

<p align="left">VISIO TECHNICAL 4.5

NETWORK.TXT FILE </p>

<p align="left">Copyright (c) 1997 Visio

Corporation. <a

href="http://www.visio.com">Visit

Visio Homepage</a></p>

<p align="left">All rights reserved.

This file contains information about Setting up and running Visio Technical

4.5 on a network. We recommend that you read this file and keep a printed

copy with your Visio Technical documentation. For other late-breaking

information about installing and running Visio Technical, see the

README.TXT file. For a listing of all the files copied to your hard drive

if you install the complete version of Visio Technical 4.5, see the

FILELIST.TXT file.

Tip: If necessary, choose Word Wrap from the Notepad Edit menu or Wrap To

Window from the WordPad View/Options menu to wrap the text within the

document window. <a name="EndOfFile">

</a></p>

</body>

</html>

7� ����#�

���.�������� ����� ������������������������������������+�• ����M�����N�

'��������������� ��������������������������������������������������������

���������+��

��&4� ����������

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

'�%����� � 9��������������������������

'�-����� ������������������������

'�� ��� �������������

'�� ��-����� �����������

'�� ��-����"����� ���� �����������

'�� ��-����(���� ������������������

-������%��� �����������������

-����� ��� 0������������� �����������

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

� ��� "�����������

&����� �������*������������� ���������

�• ����M�!N�

,��������������� ��� ������������• ����M�?N�

,������������������ ������������• ����M�(N�

,������������������ ���������������������������������������������� �����������

��&4� ����������

Page 18: Modul Pemrograman Web I

Sekolah Tinggi Manajemen Informatika & Komputer

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

�������� �������������������������������� � � � �������������������������� ���������14�

email : [email protected], blog : http://tit4ni4.wordpress.com

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

'�%����� � 9������������������������

'�-����� ����������������������

'�� ��� �����������������

'�� ��-����� ���������������

'�� ��-����"����� ���� ���������������

'�� ��-����(���� ����������������������

-������ 0���������������� �������

?������ 0���������������� �������

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

� ��� "���������

&����� �������*������������� ���������

Page 19: Modul Pemrograman Web I

Sekolah Tinggi Manajemen Informatika & Komputer

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

�������� �������������������������������� � � � �������������������������� ���������15�

email : [email protected], blog : http://tit4ni4.wordpress.com

-����+�<html><head>

<title>No</title></head>

<body>

<table border="1" width="100%">

<tr>

<td width="8%" align="center" bgcolor="#0000FF" rowspan="2"><font

color="#FFFFFF">No</font></td>

<td width="55%" align="center" bgcolor="#0000FF" colspan="3"><font

color="#FFFFFF">Barang</font></td>

<td width="17%" align="center" bgcolor="#0000FF" rowspan="2"><font

color="#FFFFFF">Jumlah</font></td>

<td width="20%" align="center" bgcolor="#0000FF" rowspan="2"><font

color="#FFFFFF">Total</font></td>

</tr>

<tr>

<td width="1%" bgcolor="#0000FF">

<p align="center"><font color="#FFFFFF">Kode</font></td>

<td width="35%" bgcolor="#0000FF">

<p align="center"><font color="#FFFFFF">Nama</font></td>

<td width="19%" bgcolor="#0000FF">

<p align="center"><font color="#FFFFFF">Harga</font></td>

</tr>

<tr>

<td width="8%" align="center">1</td>

<td width="12%">BK-001</td>

<td width="29%">Gudang Garam International</td>

<td width="14%">

<p align="right">Rp. 3.300,00</td>

<td width="17%" align="center">2</td>

<td width="20%" align="center">6.600,00</td>

</tr>

<tr>

<td width="8%" align="center">2</td>

<td width="12%">BE-555</td>

<td width="29%">Sampoerna A-Mild</td>

<td width="14%">

<p align="right">Rp. 3.500,00</td>

<td width="17%" align="center">1</td>

<td width="20%" align="center">&nbsp;3.500,00</td>

</tr>

</table>

</body>

</html>

Page 20: Modul Pemrograman Web I

Sekolah Tinggi Manajemen Informatika & Komputer

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

�������� �������������������������������� � � � �������������������������� ���������16�

email : [email protected], blog : http://tit4ni4.wordpress.com

BAB IV

FRAME ��

8����� ���������������������� ���������������� ����������������� �������.������

��� ���� ���� ������!��"������ �����,������������������������ ��������� �������������M8�������N� ��M8����N������������������������������������������������������������������ ����� ����������� �����������M2������N���

����M8�������N���������������������������������+�

��&4� ����������

?���� �������� ������ ���������� ���������� �� ������������������

-���� �������� ������ *�������� ���������� �� ������������������

'�� ��-����� ������������������

����M8����N�������������������������������+�

��&4� ����������

��%� 2���������!��"����� �������������������������

�����!������ '����� ����� �� ������ ������ ������ ���� �������

�������E���

������ ��� '����� ����� �� ���� ������ ������ ���� �������

�������E���

�%������� ���������%����������������������� ��������������

2�?���O�� 0���� ���������������������� ��� ����� ��������������

2���� 2���� ����������������

'�� ��� ,�����������

-����+��

����

���5����

���4����

�������

&��������

���<����

Page 21: Modul Pemrograman Web I

Sekolah Tinggi Manajemen Informatika & Komputer

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

�������� �������������������������������� � � � �������������������������� ���������17�

email : [email protected], blog : http://tit4ni4.wordpress.com

��

(���� ����� ������ ��������������� ������)� ��������� ���� ���� +�6�������#����$� ��

�� �� ������ ������ ������������ �� 1� ������ #%���$�� ,������������ ������ ������� ���� ������� ����� ��������� �����<�����

����������

<html>

<head>

<title>Untitled Document</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

</head>

<body background="gambar/web_blanja_01.gif">

</body>

</html>

���4������<html>

<head>

<title>Untitled Document</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

</head>

<body background="gambar/web_blanja_02.gif">

<form name="fku" method="post" action="tes.asp">

<table width="87%" border="0" cellspacing="0" cellpadding="0">

<tr>

<td>&nbsp;</td>

<td><font size="1" face="Verdana, Arial, Helvetica, sans-

serif">Account</font></td>

<td><input name="txtuser" type="text" id="txtuser" size="15"></td>

</tr>

<tr>

<td>&nbsp;</td>

<td><font size="1" face="Verdana, Arial, Helvetica, sans-

serif">Password&nbsp;&nbsp;</font></td>

<td><input name="txtpass" type="password" id="txtpass"

size="15"></td>

</tr>

<tr>

<td>&nbsp;</td>

<td><div align="right">

<input name="cmdlogin" type="button" id="cmdlogin"

value="Login">

</div></td>

<td>&nbsp;</td>

</tr>

<tr>

<td>&nbsp;</td>

<td colspan="2"><font color="#FF0000" size="1" face="Verdana,

Arial, Helvetica, sans-serif">*

Baca syarat daftar di menu syarat di atas</font></td>

</tr>

</table>

</form>

</body>

</html>

&����������<html>

<head>

<title>Untitled Document</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

Page 22: Modul Pemrograman Web I

Sekolah Tinggi Manajemen Informatika & Komputer

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

�������� �������������������������������� � � � �������������������������� ���������18�

email : [email protected], blog : http://tit4ni4.wordpress.com

</head>

<body background="gambar/web_blanja_04.jpg">

</body>

</html>

���5������<html>

<head>

<title>Untitled Document</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

</head>

<body background="gambar/web_blanja_03.gif">

<p><font size="2" face="Verdana, Arial, Helvetica, sans-

serif"><strong>SELAMAT

DATANG di BELANJA On Line....</strong></font></p>

<table width="97%" border="0" align="justify" cellpadding="0"

cellspacing="0">

<tr>

<td><p align="justify"><font size="2" face="Verdana, Arial,

Helvetica, sans-serif"><DD></DD>Site ini merupakan contoh amat dasar

sekali deh yang dibangun dan ditata sedemikan rupa hingga memakan waktu

kurang lebih <strong>2 hari saja</strong>. Jadi diharap maklum jika dari

segi tampilan, isi dan bobot transaksi jauh dari nilai sempurna. Saat

kalimat ini diketikpun masih disambi makan siang. Jadi waktu

pengerjaanpun juga disambi itupun 'kalo ingat' dan 'kalo mood bagus'

(plus kalo sempat =&gt; biar kliatan sibuk kayak yg lain...

ssstttt).</font></p>

<p align="justify"><font size="2" face="Verdana, Arial, Helvetica,

sans-serif"><DD></DD>Pada intinya diharapkan dengan site yang tidak bagus

ini, <strong>mahasiswa dapat membuat yang lebih baik</strong> dari segi

tampilan, isi maupun bobot transaksi hingga diharapkan <strong>mahasiswa

yang mempunyai ilmu lebih buanyuak</strong> dan pengalaman mendesain

dapat (<em>at least</em>) membuat site yang dapat mendukung <em>e-

commerce</em> sesuai yang diinginkan.</font></p>

<p align="justify"><font size="2" face="Verdana, Arial, Helvetica,

sans-serif"><DD></DD><strong>Tool atau perangkat yang digunakan</strong>

membangun site ini lumayan sedikit seperti <strong>Adobe Photoshop 7.0

dan Macromedia Dreamweaver saja</strong>. Tanpa <strong>CMS

</strong>(<em>Content Management System</em>) atau <strong>MSG</strong>

(<em>Monosodium Glutamat</em>) ???. Database hanya menggunakan

<strong>Microsoft Access</strong> dan Bahasa yang digunakan hanya

<strong>HTML</strong> (<em>Hypertext Markup Language</em>),

<strong>ASP</strong> (<em>Active Server Pages</em>) dan sedikit bahasa

<strong>VBscript</strong> (<em>Visual Basic Script</em>).</font></p>

<p><font size="1" face="Verdana, Arial, Helvetica, sans-

serif"><strong>Save your soul, save your earth, down to earth (intinya

jangan berlebihan (Narzis)). Let's make things better. Courious in IT, IT

developer is nice but IT copycat is worse. Open source is good but your

mind must open...</strong></font></p>

</td>

</tr>

</table>

<p align="justify">&nbsp; </p>

<p align="justify">&nbsp;</p>

</body>

</html>

���<�����������1��&�����=�����<html>

<head>

<title>Untitled Document</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

</head>

Page 23: Modul Pemrograman Web I

Sekolah Tinggi Manajemen Informatika & Komputer

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

�������� �������������������������������� � � � �������������������������� ���������19�

email : [email protected], blog : http://tit4ni4.wordpress.com

<frameset rows="159,*,35" cols="*" framespacing="0" frameborder="NO"

border="0">

<frame src="atas.htm" name="topFrame" scrolling="NO" noresize >

<frameset rows="*" cols="278,*" framespacing="0" frameborder="NO"

border="0">

<frame src="menuku.asp" name="leftFrame" scrolling="NO" noresize>

<frame src="awal.htm" name="mainFrame">

</frameset>

<frame src="bawah.htm" name="bottomFrame" scrolling="NO" noresize>

</frameset>

<noframes>

<body>

</body></noframes>

</html>

Page 24: Modul Pemrograman Web I

Sekolah Tinggi Manajemen Informatika & Komputer

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

�������� �������������������������������� � � � �������������������������� ���������20�

email : [email protected], blog : http://tit4ni4.wordpress.com

BAB V

FORM ��� *-+"�

,���������������������������.�������� ���������� ����+�

• ����M8���N������������������ �������������� ������������������������������� ����������� ������ ������ ����� � �� �%����� �������� ����� � ������� ������������� ���� �� ��������� ��� � �� ����� �%���� ������� �����

��������������������� ��� ������������������� ����#�%��������$��• ����M��E�����N�

(����������������������������������E������������������6���������������+�

��&4� ����������

?���� 0��������������E�������

-���� 0��������������E�������

2���� 2���� ������������E�������

• ����M����%�N�(������� ����� �������� ������� ������ ������� #%����� ��E$�� ���� ��� ��������������������������������+�

��&4� ����������

2���� 2���� ��������������%��

��O�� 0��������������������� ����������� 0���� ������ ����� / �

������� ������������������ ��� ���������0���� �����������1����������� ������������ �������������������%�������E��

��������� ,������������������������� ���������

• ����M����N�(��������������������������.����������� �������������������

��������� �������� �����������E���E �%��%���E ������ � �����.�������������� ���

�����������������������������.������������������������������+�

��&4� ����������

2���� 2���� ���������������������������� �����������%���������������������������%������

��O�� ,�������������E���E�

��E"����� 0��������������������������������� ��������

&����� ,���� ��E���E � �������� ����� ���� �������� � �����%��%���E� ����� �� ��� ����� ��������� ����� ����� ���� �������� ,���� ������� �� ?���� � �������� ����� ����

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

-��%�� � !���� ������� ����� %��%���E� ����� �� ��� �������

,������������������� ��������

���������������������� ����� �����������+�

�81�� ����������

��E�� ��E���E�

������� � ��E���E� ���������������� �

-��%���E� -��%����E�

?� ��� ?� ���'�����

?����� '������������.������������

�����

������� '�������������������� ����������

�-�����+�

Page 25: Modul Pemrograman Web I

Sekolah Tinggi Manajemen Informatika & Komputer

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

�������� �������������������������������� � � � �������������������������� ���������21�

email : [email protected], blog : http://tit4ni4.wordpress.com

<html>

<head>

<title>Form Registrasi</title>

</head>

<body>

<p align="left"><big><big>Form

Registrasi

Mahasiswa</big></big></p>

<form method="POST"

action="frmAction">

<table border="0"

width="73%">

<tr>

<td width="28%">Nama</td>

<td width="72%"><input

type="text" name="Nama"

size="20"></td>

</tr>

<tr>

<td

width="28%">Alamat</td>

<td width="72%"><input type="text" name="T2" size="37"></td>

</tr>

<tr>

<td width="28%">Pendidikan terakhir</td>

<td width="72%"><select size="1" name="Pdk">

<option selected>SMA</option>

<option>STM</option>

<option>MAN</option>

<option>Pondok Pesantren</option></select></td>

</tr>

<tr>

<td width="28%">Jenis Kelamin</td>

<td width="72%"><input type="radio" value="Laki-laki" checked

name="JK">Laki-laki&nbsp;

<input type="radio" name="JK" value="Perempuan">Perempuan</td>

</tr>

<tr>

<td width="28%">Hobi</td>

<td width="72%"><input type="checkbox" name="SB1" value="Sepak

bola">Sepak

Bola <input type="checkbox" name="SB2" value="Membaca

MSB">Membaca majalah

sepak bola

<br><input type="checkbox" name="SB3" value="nonton SB">Nonton

Sepak

bola </td>

</tr>

<tr>

<td width="28%">Catatan</td>

<td width="72%"><textarea rows="2" name="Catatan"

cols="39"></textarea></td>

</tr>

<tr>

<td width="28%"></td>

<td width="72%"><input type="submit" value="Submit"

name="B1"><input type="reset" value="Reset" name="B2"></td>

</tr>

</table>

</form>

<p>&nbsp;</p>

</body>

</html>

Page 26: Modul Pemrograman Web I

Sekolah Tinggi Manajemen Informatika & Komputer

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

�������� �������������������������������� � � � �������������������������� ���������22�

email : [email protected], blog : http://tit4ni4.wordpress.com

BAB VI

MACROMEDIA DREAMWEAVER MX

�� ���%���#�����%���� ��� (�������*��� *����� �@� ��������� ������ ����� ���� ������ ��������� ������������� ����� �������� ������� ���� ������ '����� ���������� ���� �������� ��%�������

8������� �Q� ���� �� ��������������� ���������������������� �������������'��������� ���� ����� �� ����� �������� ��������� (�������*��� ������ ���� ����

�������� ������ � (�������*��� ����� ��������� ������ ���� ����� �������� ���������������� �������� -�� � @�"� ����� �� ����� ��������� ������� �������� ���� ��������

���������!� ���� �������������������%�������������0�*� �&'������-R� �� ���.�����'��������������� ����� ��%���� ��� (�������*��� �������� �������� ������� ��� ����� ���� ����

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

���

��'���������������� ������������������.������ �������+�

- "��4� ��� � ��������� ����� ���� ����� ������ ������� � �������� ��� � ������� �

���� ��� ��� �������� ��������- ������ ��� � ������� ���.���� ����� ���������� ��������� ��%��� ������ �������� ����� � ������

����������� ����� ������- ���5�&��� ��������������.������� ������������������������������������

- ��4���� ��5&�� � ������� ������.������� �� ���� ���.��� ���� ���� ����� ��������

����� �� ����(�%������ �� ���������-� � ������������(�����- ����5�� %��41 � � ����� �������� ����� ���� ������ ��������� ����� ����� ������ ����

������������ ��������������� ���- ?�5�����?���� �� ������� ��������� �����������(���� �-� �������(�*�����

- ���1����� ���1���� � ������� ����� �������� ����.����� �� ��� ��.��� ��� �����������������������

�� "�"���%���;�"��%� ���!�"#�,��������������������� ���!��" �� ��6���������������� �����������-� � ������������

������-� ������������������� ��)��������)��%����� �������.����!��"����� �������������

����'��� �����'��� (�%���������'���

���������������%����

�����9�����������'���

��%����� ���

Page 27: Modul Pemrograman Web I

Sekolah Tinggi Manajemen Informatika & Komputer

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

�������� �������������������������������� � � � �������������������������� ���������23�

email : [email protected], blog : http://tit4ni4.wordpress.com

������������ ��)��������)��%����� �������������������� ������� ���������� ������������� �����(��������������������������������������� ������������������������������� ��

)��������)��%�����!��"��'������� ���������������� �����������������+�

��

�0���� ���� ���� ��� �%����� �� ������ %� �� � ����� ��� ����� ���������� �������������� �������� ��� ����� ����� ���� ��� !��"�� �������� ����������

��������M�N������������������������N��������%�������������(�������*���

���� ������� ���� ���� ������ ���������� 0���� ���� �� ����� ������ ���� �� ����� ��� � ����� ����� ������ ������ ����� ����������� �����.������ ����

���� ������ ����������� ��������� �������������� ������������������)������������������� ������ ��������������������������

��

,��������������������������������������������������������� ��� ����� ��

�������*�� ��������������������������� ��������� ��������� �� ������ �������

7� "�"���%��������"��%!����%���������,���������������������������������������*�� �� ���������������

������ ����������� ������ ������ ���*��� � �� ������ 2���� ��%�������������� ����������������������� ��������� ���������������������

8����� ������������������������������������������������������(���������������������������� ������������+�

"������������������������������#����$� ����������� �����+�

7�����

�����

Page 28: Modul Pemrograman Web I

Sekolah Tinggi Manajemen Informatika & Komputer

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

�������� �������������������������������� � � � �������������������������� ���������24�

email : [email protected], blog : http://tit4ni4.wordpress.com

/� �������� ���� ����� ���� ������� ���� ���������������2�E��

1� �������������������������*��������������� ������������ � �������B������� ��������� ��������� ���*��� ���� �������� � �� ��������� ������� +� ���� 0�*��%����D� ����

&'�%����D� ���� �23��-RD�����23��&'D� -�� �����D� 0��� ����� �!�����S"�� '���� ������� ����&'�%������

2� 6'�� ���.��� 5��'�8�� ���� �� '��14��� �5��� ��4� 4���� ���&���4�� ���.��� ��

��1�� ���.��� ;� ���� ����5�� ����� ������� J� ������� ���������� ���� ������ � ��

��������������������������+��

��

���������� ����� ������� �E�� �� ���� ������� �� ���� ����� ���� ��������� �����

�� ���������,?"� ����� �������!���� ����� ����� ���� ���� ������� '������� ����

�����1�;;5���5��������� ��������������� ������������������������������������+�

��

����� ������� 2�E� � ���� ��� ������� ��������� ������� ����������� ������� ���*���

������������������2�� ��������������2�E� ����������� ��������������������������

������ ������ ����� ���������������(������6'��5��'����.�������1��5���;�4������'������55��������4��&���4&4�����'��

D������� #�'�5� ;� #��� ������ ���4�� &���4&4����� ������� *��� 9*5�� �����=���������5:�8���������'�������������������������� ���������������������������+�

'5'�

*�5����'��D��������

Page 29: Modul Pemrograman Web I

Sekolah Tinggi Manajemen Informatika & Komputer

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

�������� �������������������������������� � � � �������������������������� ���������25�

email : [email protected], blog : http://tit4ni4.wordpress.com

��

���� ��� ����� �������2�E������ ��� ������� �� ���� �������� ������������8��� �����

������� ���� ������� 8��� ���� ������ ��������� '������� ��������� ���� ���*��� # �� ����� %����� � ����� �����$ � ���� ����� �������������� ������� 8��� ���� ����� ��������� ��#������+������+1/1/$���

��

���� ��� ���� ��� ��� ���� ������ �� ����� �� 8��� ���� ������ �� ���� ��� ����� �������

� ����������������� �����������������+��

'5'�

*�5����'��D��������

?�D&��'=�

Page 30: Modul Pemrograman Web I

Sekolah Tinggi Manajemen Informatika & Komputer

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

�������� �������������������������������� � � � �������������������������� ���������26�

email : [email protected], blog : http://tit4ni4.wordpress.com

��

����� ������� 2�E� � ���� ��� �� ���� ���������� � ����� ������� ,?"� ���� ������ �

��������� ������������)������� ���%�����+�����+))�����)��������� ��������������������,?"� ������������� �� ��������� ���0�'����������������K����,?"������E�

�����������%%������L��������������>�� ������ ���2�E�� ��������� �� �������������

��������������������������������� ������������������������������������������ ��������,����������%����������� � ������������������������%������������)������#���$� ������������������2���������������������������2�E�� ���� ����������������������� ���� ����� ������ ���������� �� ����� ������� (���� "������ ����������

����������8������������������������ ��������������������������������������

��������� � �� ���� ���*��� �������� ������� ������� � ����� �������� ����� ����

���������)���� ���������� ��������*���#����� $ ����������������� ������������ ������

�������� ���� ���*��� ��� ��������� ������ � �� # ����� $� ����� ������� ���� �� 0����

��������� ����� ������ ����� ���� ������� ����.����� � �� �� ���*��� ���� ������� ����� � �������� ���� �� �����*����

���

Page 31: Modul Pemrograman Web I

Sekolah Tinggi Manajemen Informatika & Komputer

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

�������� �������������������������������� � � � �������������������������� ���������27�

email : [email protected], blog : http://tit4ni4.wordpress.com

<html>

<head>

<title> VBSCRIPT </title>

<script language=VBSCRIPT>

Dim strNilai

Dim strCount

Sub cmdHitung_Onclick()

-- Command / Perintah -- End sub

</script>

</head>

<body>

</body>

<html>

<head><title> VBSCRIPT </title></head>

<body>

<script language=VBSCRIPT>

document.write “Selamat datang di Dunia Maya”

</script>

</body>

</html>�

BAB VII

VB SCRIPT ��� ���+ ���+�)���7+����

������� ��� !��"� ������ ����� ��� ������ ��������� � ���� �������� ������ ������

����������>�������������������� ����������������.�����������������������#�%����$����� ����� ������������ �����!��"��������������������������� ������!��"��,���������������%���� � ����� �����������M�-?���N��������� ����� ��������� ����������� ������� �� ��� �%����� ���� ��������� �� �� ������ ��� � ������� ������� ��������� �������

'�������%��������������� �������������������������&'�%����� ��0�*��%�������

a. Contoh Penggunaan Tag Script di halaman HTML yang diletakkan di bagian tag head

b. Contoh Penggunaan Tag Script di halaman HTML yang diletakkan di bagian tag body

�&'�%�������������� ������ ���������������� ����������� �������%���������������� �������

��������������������%������� ��������������&������'���%� ��&'� �&'�%�����������������

���� ������ ������������ ������� ������� ���������������������������� ���������������������������.������ ����������������� �������������������������������������������������������E� ���������� ��� ������� ��������������&'�� ��&' � ����������� ��������� �����%������������&'�%����� ���������!��"��

���%������� ������� 3E������� ��������� ��������� ������ ���� ����� ������� ����������������� ��������� ,������ ������� �������� ��������� ��������� �� ��� ���� ����� � �

���������������������� ������������'������������������&'�%������� ������������� �� ���� &'�� )� &������ '���%� ���� �� ��� ������ ����� ���������� 2���� �������� &'�� �� &������

'���%� �������� � �� �������� ������ � ������� �� ��� /55T� ���� � ������� ����� ����

&'�%������

Page 32: Modul Pemrograman Web I

Sekolah Tinggi Manajemen Informatika & Komputer

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

�������� �������������������������������� � � � �������������������������� ���������28�

email : [email protected], blog : http://tit4ni4.wordpress.com

�� ����� ��������� �������� ������� �� �����&'�%���������� �������� �������)� ������� ��

�����&'�� ��&������'���%��

-�����+������� �"�� �'��� ������ �(����� �(���� ������ ����

!��5����

��������������(���� �� �����������&��������

7������� ����������

-'���� �������� �������� ������� ����'������

-'���� �������� �������� ������� ����'����

-(����� �������� �������� ������� ����(����

-(��� �������� �������� ������� ����(������

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

-"�� �������� �������� ������� ����"���

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

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

-�������������&'�%����� �� ������������!������!��"����������>�����8���+�

<html>

<head>

<title>Tipe Data di dalam VBScript</title>

</head>

<body>

<Script Language=VBScript>

nJumlah = 100000

nRata2 = 78.25

strNama = "Agoestira"

document.write Cstr(nJumlah) + " <-- ini adalah tipe data LONG"

document.write "<br>"

document.write Cstr(nRata2) + " <-- ini adalah tipe data Single"

document.write "<br>"

document.write strNama + " <-- ini adalah tipe data String"

</Script>

</body> </html>

Page 33: Modul Pemrograman Web I

Sekolah Tinggi Manajemen Informatika & Komputer

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

�������� �������������������������������� � � � �������������������������� ���������29�

email : [email protected], blog : http://tit4ni4.wordpress.com

Contoh 1

!��5���

Contoh 2 <html>

<head>

<title>Penggunaan Button TextBox dan Pesan </title>

<Script Language=VBScript>

dim myForm

Set myForm = document.frm

Sub Cek(obj)

If if myform.obj=”” then

Msgbox “Nim Tidak Boleh Kosong Bos”

End If

End Sub

</Script>

</head>

<body>

<form name=”frm”>

<p>Nim: <input type="text" name="T1" size="20"></p>

<p>Nama: <input type="text" name="T2" size="20"></p>

<p><input type="submit" value="Submit" name="B1" onClick=Cek(“T1”)></p>

<html>

<head>

<title>Penggunaan Tombol dan Pesan </title>

<Script Language=VBScript>

Sub pesan()

Msgbox “Hay … aku sudah bisa… VBSCript”

End Sub

</Script>

</head>

<body>

<p>

<input type="button" value="Say Hallo" name="B3" onClick="Pesan">

</p>

</body>

</html>

Page 34: Modul Pemrograman Web I

Sekolah Tinggi Manajemen Informatika & Komputer

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

�������� �������������������������������� � � � �������������������������� ���������30�

email : [email protected], blog : http://tit4ni4.wordpress.com

</form>

</body>

</html>

�!��5��

���

��

Page 35: Modul Pemrograman Web I

Sekolah Tinggi Manajemen Informatika & Komputer

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

�������� �������������������������������� � � � �������������������������� ���������31�

email : [email protected], blog : http://tit4ni4.wordpress.com

BAB VIII

DASAR-DASAR ASP �� ��� �!�#����

�� �������������������!��"� ������ ������������������%������������ ������2���� �����

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

������������� �� ���������,���� ����������������� �������� ��������� ������������������� ����� ����� � ������ ���������� �%����� �������� �������� -9�� #�������� ������� ��������*��� �������������������,2�@$ �-�� �8���� ��%��*�����*��������� �����.������� �� ���������������%����� ����������������������������������������������(������� ���

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

8���������������������������������� ���������������� ������������������ �������� �����

!��" ��%����.�%�����������������&'�%���� �0�*��%���� � ���������.�������������� �����,���� ������������������� �������������������������������� �����������������+�

/� ������� >������� ���� ������� ����� ���*��� ������ � ���� <=� #����� ������ ��%��$� ������ ����2���

1� ��������� ��� #�������� ��� ���*��$� ����� � ���� <=� ����� ���� #�������

����������������$�*�����:�5������� ����2���

-���������� �������� ����� �������������������������+��

���45�����'�1�����

��������������������� ����&'�-?���� ����� ������� �����������������M�-?���N� �� ���������������������������?,2��P�3?&3? ������ ����� ����� ������������� ����

GH� ��HI��-�����������������E����� ������ ���������� ��%����/����� �����������+��

<html>

<head>

<title>Sintaksis Penulisan ASP</title>

<Script Language=VBScript RUNAT=”SERVER”>

function cetak(str1)

cetak = Cstr(str1)

end function

</Script>

</head>

<body>

<p>Fungsi cetak menghasilkan string :

<%=cetak(“Wearnes Education Center”)%></p>

</body>

</html>

Web Server

PWS/IIS

Internet User

HTML

PagesODBC

Microsoft Access Table

ASASP

Page 36: Modul Pemrograman Web I

Sekolah Tinggi Manajemen Informatika & Komputer

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

�������� �������������������������������� � � � �������������������������� ���������32�

email : [email protected], blog : http://tit4ni4.wordpress.com

�� -�6���+���-����>����� ?������� � ����� ������ �����.�� ���� ���� ������� ����� ���������� ������� ����

�������*������� ��%������'�������������������������������� �������������� �� �������� ��

������ ����������+��

���1���+��1����� ����������

'������ ���� �������������������������������������� ����������

-����� �������������������� ���������*���

?� ���%�� ��������������������������������������������������,?"#����������$�

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

-����������������������������� ����������������%����1����� �����������+�

<%

response.write “<HTML>”

response.write “<HEAD>”

response.write “<TITLE> SINTAKSIS ASP MURNI </TITLE>”

response.write “</HEAD>”

response.write “<BODY>”

response.write “TEKS INI DI TULIS MENGUNAKAN SKRIP ASP MURNI”

response.write “<br>”

response.write “Skrip ini menggunakan perintah response.write”

response.write “</BODY>”

response.write “</HTML>”

%>

Page 37: Modul Pemrograman Web I

Sekolah Tinggi Manajemen Informatika & Komputer

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

�������� �������������������������������� � � � �������������������������� ���������33�

email : [email protected], blog : http://tit4ni4.wordpress.com

BAB IX

KONEKSI DATABASE MENGGUNAKAN ASP �

�� -�������+)�+�

>����� ���*��� �� �� ���� ��������� ���� ����� ������ ��� ���*���� �� �� ������� �������� ��

����� ��� � ������ ���*��� �� ������ ����� �������� ��������� �(>('� ���� ��� ����� �����*����

���1���-&8�'����.��� ����������

-�����>���%�� ��%������������� �����������������

����������� ��������������*����-����+�Server.CreateObject(“ADODB.Connection”)

B������������%�������*������������ �����������������������������

�������� �����(>('�

�������� �����*�������*���������������� ��

����������%���

-����+�Server.MapPath(“/dbase/mydata.mdb”)

�����Server.MapPath(“images/gambar1.jpg”)

��� "���"��#���� �������� �+���77����

,���� ���������� (�������� �%%���� ��� ����� ���� ����������� ������ ������ �������

���� ����������� ������ �%%���� �� ����� >����� ������� ��� ����� �� %�������������������������������*���#���*���-�����>���%�$��

���������+�Set Koneksiku = Server.CreateObject(“ADODB.Connection”) ‘ Membuat koneksi baru

Set rsTabel = Server.CreateObject(“ADODB.Recordset”) ‘ Membuat Recordset baru

�<html>

<head>

<title>:: Menampilkan Data ::</title>

<%

‘ Deklarasi Variabel

Dim Koneksi, RecSet, strKoneksi, strSQL

‘ Membuat koneksi database baru

Set Koneksi = Server.CreateObject("ADODB.Connection")

‘ Membuat Recordset baru untuk menampung data/tabel dari server ke memori

Set RecSet = Server.CreateObject("ADODB.Recordset")

‘ Menghubungkan Driver database dengan database

‘ dengan menggunakan koneksi string

strKoneksi = "Provider=Microsoft.Jet.Oledb.4.0; Data Source= "

strKoneksi = strKoneksi + Server.MapPath("mhs.mdb")

‘Membuka koneksi

Koneksi.Open strKoneksi

‘Definisikan field dan tabel yang akan di tampilkan menggunakan SQL statement

strSQL = "SELECT * FROM [DATA PRIBADI MAHASISWA] ORDER BY [DATA PRIBADI MAHASISWA].NPM"

‘ Membuka Data sesuai dengan SQL Statemen dari Data source MHS

RecSet.Open strSQL, Koneksi, 1, 3

%>

</head>

<body>

<CENTER>

DATA PRIBADI MAHASISWA

</CENTER>

<HR>

<%

Page 38: Modul Pemrograman Web I

Sekolah Tinggi Manajemen Informatika & Komputer

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

�������� �������������������������������� � � � �������������������������� ���������34�

email : [email protected], blog : http://tit4ni4.wordpress.com

‘ Mengecek apakah recordset sudah terbuka

‘ jika belum maka akan di buka

If RecSet.State = 0 then RecSet.Open

‘ Memindahkan pointer record ke awal record

RecSet.MoveFirst

‘ Menuliskan Nama fields yang akan di tampilkan

Response.Write “NPM Nama Alamat <br>”

‘ membuat perulangan untuk menampilkan record

DO

‘ Tampilkan Record yang aktif

Response.Write RecSet(“NPM”)&” “& RecSet(“Nama”)& ” “& RecSet(“Alamat”)& “<br>”

‘ Baca record selanjutnya

RecSet.MoveNext

‘ Jika Sudah pada record yang terakhir maka perulangan akan berhenti

Loop Until RecSet.EOF

Response.Write("<hr>")

Response.Write "Total Mahasiswa : "

‘ Menunjukan jumlah record yang berada di dalam tabel Data pribadi Mahasiswa

Response.Write Cstr(RecSet.RecordCount)

‘ Menutup recordset dan koneksi

RecSet.Close

Set RecSet = Nothing

Set Koneksi = Nothing

%>

</body>

</html>

�� ���������� �������� � �������� ������������������� ������������ ���� �������� ����%������� �� ������� ������ �� ��� � ���� ��������� �� ��

������� ���� ��� ������� ���� ��������� ����� �� ��%��

���� ��� ��������������� ���������������������������������(����������������������� ��������� ������������ ���� ������� ���������

��������� ���� ��������� ������ �����������������������%����� ����������+��

��

��

���

<html>

<head>

<title>:: Menampilkan Data ::</title>

<%

Dim Koneksi, RecSet, strKoneksi, strSQL

Set Koneksi = Server.CreateObject("ADODB.Connection")

Set RecSet = Server.CreateObject("ADODB.Recordset")

strKoneksi = "Provider=Microsoft.Jet.Oledb.4.0; Data Source= "

strKoneksi = strKoneksi + Server.MapPath("mhs.mdb")

Koneksi.Open strKoneksi

strSQL = "SELECT * FROM [DATA PRIBADI MAHASISWA]"

RecSet.Open strSQL, Koneksi, 1, 3

%>

</head>

<body>

<CENTER>

DATA PRIBADI MAHASISWA

</CENTER>

<%

Page 39: Modul Pemrograman Web I

Sekolah Tinggi Manajemen Informatika & Komputer

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

�������� �������������������������������� � � � �������������������������� ���������35�

email : [email protected], blog : http://tit4ni4.wordpress.com

If RecSet.State = 0 then RecSet.Open

RecSet.MoveFirst

Response.write "<table width='100%' border='1'>"

Response.write "<tr><td>NPM</td><td>Nama</td><td>Alamat</td></tr>"

DO

Response.write "<tr>"

Response.write "<td>"& RecSet("NPM") &"</td>"

Response.write "<td>"& RecSet("Nama") &"</td>"

Response.write "<td>"& RecSet("Alamat") &"</td>"

Response.Write "</tr>"

RecSet.MoveNext

Loop Until RecSet.EOF

Response.write "<tr><td colspan='3'>"

Response.Write "Total Mahasiswa : "

Response.Write Cstr(RecSet.RecordCount)

Response.write "</td></tr></table>"

RecSet.Close

Set RecSet = Nothing

Set Koneksi = Nothing

%>

</body>

</html>

���

7� "��%%�������-�����*-+"� ����7��-����%���

-����� �� ����� ������� ����� ���������� ������ ���� ��� ����� ��������� ������� 8��������� ��������������� ������������������������������������� �������������'����������� ����� %����� �������� ������ ����� ���� ������� ����� ���������� ���� ��� �������

��������

8��������������

�!���������

�<html>

<head>

<title>:: Hasil Filter Data ::</title>

<%

Dim Koneksi, RecSet, strKoneksi, strSQL

Dim nField, nValue

<html>

<head>

<title>Pemfilteran Data Mahasiswa</title>

</head>

<body>

<center>

<form action="Hasil.asp" method="post">

<p><font face='verdana' size='2' >Filter Berdasarkan Fields : </font>

<select name="namaField" >

<option value="NPM">NPM</option>

<option value="NAMA">NAMA</option>

<option value="ALAMAT">ALAMAT</option>

<option value="KOTA">KOTA</option>

</select>

&nbsp;&nbsp;&nbsp;

<input name="isi" type="text" id="nval">

&nbsp;&nbsp;&nbsp;

<input type="submit" name="Submit" value="Filter">

</p>

</form>

</center>

</body>

</html>

Page 40: Modul Pemrograman Web I

Sekolah Tinggi Manajemen Informatika & Komputer

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

�������� �������������������������������� � � � �������������������������� ���������36�

email : [email protected], blog : http://tit4ni4.wordpress.com

Set Koneksi = Server.CreateObject("ADODB.Connection")

Set RecSet = Server.CreateObject("ADODB.Recordset")

strKoneksi = "Provider=Microsoft.Jet.Oledb.4.0; Data Source= "

strKoneksi = strKoneksi + Server.MapPath("mhs.mdb")

Koneksi.Open strKoneksi

nField = Request.Form("namaField")

nValue = Request.Form("isi")

strSQL = "SELECT * FROM [DATA PRIBADI MAHASISWA] "

strSQL = strSql & " WHERE "& nField &"='" & nValue & "'"

RecSet.Open strSQL, Koneksi, 1, 3

%>

</head>

<body>

<CENTER>

DATA PRIBADI MAHASISWA

</CENTER>

<%

If RecSet.State = 0 then RecSet.Open

RecSet.MoveFirst

Response.write "<table width='100%' border='1'>"

Response.write "<tr><td>NPM</td><td>Nama</td><td>Nama</td><td>Kota</td></tr>"

DO

Response.write "<tr>"

Response.write "<td>"& RecSet("NPM") &"</td>"

Response.write "<td>"& RecSet("Nama") &"</td>"

Response.write "<td>"& RecSet("Alamat") &"</td>"

Response.write "<td>"& RecSet("KOTA") &"</td>"

Response.Write "</tr>"

RecSet.MoveNext

Loop Until RecSet.EOF

Response.write "<tr>"

Response.write "<td colspan='4'>"

Response.Write "Total Mahasiswa yang berasal dari " & nValue & " "

Response.Write Cstr(RecSet.RecordCount) & " Orang."

Response.write "</td></tr></table>"

RecSet.Close

Set RecSet = Nothing

Set Koneksi = Nothing

%>

<a href="formfilter.asp">Filter Data</a>

</body>

</html>

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

Page 41: Modul Pemrograman Web I

Sekolah Tinggi Manajemen Informatika & Komputer

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

�������� �������������������������������� � � � �������������������������� ���������37�

email : [email protected], blog : http://tit4ni4.wordpress.com

BAB X

INPUT DATA DAN UPDATE DATA

DENGAN FORM DI ASP �

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

�� ��%����.%�������������� ����������� �������������� ��������� �� �� ��������%�����*����,�������������� ���� ������������� ������������������������ �� ��������%��� ��������������������������� ����������+�•••• ������������������� ������������������� ����������������� ������������ �����

� �� �� ������������•••• !������ ����� ����� �������� �� ������ ��� ������� ����� ����� ����� ���������� �����

!�������������������������������)����������� ���� �������*���#�������

�%���$������� � ��������� ������������ ���������M����N���

Langkah 1: �������������������� ���������������������������� ��������� �� ��

����� ��� � �� ����������������������%���������� ����������+�

,���� ���� ������� �� ��������� K�%���L � � ����� �������������������� ������ ��������� ��������������� �����������������

Langkah 2 : ��������!���������������

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

�������������������?�U����+�

���1���+�J4��� ����������

8���� (�������� ������� �������������������������� �� �� �����������

S���������� �����%�� �������� �����������������

‘ ----- Tag HTML -----

<form action="inputcek.asp" method="post">

‘ ----- Tag HTML -----

</form>

‘ ----- Tag HTML -----

Halaman tujuan

Type = TextArea

Type = Text

Select Option

Type = Reset

Type = Submit

Page 42: Modul Pemrograman Web I

Sekolah Tinggi Manajemen Informatika & Komputer

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

�������� �������������������������������� � � � �������������������������� ���������38�

email : [email protected], blog : http://tit4ni4.wordpress.com

<%

Response.buffer = true

Dim Koneksi, RecSet, strKoneksi, strSQL

Set Koneksi = Server.CreateObject("ADODB.Connection")

Set RecSet = Server.CreateObject("ADODB.Recordset")

strKoneksi = "Provider=Microsoft.Jet.Oledb.4.0; Data Source= "

strKoneksi = strKoneksi + Server.MapPath("mhs.mdb")

Koneksi.Open strKoneksi

strSQL = "SELECT * FROM [DATA PRIBADI MAHASISWA]"

RecSet.Open strSQL, Koneksi, 1, 3

RecSet.Addnew

RecSet("npm") = Request.QueryString("x1")

RecSet("nama") = Request.QueryString("x2")

RecSet("alamat") = Request.QueryString("x3")

RecSet("kota") = Request.QueryString("x4")

RecSet("tgl_lahir") = Request.QueryString("x5")

RecSet("JK") = Request.QueryString("x6")

RecSet.Update

Recset.Close

Set Recset = Nothing

Set Koneksi = nothing

Response.Redirect("tampil.asp")

%>

����������,?"�

�-���������������������������������+��

Langkah 3 : ��������!��������������� ������������(����

�� �� �������

��������� ��� (����

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

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

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

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

������� (���� ����

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

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

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

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

<% Response.Buffer=True %>

<html>

<head>

<title>Cek Penginputan Data Mahasiswa</title>

<%

Dim t_npm,t_nama,t_alamat

Dim t_kota,t_tgl,t_jkel

t_npm = Request.Form("txtNpm")

t_nama = Request.Form("txtnama")

t_alamat = Request.Form("txtAlamat")

t_kota = Request.Form("txtKota")

t_tgl = Request.Form("txttgl")

t_jkel = Request.Form("jKel")

%>

</head>

<body>

Input Data Mahasiswa :

<hr>

NPM : <%=t_npm%><br>

Nama : <%=t_nama%><br>

Alamat : <%=t_alamat%><br>

Kota : <%=t_kota%><br>

Tanggal Lahir : <%=t_tgl%><br>

Jenis Kelamin :

<%

if t_Jkel = 1 then

response.write “Laki-laki”

else

response.write “Perempuan”

End If

%>

<hr>

<p><a

href="simpan.asp?x1=<%=t_npm%>&x2=<%=t_nama%>&

x3=<%=t_Alamat%>&x4=<%=t_kota%>&x5=<%=t_tgl%>&

x6=<%=t_jkel%>">Simpan</a></p>

</body> </html>

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

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

Page 43: Modul Pemrograman Web I

Sekolah Tinggi Manajemen Informatika & Komputer

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

�������� �������������������������������� � � � �������������������������� ���������39�

email : [email protected], blog : http://tit4ni4.wordpress.com

�����������������������U������

�� �� ���� ����,���� �������� ���� ���� ���� �� �� ����� ����� � ����� ������� �������� ���� ������������ � �������%���� ���� ���������� '������� ��� � ����� ������������%����� �� ���.

�� ���.�� ���� �� �����������

/� �������(������������ ���� �����

1� ������������������������������ ���� ���������

6� �����������%���� ���������������������� ������� ���������7� ������������������ �������� �����������

��������� ������������������.�� ���.�� ���� �������������

�������� ����� ��%����� ����� �� �������� � ������� �%���� �� ������ ��� ������%���� ������������ ���� ������������ �����

%��� �������

Script formedit.asp

<html>

<head>

<title>Form Pengeditan Data Mahasiswa</title>

</head>

<body>

<h1>Pengeditan Data</h1>

<form action="cekedit.asp" method="post">

<table width="337" border="1" cellspacing="0"

cellpadding="0">

<tr>

<td width="125">NPM</td>

<td width="369">

<input name="txtNpm" type="text"

id="txtNpm" value="101970" size="8">

</td>

</tr>

<tr>

<td>Nama Mahasiswa</td>

<td>

<input name="txtNama" type="text"

id="txtNama" size="25">

</td>

</tr>

<tr>

<td colspan="2">

<input type="submit" name="Submit"

value="Submit">

&nbsp;&nbsp;&nbsp;&nbsp;

<input type="reset" name="Reset"

value="Reset">

</td>

</tr>

</table>

</form>

</body>

</html>

<head>

<%

Dim Koneksi, RecSet, strKoneksi, strSQL

Set Koneksi = Server.CreateObject("ADODB.Connection")

Set RecSet = Server.CreateObject("ADODB.Recordset")

strKoneksi = "Provider=Microsoft.Jet.Oledb.4.0; Data Source= "

strKoneksi = strKoneksi + Server.MapPath("mhs.mdb")

Koneksi.Open strKoneksi

strSQL = "SELECT * FROM [DATA PRIBADI MAHASISWA] "

strSQL = strSQL & " WHERE NPM ='" & Request.Form("txtNPM") & "'"

strSQL = strSQL & " and NAMA = '" & Request.Form("txtNama") & "'"

RecSet.Open strSQL, Koneksi, 1, 3

%>

</head>

8�������%�����(����

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

�����������

Page 44: Modul Pemrograman Web I

Sekolah Tinggi Manajemen Informatika & Komputer

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

�������� �������������������������������� � � � �������������������������� ���������40�

email : [email protected], blog : http://tit4ni4.wordpress.com

���������� ��������������������%������

<body>

<% IF RECSET.RECORDCOUNT < 1 THEN %>

IDAK DI TEMUKAN NPM <%=Request.Form("TXTNPM")%>

EGAN NAMA <%=Request.Form("TXTNAMA")%><BR>

<% else %>

<h1><center>Hasil Pencarian</center></h1>

<form action="edit.asp" method="post">

<table width="500" border="1">

<tr>

<td width="143">NPM</td>

<td width="351">&nbsp;

<input name="txtNpm" type="text" id="txtNpm" value="<% Response.write

RecSet("NPM") %>" size="10">

<input type="hidden" name="crNPM" value="<% Response.write RecSet("NPM") %>">

<input type="hidden" name="crNAMA" value="<% Response.write RecSet("NAMA") %>">

</td>

</tr>

<tr>

<td width="143">NAMA</td>

<td width="351">&nbsp;

<input name="txtNama" type="text" id="txtNama" value="<% Response.write

RecSet("NAMA") %>" size="20">

</td>

</tr>

<tr>

<td width="143" valign="top">ALAMAT</td>

<td width="351">&nbsp;

<textarea name="txtAlamat" cols="30" rows="3" id="txtAlamat"><% Response.write

RecSet("ALAMAT") %></textarea>

</td>

</tr>

<tr>

<td width="143">KOTA</td>

<td width="351">&nbsp;

<input name="txtKota" type="text" id="txtKota" value="<% Response.write

RecSet("KOTA") %>" size="10">

</td>

</tr>

<tr>

<td width="143">TANGGAL LAHIR</td>

<td width="351">&nbsp;

<input name="txtTgl" type="text" id="txtTgl" value="<% Response.write

RecSet("TGL_LAHIR") %>" size="10" maxlength="10">

Format tanggal mm/dd/yyyy</td>

</tr>

<tr>

<td width="143">JENIS KELAMIN</td>

<td width="351">&nbsp;

<select name="jKel" id="jKel">

<% if recset("jk")=1 then %>

<option value="1" selected>Laki-laki</option>

<option value="2">Perempuan</option>

<% else %>

<option value="1">Laki-laki</option>

<option value="2" selected>Perempuan</option>

<%end if%>

</select>

</td>

</tr>

</table>

</form>

<br>

<input name="Submit" type="submit" value="Edit">

&nbsp;&nbsp;&nbsp;

<input name="Reset" type="reset" value="Batal">

</form>

<% END IF %>

<a href="FORMEDIT.ASP">CARI LAGI</a>

‘ baris selanjutnya

</body>

<%

RecSet.Close

Set RecSet = Nothing

Set Koneksi = Nothing

%> </html>

Page 45: Modul Pemrograman Web I

Sekolah Tinggi Manajemen Informatika & Komputer

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

�������� �������������������������������� � � � �������������������������� ���������41�

email : [email protected], blog : http://tit4ni4.wordpress.com

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

���.�� ���.��� �����

�� �������

<%

Dim Koneksi, RecSet, strKoneksi, strSQL

Set Koneksi = Server.CreateObject("ADODB.Connection")

Set RecSet = Server.CreateObject("ADODB.Recordset")

strKoneksi = "Provider=Microsoft.Jet.Oledb.4.0; Data Source= "

strKoneksi = strKoneksi + Server.MapPath("mhs.mdb")

Koneksi.Open strKoneksi

Request.Form("isi")

strSQL = "SELECT * FROM [DATA PRIBADI MAHASISWA] "

strSQL = strSQL & " WHERE NPM ='" & Request.Form("crNPM") & "'"

strSQL = strSQL & " and NAMA = '" & Request.Form("crNama") & "'"

RecSet.Open strSQL, Koneksi, 1, 3

RecSet("npm") = Request.Form("txtNPM")

RecSet("nama") = Request.Form("txtNAMA")

RecSet("alamat") = Request.Form("txtALAMAT")

RecSet("kota") = Request.Form("txtKOTA")

RecSet("tgl_lahir") = Request.Form("txtTGL")

RecSet("JK") = Request.Form("JKEL")

RecSet.Update

RecSet.Close

Set RecSet = Nothing

Set Koneksi = Nothing

Response.Redirect("tampil2.asp") %>

Perintah untuk mengupdate

SQL = memfilter data/mencari

data yang sesuai

Page 46: Modul Pemrograman Web I

Sekolah Tinggi Manajemen Informatika & Komputer

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

�������� �������������������������������� � � � �������������������������� ���������42�

email : [email protected], blog : http://tit4ni4.wordpress.com

BAB XI

MENGHAPUS DATA

dan

MEMBUAT VARIABEL SESSION

�� "��%!����� ����

,������������ ������������ �� �� ���������� ������������������������������ �������� �������%���� ��������������'����������� �����������������%����� �����.�� ���.�� ���� �� ����������

/� �������(������������ ���������1� ������������������������������ ���� ���������

6� �����������%���� ���������������������� ������� ���������7� ������������������� �����

"������ ����� ��������� ���� ��������� ��������� ������� ����� ���� ��)�� ���� ��� � ����� ����� ���� ����� �� �� �� ���������� ���� ��� � ����� ������� ���� ��� �������B����� ������ �� ���� �� ����� ���� �� ������ ������� ,���� ������ �������� �������� � �� ����������������������� ��������������+�

/� �������� ������������ ��������

�1� ������������������%�����

��

<a href=”hapus.asp?kriteria=<%=npm%>”> hapus</a>

Page 47: Modul Pemrograman Web I

Sekolah Tinggi Manajemen Informatika & Komputer

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

�������� �������������������������������� � � � �������������������������� ���������43�

email : [email protected], blog : http://tit4ni4.wordpress.com

��

6� ���������� ���� ����������������������������

!���������

�� "�"�����-����������-��>���������������������� ����*���������������B��� ������ ���*����������� ����������%������������ ������������������ ��������*��������������� ���������������������� ����������

"������� ������� ����� ������� ����� �������� ��������� ������ ����������� ����� ����

�������������������� ����������������-������������������������������� ������������ ������������������������������������ ������������������ �������� �����*��������

��������!������"��������

<%

Dim Koneksi, RecSet, strKoneksi, strSQL

Set Koneksi = Server.CreateObject("ADODB.Connection")

Set RecSet = Server.CreateObject("ADODB.Recordset")

strKoneksi = "Provider=Microsoft.Jet.Oledb.4.0; Data Source= "

strKoneksi = strKoneksi + Server.MapPath("mhs.mdb")

Koneksi.Open strKoneksi

strSQL = "SELECT * FROM [DATA PRIBADI MAHASISWA] "

strSQL = strSQL & " WHERE NPM ='" & Request.QueryString("kriteria") & "'"

RecSet.Open strSQL, Koneksi, 1, 3

RecSet.delete

RecSet.Close

Set RecSet = Nothing

koneksi.close

Set Koneksi = Nothing

Response.Redirect("tampil2.asp") %>

Menerima data dari

halaman sebelumnya.

<html>

<head>

<title>Halaman Login</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

</head>

<body>

<center>

<form action="ceklogin.asp" method="post">

<table width="500" border="0" cellspacing="0" cellpadding="0">

<tr align="center" valign="middle">

<td colspan="3" bgcolor="#999999"> <font color="#FFFFFF" size="3"

face="verdana"><strong>Login User</strong></font></td>

</tr>

<tr>

<td width="85" align="right"><font size="2" face="verdana">NIM&nbsp;</font></td>

<td width="201" bgcolor="#DDDDDD"><font size="2" face="verdana">&nbsp;

<input name="txtNim" type="text" id="txtNim" size="8" maxlength="8">

</font></td>

<td width="214" bgcolor="#CCCCCC"><font size="2" face="verdana">&nbsp;-

isi dengan Nim Anda</font></td>

</tr>

<tr>

<td align="right"><font size="2" face="verdana">NAMA&nbsp;</font></td>

<td bgcolor="#DDDDDD"><font size="2" face="verdana">&nbsp;

<input name="txtNama" type="text" id="txtNama" size="25" maxlength="25">

</font></td>

<td bgcolor="#CCCCCC"><font size="2" face="verdana">&nbsp;- isi dengan

Nama Anda</font></td>

</tr>

<tr align="center" bgcolor="#999999">

<td colspan="3"><input type="submit" name="Submit" value="Login"></td>

</tr>

</table>

</form>

</center>

</body>

</html>

Page 48: Modul Pemrograman Web I

Sekolah Tinggi Manajemen Informatika & Komputer

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

�������� �������������������������������� � � � �������������������������� ���������44�

email : [email protected], blog : http://tit4ni4.wordpress.com

���������

���

���

��

��

��

���

���

��

���

����

��

���

��

<% Response.Buffer=true %>

<html>

<head>

<title> .:: Menu ::. </title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

</head>

<body>

<center>

<table width="400" border="0" cellspacing="0" cellpadding="0">

<tr align="center">

<td colspan="3" bgcolor="#EEEEEE"><font size="1" face="verdana">NIM

:<%=Session("sNIM")%><br>

Nama :<%=Session("sNama")%></font><font size="1"

face="verdana">&nbsp;</font><font size="2" face="verdana"><br>

</font> <hr></td>

</tr>

<tr>

<td colspan="3" bgcolor="#999999"><font size="2" face="verdana">&nbsp;</font>

</td>

</tr>

<tr bgcolor="#DDDDDD">

<td colspan="2"><font size="2" face="verdana">Operasi Database</font></td>

<td width="163"><font size="2" face="verdana">&nbsp;</font></td>

</tr>

<tr bgcolor="#DDDDDD">

<td colspan="3"> <hr noshade></td>

</tr>

<tr bgcolor="#DDDDDD">

<td width="207"><font size="2" face="verdana"> Lihat Tabel Mahasiswa</font></td>

<td width="30"><font size="2" face="verdana">&nbsp;</font></td>

<td><font size="2" face="verdana">&nbsp;</font></td>

</tr>

<tr bgcolor="#DDDDDD">

<td><font size="2" face="verdana">Input Data</font></td>

<td><font size="2" face="verdana">&nbsp;</font></td>

<td><font size="2" face="verdana">&nbsp;</font></td>

</tr>

<tr bgcolor="#DDDDDD">

<td><font size="2" face="verdana">Edit Data Mahasiswa</font></td>

<td><font size="2" face="verdana">&nbsp;</font></td>

<td><font size="2" face="verdana">&nbsp;</font></td>

</tr>

<tr bgcolor="#DDDDDD">

<td><font size="2" face="verdana">Hapus Data Mahasiswa</font></td>

<td><font size="2" face="verdana">&nbsp;</font></td>

<td><font size="2" face="verdana">&nbsp;</font></td> </tr>

&���������������

�����2���

&��������������������2����

Page 49: Modul Pemrograman Web I

Sekolah Tinggi Manajemen Informatika & Komputer

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

�������� �������������������������������� � � � �������������������������� ���������45�

email : [email protected], blog : http://tit4ni4.wordpress.com

��

��

���

���

��

��

��

���

���

Hasil pengiriman Variable

Session dari Halaman Login.asp

<tr bgcolor="#DDDDDD">

<td colspan="3" bgcolor="#999999">&nbsp;</td>

</tr>

</table>

</center>

</body>

Page 50: Modul Pemrograman Web I

Sekolah Tinggi Manajemen Informatika & Komputer

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

�������� �������������������������������� � � � �������������������������� ���������46�

email : [email protected], blog : http://tit4ni4.wordpress.com

�Ref:

Kurniawan, Andy, Belajar Sendiri Microsoft Active Server Pages, PT. Elex Media Komputindo Jakarta 2000

����+))�������������� ) Lenawati, Mei, Mahir dalam 7 hari Macromedia Dreamweaver 8 dengan PHP, Andi Offset Yogyakarta 2007