BAB IV.docx _12174Kb_ - Universitas Gunadarma

Document Sample
BAB IV.docx _12174Kb_ - Universitas Gunadarma Powered By Docstoc
					                                      BAB IV

                      ANALISA DAN PEMBAHASAN



4.1 Penelitian Awal

       Penelitian awal dilakukan untuk melakukan analisa terhadap kebutuhan

pengguna dalam hal ini mahasiswa akan suatu situs pembelajaran berbasis web yang

lebih baik. Penelitian dilakukan dengan menyebarkan kuesioner kepada responden

untuk melihat respon yang diberikan terhadap situs yang telah ada sebelumnya

http://cai.gunadarma.ac.id. Tentang metodologi penelitian, variabel dan indikator

yang digunakan dapat dilihat pada bagian 3 atau metodologi penelitian pada

penulisan ini.



4.1.1 Hasil Analisa Deskriptif Penilitian Awal

       Hasil dari penelitian dengan tiga puluh responden yang kesemuanya adalah

mahasiswa Universitas Gunadarma dipresentasikan dengan menggunakan analisa

deskriptif. Keempat indikator, kualitas dan kompatibilitas situs, kualitas tampilan,

penyajian materi dan interaksi pemakai akan dianalisa terlebih dahulu menggunakan

tabel distribusi frekuensi seperti pada tabel 4.1 untuk indikator kualitas dan

kompatibilitas, tabel 4.2 untuk indikator kualitas tampilan, tabel 4.3 untuk indikator

penyajian materi, dan tabel 4.4 untuk indikator interaksi pemakai.




                                         112
                                                                                        113




       Tabel 4.1 Distribusi Frekuensi Indikator A (Kualitas dan Kompatibilitas)

        Tidak Baik     Kurang Baik        Netral          Baik     Sangat Baik       TOTAL
        F    % Valid   F   % Valid   F     % Valid   F    % Valid F    % Valid   F    % Valid
KK1     1      3,3% 10      33,3%     9      30,0%    7    23,3%   3    10,0%  30       100%
KK2     1      3,3% 4       13,3%     7      23,3%   15    50,0%   3    10,0%  30       100%
KK3                  6      20,0%    11      36,7%   11    36,7%   2     6,7%  30       100%
KK4     1      3,3% 3       10,0%    11      36,7%   12    40,0%   3    10,0%  30       100%
KK5                  2       6,7%     9      30,0%   14    46,7%   5    16,7%  30       100%
KK6     1      3,3% 4       13,3%     8      26,7%   11    36,7%   6    20,0%  30       100%
KK7                  3      10,0%    16      53,3%    9    30,0%   2     6,7%  30       100%
KK8                  1       3,3%    12      40,0%   14    46,7%   3    10,0%  30       100%
KK9                  3      10,0%    20      66,7%   16    20,0%   1     3,3%  40       100%
KK10    1      3,3% 2        6,7%    22      73,3%    5    16,7%               30       100%
KK11    1      3,3% 1        3,3%    14      46,7%   12    46,7%   2      6,7% 30       107%
KK12                 2       6,7%     5      16,7%   21    70,0%   2      6,7% 30       100%
KK13                 2       6,7%     9      30,0%   17    56,7%   2      6,7% 30       100%
KK14    1      3,3% 7       23,3%    17      56,7%    5    16,7%               30       100%
 Sumber: Data yang telah diolah



            Pada tabel distribusi frekuensi terlihat sebagian besar responden berpendapat

 bahwa kinerja situs dalam hal kualitas dan kompatibilitas terbilang baik. Pada

 variabel KK2 (kemudahan akses dalam browser) sebanyak 50% responden menjawab

 baik yang berarti situs dapat terakses dengan mudah. Serta pada variabel KK12

 (penyajian informasi) situs memperoleh hasil yang baik dengan 70% responden

 menjawab baik pada variabel tersebut. Pada variabel KK10 (akses web dengan

 menggunakan Opera) 73,3% berpendapat netral, hal ini dikarenakan browser Opera

 mempunyai pengguna yang tidak sampai 3% diseluruh dunia dibandingkan dengan

 Internet Explorer atau Firefox yang mempunyai persentase pengguna di atas 40%.
                                                                                           114




Hal itu pula yang mendasari pengujian situs menggunakan browser Firefox dan

Internet Explorer. Kesimpulan yang dapat diambil dari hasil analisa indikator kualitas

dan kompatibilitas bahwa situs web telah mempunyai kualitas yang cukup baik tetapi

masih terdapat kekurangan pada kompatibilitas dengan beberapa browser yang

beredar.

     Tabel 4.2 Analisa Deskriptif Indikator A (Kualitas dan Kompatibilitas)

                       N    Range    Minimum    Maximum    Mean    Std. Deviation   Variance
  KK1                  30        4          1          5    3,03            1,066       1,137
  KK2                  30       4          1           5    3,50            ,974        ,948
  KK3                  30       3          2           5    3,30            ,877        ,769
  KK4                  30       4          1           5    3,43            ,935        ,875
  KK5                  30       3          2           5    3,73            ,828        ,685
  KK6                  30       4          1           5    3,57           1,073       1,151
  KK7                  30       3          2           5    3,33            ,758        ,575
  KK8                  30       3          2           5    3,63            ,718        ,516
  KK9                  30       3          2           5    3,17            ,648        ,420
  KK10                 30       3          1           4    3,03            ,615        ,378
  KK11                 30       4          1           5    3,43            ,817        ,668
  KK12                 30       3          2           5    3,77            ,679        ,461
  KK13                 30       3          2           5    3,63            ,718        ,516
  KK14                 30       3          1           4    2,87            ,730        ,533
  Valid N (listwise)   30
Sumber: Data yang telah diolah



         Dari tabel analisa deskriptif dapat dilihat bahwa pada indikator kualitas dan

kompatibilitas kecederungan jawaban responden adalah adalah berkisar pada jawaban

netral dan baik. Kejadian ini dapat dilihat dari rata-rata variabel pada indikator

kualitas dan kompatibilitas berkisar antar 2,87 hingga 3,73 yang mendekati skala

jawaban baik (4) dan netral (3).
                                                                                                  115




           Tabel 4.3 Ditribusi Frekuensi Indikator B (Kualitas Tampilan)

      Tidak Baik     Kurang Baik         Netral             Baik       Sangat Baik        TOTAL
      F    % Valid   F    % Valid   F     % Valid   F        % Valid   F   % Valid   F     % Valid
KT1   2       6,7%   6     20,0%    11      36,7%   11         36,7%                 30       100%
KT2   1       3,3%   2       6,7%   6       20,0%   20         66,7%   1     3,3%    30       100%
KT3   2       6,7%   5     16,7%    8       26,7%   12         40,0%   3    10,0%    30       100%
KT4   1       3,3%   10    33,3%    11      36,7%       7      23,3%   1     3,3%    30       100%
KT5   2       6,7%   7     23,3%    7       23,3%   12         40,0%   2     6,7%    30       100%
KT6                  6     20,0%    15      50,0%       8      26,7%   1     3,3%    30       100%
KT7   1       3,3%   5     16,7%    14      46,7%       8      26,7%   2     6,7%    30       100%
Sumber: Data yang telah diolah



          Pada tabel distribusi frekuensi indikator kualitas tampilan situs hanya

memperoleh hasil yang biasa saja, pada variabel KT1 (petunjuk penggunaan situs),

KT4 (penggunaan animasi), KT6 (kejelasan suara dan narasi), dan KT7 (musik yang

digunakan) antara 20,0% hingga 50% responden menjawab netral, yang berarti dalam

segi tampilan situs masih membutuhkan perbaikan. Pada variabel KT2 (tingkat

keterbacaan teks) 66,7% responden mempunyai persepsi yang cukup baik. Dapat

diambil sebuah kesimpulan dari distribusi untuk indikator kualitas dan tampilan,

kesimpulan yang dapat ditarik adalah situs membutuhkan perbaikan dalam hal

tampilan pada setiap halamannya dan perbaikan narasi.
                                                                                                             116




            Tabel 4.4 Analisa Deskriptif Indikator B (Kualitas Tampilan)

                       N     Range         Minimum      Maximum       Mean     Std. Deviation       Variance
  KT1                  30         3               1           4        3,03              ,928            ,861
  KT2                  30             4            1            5      3,60             ,814            ,662
  KT3                  30             4            1            5      3,30            1,088           1,183
  KT4                  30             4            1            5      2,90             ,923            ,852
  KT5                  30             4            1            5      3,17            1,085           1,178
  KT6                  30             3            2            5      3,13             ,776            ,602
  KT7                  30             4            1            5      3,17             ,913            ,833
  Valid N (listwise)   30
 Sumber: Data yang telah diolah

          Pada analisa deskriptif indikator kualitas tampilan hal serupa pada uji analisa

deskriptif sebelumnya terjadi kembali. Kecenderungan mahasiswa menjawab pada

skala netral (3). Dapat dilihat dari rata-rata yang didapat 2.90 hingga 3.60 yang

berarti kecenderungan mahasiswa menjawab netral.



            Tabel 4.5 Distribusi Frekuensi Indikator C (Penyajian Materi)

        Tidak Baik     Kurang Baik             Netral               Baik       Sangat Baik           TOTAL
      F     % Valid    F    % Valid       F     % Valid     F       % Valid    F   % Valid      F      % Valid
PM1                    5     16,7%        8        26,7%   17          56,7%                    30       100%
PM2   1       3,3%     5     20,0%        7        43,3%   17          56,7%                    30       123%
PM3   1       3,3%     3     10,0%        10       33,3%   14          46,7%   2      6,7%      30       100%
PM4   1       3,3%     3     10,0%        11       36,7%   15          50,0%                    30       100%
PM5                    3     10,0%        10       33,3%   17          56,7%                    30       100%
PM6                    3     10,0%        13       43,3%   13          43,3%   1      3,3%      30       100%
PM7                    3     10,0%        13       43,3%   13          43,3%   1      3,3%      30       100%
PM8                                       11       36,7%   15          50,0%   4     13,3%      30       100%
Sumber: Data yang telah diolah

          Hasil dari tabel distribusi frekuensi menunjukkan menunjukkan 43,3% hingga

56,7% responden menjawab baik pada setiap variabel dari indikator penyajian materi.
                                                                                          117




Dengan sebagian besar sisa responden 26,7% hingga 43,3% menjawab netral, hal ini

menunjukkan bahwa kinerja situs dalam hal penyajian materi sudah baik. Variabel

dengan kinerja paling baik adalah variabel PM1 (kejelasan tujuan pembelajaran) dan

PM2 (kejelasan petunjuk penggunaan modul) sebesar 56,7%. Dari hasil ini maka

situs yang dibuat tidak akan ada perubahan materi dari situs yang telah ada

sebelumnya, hanya ada penambahan beberapa materi yang belum tersedia.



          Tabel 4.6 Analisa Deskriptif Indikator C (Penyajian Materi)

                       N    Range    Minimum    Maximum   Mean    Std. Deviation   Variance
  PM1                  30        2          2         4    3,40             ,770        ,593
  PM2                  30       3          1          4    3,33            ,884        ,782
  PM3                  30       4          1          5    3,43            ,898        ,806
  PM4                  30       3          1          4    3,33            ,802        ,644
  PM5                  30       2          2          4    3,47            ,681        ,464
  PM6                  30       3          2          5    3,40            ,724        ,524
  PM7                  30       3          2          5    3,40            ,724        ,524
  PM8                  30       2          3          5    3,77            ,679        ,461
  Valid N (listwise)   30
 Sumber: Data yang telah diolah



        Hasil analisa deskriptif pada indikator penyajian materi menunjukkan bahwa

kecenderungan para responden menjawab netral (3) dan baik (4), dengan

kecenderungan lebih banyak pada jawaban baik. Hal digambarkan oleh rata-rata

jawaban responden pada setiap variabel di dalam indikator penyajian materi berkisar

antara 3,33 hingga 3,77. Dapat disimpulkan sesuai dengan data analisa deskriptif dan

distribusi frekuensi bahwa materi yang terdapat pada situs sudah memiliki kinerja

yang baik.
                                                                                                 118




            Tabel 4.7 Distribusi Frekuensi Indikator D (Interaksi Pemakai)

       Tidak Baik      Kurang Baik        Netral           Baik       Sangat Baik        TOTAL
       F     % Valid   F   % Valid   F     % Valid    F    % Valid    F   % Valid   F     % Valid
IP1    1       3,3%    3    10,0%    10       33,3%   11      36,7%   5    16,7%    30      100%
IP2                    6    20,0%    9        30,0%   13      43,3%   2     6,7%    30      100%
IP3                    3    10,0%    7        23,3%   18      60,0%   2     6,7%    30      100%
IP4                    1     3,3%    12       40,0%   15      50,0%   2     6,7%    30      100%
IP5                    4    13,3%    12       40,0%   12      40,0%   2     6,7%    30      100%
IP6    1       3,3%    7    23,3%    10       33,3%   9       30,0%   3    10,0%    30      100%
IP7    1       3,3%    5    16,7%    13       43,3%   10      33,3%   1     3,3%    30      100%
IP8                    7    23,3%    10       33,3%   11      36,7%   2     6,7%    30      100%
IP9                    6    20,0%    11       36,7%   11      36,7%   2     6,7%    30      100%
IP10                   5    16,7%    12       40,0%   12      40,0%   1     3,3%    30      100%
IP11   1       3,3%    8    26,7%    8        26,7%   13      43,3%                 30      100%
IP12                   8    26,7%    9        30,0%   11      30,0%   2     6,7%    30       93%
Sumber: Data yang telah diolah



           Tabel distribusi frekuensi untuk indikator interaksi pemakai menunjukkan

30,0% hingga 60% responden berpendapat baik pada variabel yang terdapat pada

indikator interaksi pemakai dengan sisanya 23,3% hingga 43,3% berpendapat netral.

Pada variabel seperti variabel IP3 (urutan tampilan) sebanyak 60% berpendapat

bahwa urutan tampilan sudah dapat disajikan dengan baik. Begitu juga dengan

variabel IP4 (menu pilihan) sebanyak 50% responden berpendapat situs telah

memiliki menu pilihan yang dapat berfungsi dengan baik. Kontras pada variabel IP7

(panduan cerdas) sebanyak 43,3% responden menjawab netral yang berarti situs

masih membutuhkan panduan cerdas yang dapat membantu pengguna.
                                                                                        119




            Tabel 4.8 Analisa Deskriptif Indikator D (Interaksi Pemakai)

                       N    Range   Minimum   Maximum   Mean    Std. Deviation   Variance
  IP1                  30       4         1         5    3,53            1,008      1,016
  IP2                  30       3         2         5    3,37             ,890       ,792
  IP3                  30       3         2         5    3,63             ,765       ,585
  IP4                  30       3         2         5    3,60             ,675       ,455
  IP5                  30       3         2         5    3,40             ,814       ,662
  IP6                  30       4         1         5    3,20            1,031      1,062
  IP7                  30       4         1         5    3,17             ,874       ,764
  IP8                  30       3         2         5    3,27             ,907       ,823
  IP9                  30       3         2         5    3,30             ,877       ,769
  IP10                 30       3         2         5    3,30             ,794       ,631
  IP11                 30       3         1         4    3,10             ,923       ,852
  IP12                 30       3         2         5    3,23             ,935       ,875
  Valid N (listwise)   30
Sumber: Data yang telah diolah



         Hasil analisa deskriptif pada indikator interaksi pemakai menunjukkan bahwa

kecenderungan para responden menjawab netral (3) dan baik (4), dengan

kecenderungan lebih banyak pada jawaban baik. Hal digambarkan oleh rata-rata

jawaban responden pada setiap variabel di dalam indikator penyajian materi berkisar

antara 3,10 hingga 3,67. Dapat disimpulkan sesuai dengan data analisa deskriptif dan

distribusi frekuensi bahwa situs telah memiliki tampilan yang dapat berinteraksi

dengan pemakai yang cukup baik.



4.1.2 Kesimpulan Penelitian Awal

         Dari hasil analisa deskriptif yang telah dilakukan pada data yang diperoleh

dari kuesioner dapat ditarik suatu kesimpulan yang berkenaan dengan kinerja dari

situs. Secara keseluruhan kinerja situs sudah dapat dibilang memberikan kinerja yang
                                                                                120




diharapkan dan mempunyai fungsi sesuai yang diharapkan. Dengan indikator kualitas

dan kompatibilitas serta penyajian materi memberikan kinerja yang baik, tetapi

dengan catatan pada indikator kualitas tampilan dan interaksi pemakai.

       Pada indikator kualitas dan kompatibilitas serta penyajian materi memberikan

kinerja yang memuaskan, hal tersebut dapat dilihat dengan kecenderungan responden

berpendapat baik pada beberapa variabel di dalam indikator kualitas dan

kompatibilitas serta berpendapat baik pada hampir semua variabel di dalam indikator

penyajian materi. Sedangkan pada indikator kualitas tampilan dan interaksi pemakai,

situs menunjukkan kinerja yang biasa saja, dengan sebagian besar responden memilih

untuk berpendapat netral pada hampir semua variabel yang terdapat pada kedua

indikator tersebut.

       Dengan hasil tersebut dapat diasumsikan bahwa mahasiswa membutuhkan

suatu situs pembelajaran berbasis web dengan tampilan dan interaksi pemakai yang

lebih baik daripada situs sebelumnya tetapi dengan tidak merubah isi dari situs yang

telah ada.



4.2 Pembuatan Model Umum dari Situs

       Pembelajaran elektronik berbasis web ini dibuat dengan ide untuk

memberikan kepada siswa suatu mekanisme pembelajaran elektronik di mana siswa

dapat mempelajari suatu mata kuliah sesuai dengan kemampuannya sendiri, dengan

menggunakan berbagai macam media, tulisan, audio, ataupun video. Situs

pembelajaran elektronik ini juga dibuat untuk mempermudah proses pemahaman
                                                                                        121




mata kuliah, sehingga membantu meringankan beban pengajar dalam menyampaikan

materi perkuliahan, bukan menggantikan peran pengajar dalam penyampain materi.

       Sebelum suatu situs pembelajaran elektronik dibuat, terlebih dahulu harus

dibuat sebuah model, dalam hal ini yang dibuat adalah model konseptual. Model akan

dibuat dengan menggunakan UML dengan diagram paket, yang mendefiniskan fungsi

apa saja yang nantinya akan diimplementasikas pada situs.




      Fungsi Manajemen                Pustaka Media                Pembelajaran
         Pengguna                     Pembelajaran              Multimedia Interaktif




                                         Situs Pembelajaran
                                      Elektronik Berbasis Web




        Interaksi Sinkron                                         Interaksi Asinkron
     (Live Chat, Video Chat)                                     (Blog, Wiki, Forum)




                           Gambar 4.1 Model Umum Dari Situs


       Secara umum dapat dilihat dari Gambar 4.1, situs pembelajaran elektronik

berbasis web terdiri dari lima fungsi pendukung lainnya, fungsi tersebut meliputi

manajemen pengguna, pustaka media pembelajaran, pembelajaran multimedia
                                                                              122




interkaktif, interaksi asinkron, dan interaksi sinkron. Fungsi tersebut merupakan

fungsi yang saling terintegrasi dalam situs pembelajaran elektronik.

       Fungsi manajemen pengguna adalah suatu mekanisme pengendalian yang

dimiliki situs untuk memanajemen penggunaan situs. Manajemen pengguna

dilakukan dengan mengintegrasikan fasilitas pembuatan akun pengguna serta akses

penggunaan situs menggunakan akun pengguna. Fungsi ini diintegrasikan pada situs

sebagai pengamanan situs dengan menggunakan otentikasi berbasis form.

       Fungsi berikutnya adalah fungsi pustaka media pembelajaran yang merupakan

suatu fungsi untuk melakukan penyimpanan pada modul pembelajaran yang

berbentuk dokumen elektronik. Fungsi ini memungkinkan pengguna situs untuk

mengunduh modul pembelajaran berbasis dokumen elektronik.

       Fungsi pembelajaran multimedia interaktif merupakan fungsi kunci dari situs

ini. Pada fungsi ini terdapat sarana pembelajaran berbasis web dengan menggunakan

berbagai macam media seperti suara dan video serta aplikasi multimedia interaktif

berbasis flash. Dengan adanya multimedia interaktif para pengguna dapat

mendapatkan pembelajaran yang lebih intuitif dibanding dengan pembelajaran biasa

pada umunya, hal tersebut dikarenakan aplikasi multimedia interaktif yang ada

menekankan pada interaksi antara manusia dengan komputer dalam hal ini komputer

sebagai alat bantu ajar.

       Situs pembelajaran berbasis web ini juga dilengkapi denga piranti interaksi

atau komunikasi antar penggunanya, komunikasi dalam situs ini dikelompokkan

menjadi dua, komunikasi sinkron dan komunikasi asinkron. Komunikasi sinkron
                                                                                 123




merupakan komunikasi secara langsung antar pengguna dimana komunikasi terjadi

ketika dua atau lebih pengguna berinteraksi secara langsung tanpa adanya perantara.

Komunikasi jenis ini dimungkinkan dengan menggunakan percakapan langsung

dengan piranti lunak pengirim pesan, ataupun dengan menggunakan percakapan teks

atapun video. Komunikasi sinkron tidak diterapkan pada model fisik situs yang telah

dibuat karena keterbatasan alat pengembangan.

       Jenis komunikasi yang kedua adalah komunikasi asinkron dimana pengguna

dapat berinteraksi satu sama lain dengan tidak langsung atau melalui media perantara.

Media perantara dalam hal ini dapat berupa forum diskusi, blog, atau wiki yang

memungkinkan pengguna saling berinteraksi melalui piranti tersebut.



4.3 Perancangan Aplikasi Dengan UML

       Pada proses perancangan situs pembelajaran elektronik ini dibuat rancangan

dari web dengan menggunakan lima jenis diagram. Adapun kelima diagram tersebut

adalah, diagram use case, diagram aktifitas, diagram sekuens, diagram kelas, diagram

komponen, dan diagram implementasi. Diagram use case digunakan untuk untuk

mendeskripsikan fungsionalitas yang nantinya akan dihasilkan oleh situs, sedangkan

diagram aktifitas, digunakan untuk menggambarkan alur aktifitas atau kegiatan dari

pengguna situs dengan penggambaran secara visual.

       Selain kedua diagram yang telah dijelaskan secara singkat, proses

perancangan aplikasi ini juga menggunakan diagram sequence dan kelas, diagram

sekuens digunakan untuk menggambarkan interkasi antar objek di dalam atau di
                                                                                                                             124




sekitar situs yang dibuat, yang berdasar kepada suatu urutan waktu, sedangkan

diagram kelas digunakan untuk mendefinisikan objek-objek yang nantinya akan

digunakan dalam pembuatan situs. Diagram komponen akan digunakan untuk

menggambarkan struktur dan hubungan antara komponen piranti lunak dan

ketergantungan diantaranya. Diagram implementasi digunakan untuk memvisualisasi

bagaimana nantinya situs diimplementasi dalam sebuah infrastruktur web. Untuk

penjelasan lebih lanjut untuk setiap diagramnya akan dibahas pada pembahasan

selanjutnya.



4.3.1 Diagram Use Case Fungsionalitas Umum




                                        Administrator


                                                                     Situs Web

                                      Akses Masuk Situs
                                                                                                        Interaksi Sinkron
                                                                                                        Antar Pengguna
                                                       <<include>>
        Pengguna Akhir                                                                    <<include>>
                                                              Situs Pembelajaran
                                                                   Elektronik
                                      <<include>>
                                                                                                        Interaksi Asinkron
                                                                                      <<include>>
                                                                                                         Antar Pengguna
                                                <<include>>
                         Registrasi
                                                                        <<include>>



                                                    Pustaka Modul                   Pembelajaran
                                                    Pembelajaran                  Multimedia Interaktif




                    Gambar 4.2 Fungsionalitas Sistem Secara Umum
                                                                               125




         Use case fungsionalitas secara umum menggambarkan proses besar yang

terjadi pada situs. Situs pembelajaran elektronik ini mempunyai enam proses besar

dengan dua proses yang merupakan proses otentikasi pengguna, yaitu proses yang

terjadi pada usecase registrasi dan usecase melakukan akses masuk dan empat

usecase lainnya yang merupakan usecase dari fungsi yang terdapat pada situs. Dua

aktor, pengguna akhir dan administrator akan melakukan akses masuk terlebih dahulu

sebelum masuk ke dalam situs jika mereka sudah terdaftar. Jika kedua aktor tersebut

belum terdaftar maka aktor anak diarahkan pada usecase registrasi, proses lengkap

dapat dilihat pada diagram aktifitas dan usecase untuk proses registrasi dan akses

masuk.

         Ketika aktor sudah masuk ke dalam situs barulah aktor dapat menggunakan

empat fungsi lainnya yang terdapat pada situs yaitu pustaka modul pembelajaran

dimana pengguna akhir dapat mencari dan mengunduh modul pembelajaran yang

tersedia pada situs, pembelajaran interaktif yang memungkinkan pengguna

berinteraksi dengan materi yang dipelajarinya, serta interaksi sinkron dan asinkron

antar pengguna.



4.3.1.1 Diagram Use Case Registrasi dan Akses Masuk

         Pada proses registrasi dan akses masuk terdapat lima kegiatan yang akan

dilakukan oleh kedua aktor, pengguna akhir dan administrator. Pengguna akhir

diharuskan melakukan kegiatan registrasi terlebih dahulu sebelum melakukan akses

masuk ke situs jika dan hanya jika pengguna belum mempunyai akun pengguna
                                                                                           126




sebelumnya. Jika pengguna telah mempunyai akun pengguna sebelumnya maka

pengguna dapat melakukan akses masuk terhadap situs tanpa harus melakukan

registrasi yang termasuk proses verifikasi akun pengguna.

       Proses registrasi merupakan satu kesatuan kegiatan antara pengisian data

pengguna dan pemberian akun pengguna serta notifikasi. Pengguna akhir akan

melakukan registrasi yang diikuti dengan pengisian data dan pengiriman akun

pengguna yang dikirim bersamaan dengan notifikasi kepada pengguna akhir,

notifikasi juga dikirimkan kepada administrator agar administrator mendapatkan

informasi tentang pengguna akhir yang telah melakukan proses registrasi.




                  Melakukan
                  Registrasi


                                      Melakukan Akses
                                           Masuk                           Administrator


                                                           <<include>>


                        <<include>>

                                                         Verifikasi Akun
                                                           Pengguna

                 Mengisi Data
                  Pengguna

                                        Pengguna Akhir


                        <<include>>




                                          <<include>>
              Mendapatkan Akun
                 Pengguna                                           Notifikasi




          Gambar 4.3 Diagram Use Case Registrasi dan Akses Masuk
                                                                                            127




4.3.1.2 Diagram Use Case Pustaka Modul Pembelajaran



                                                 Situs Web
                               Registrasi




                                                                  Situs Pembelajaran
                           Akses Masuk Situs
                                                                       Elektronik



                                                                <<include>>
          Pengguna Akhir



                                                                     Pustaka Modul
                                                                     Pembelajaran
                                               <<include>>



                                                                              <<include>>



           Administrator                            «extends»
                             Memilih Materi                       Mengunduh Modul
                           Modul Pembelajaran                      Pembelajaran




         Gambar 4.4 Diagram Use Case Pustaka Modul Pembelajaran

       Dapat dilihat dari usecase untuk pustaka modul pembelajaran bahwa untuk

setiap fungsi dalam situs pembelajaran hanya dapat diakses dengan melakukan

kegiatan akses masuk situs. Setelah pengguna akhir masuk ke dalam situs, pengguna

akhir akan diberikan akses terhadap fungsi pustaka modul pembelajaran yang di

dalamnya terdapat fungsi untuk memilih materi modul pembelajaran dan mengunduh

modul pembelajaran.
                                                                                                                     128




4.3.1.3 Diagram Use Case Pembelajaran Interaktif

                                                         Situs Web

                                                        Registrasi




           Pengguna Akhir
                                                                                          Situs Pembelajaran
                                                   Akses Masuk Situs
                                                                                               Elektronik

                                                                                        <<include>>




            Administrator                                                   <<include>>
                                                        Aplikasi                            Pembelajaran
                                                  Multimedia Interaktif                   Multimedia Interaktif


                                    <<include>>
                                                              <<include>>                              <<include>>



                            Memilih Aplikasi         Berinteraksi
                                                                                           Video Streaming
                              Interaktif            Dengan Aplikasi



                                                                                                      <<include>>
                                                                          <<include>>


                                                     Menerima Layanan                      Memilih Konten
                                                      Streaming Video                      Streaming Video




             Gambar 4.5 Diagram Use Case Pembelajaran Interaktif



       Diagram usecase pembelajaran interaktif diatas menggambarkan bagaimana

fungsionalitas yang diharapkan dari situs web dalam memberikan pembelajaran

interaktif kepada pengguna. Seperti pada usecase sebelumnya setiap fungsi dari situs

hanya dapat diakses melalui proses akses masuk dengan menggunakan akun

pengguna. Setelah pengguna masuk ke dalam situs pengguna dapat menggunakan
                                                                              129




fungsi pembelajaran multimedia yang termasuk aplikasi multimedia interaktif dan

pembelajaran multimedia interaktif di dalamnya.

       Usecase dari fungsi aplikasi multimedia interaktif mempunyai dua usecase di

dalamnya, yaitu usecase untuk pemilihan aplikasi interaktif dan usecase interaksi

dengan aplikasi interaktif. Pada usecase tersebut pengguna akhir dapat memilih

aplikasi interaktif apa yang diinginkan dan berinteraksi dengan aplikasi tersebut.

Usecase video streaming merupakan usecase dimana pengguna dapat melakukan

permintaan terhadap situs untuk medapatkan konten video melalui http streaming.

Usecase video streaming mempunyai dua usecase lain yang terdapat didalamnya

yaitu usecase menerima layanan streaming video, keadaan dimana pengguna akhir

telah menerima layanan streaming video dan usecase memilih konten streaming

video dimana pengguna dapat memilih konten video apa yang diinginkan sebelum

meminta konten tersebut.



4.3.1.4 Diagram Use Case Interaksi Pengguna

       Diagram usecase interaksi pengguna menggambarkan fungsionalitas situs

dalam memberikan layanan interkasi antar pengguna situs. Ketika pengguna telah

masuk ke dalam situs, pengguna dapat berinteraksi antar sesamanya dengan

menggunakan dua fungsi interaksi, fungsi interaksi sinkron dan asinkron. Fungsi

interaksi asinkron dalam pembahasan ini lebih ditekankan karena fungsi interaksi

asinkron merupakan fungsi yang diterapkan pada model fisik yang dikembangkan

pada situs.
                                                                                                                                                                    130




                                                                                                                  Administrator
                                                                               Situs Web

                                                              Registrasi




        Pengguna Akhir
                                                                                                                                  Situs Pembelajaran
                                                          Akses Masuk Situs
                                                                                                                                       Elektronik

                                                                                      Registrasi Blog




                                                                                                                                                      <<include>>
                                                                                «extends»




                                                                    Permohonan                                  Komentar Pada Post
                         Registrasi Forum                          Registrasi Blog          <<
                                                                                              inc
                                                                                                    lud
                                                                                                          e>
                                                                                                            >
                                                                                                                              <<include>>
                              <<include>>




                                                                                            <<include>>
                                                             Post Blog Baru                                            Blog




                                                                                                                                        <<include>>
                                                 Post Topik Baru              Memberikan
                                                                           Komentar Pada Post

                                            <<include>>



                                                                 <<include>>
                                                                                     <<include>>
                          Forum Diskusi                                                                                           Interaksi Asinkron




                  Gambar 4.6 Diagram Use Case Interaksi Pengguna



       Pengguna dapat menggunakan fungsi interaksi asinkron untuk berinteraksi

dengan pengguna lainnya menggunakan dua usecase lain yang merupakan bagian dari

interaksi asinkron, yaitu forum diskusi dan blog, untuk menggunakan forum diskusi

pengguna dapat melakukan registrasi langsung dan menggunakan forum dengan

fungsi yang terdapat di dalamnya. Sedangkan untuk blog pengguna harus melakukan

permintaan terlebih dahulu untuk dapat menggunakan blog pada situs.
                                                                                                                      131




4.3.2 Diagram Aktifitas

4.3.2.1 Proses Registrasi



                  Pengguna Akhir                               Situs                            Administrator




                    Membuka Situs                       Halaman Muka Situs                        Membuka Situs




               Memasukan Data Registrasi              Memproses Data Registrasi




                                                         Cek Data Registrasi


                                            [salah]
                       Notifikasi
                                                                   [benar]




                                                  Simpan Data Pengguna                       Notifikasi




                Terima Akun Pengguna           Buat & Kirim Akun Pengguna




                         Akses Masuk




                  Memasukan Akun Pengguna               Verifikasi Akun Pengguna              Melakukan Akses Masuk


                                            [salah]                                [salah]




                                                                     [benar]


                                                         Masuk Ke Dalam Situs




           Gambar 4.7 Diagram Aktifitas Proses Registrasi dan Login
                                                                               132




       Pada gambar 4.6 di atas diagram tersebut menggambarkan bagaimana

terjadinya proses registrasi ada akses masuk ke dalam situs. Ketika pengguna akhir

membuka situs pengguna akan dihadapkan dengan halaman muka situs. Hal yang

sama berlaku untuk administrator ketika membuka situs, tetapi administrator tidak

perlu melakukan proses registrasi karena akun pengguna administrator sudah

tersimpam sebelumnya. Maka administrator dapat langsung melanjutkan untuk

mengakses masuk situs, setelah administrator memasukan akun pengguna maka akun

pengguna akan diverifikasi oleh situs untuk memastikan bahwa akun tersebut

terdaftar dan merupakan administrator.

       Untuk pengguna, jika pengguna belum terdaftar maka pengguna diharuskan

untuk registrasi. Proses registrasi dilakukan dengan memasukan data pengguna yang

nantinya data tersebut akan diproses oleh situs untuk dijadikan akun pengguna.

Sebelum data diproses, validitas data akan diperiksa terlebih dahulu, bila ada

kesalahan maka pengguna akan diminta untuk memasukan datanya kembali. Jika data

tersebut sudah benar maka situs akan menyimpan data pengguna dan memberikan

umpan balik kepada administrator. Setelah itu akun pengguna akan dikirimkan

kepada pengguna. Setelah mendapatkan akun pengguna, pengguna dapat meneruskan

untuk mengakses masuk situs dengan memasukan akun pengguna, setelah akun

pengguna diterima situs, akun pengguna akan diverifikasi oleh situs, jika terdaftar

maka pengguna akan masuk ke dalam situs.
                                                                             133




4.3.2.2 Diagram Aktifitas Proses Unduhan Modul Materi



                      Pengguna Akhir                     Situs




                        Membuka Situs                   Halaman Muka Situs




                   Memasukan Akun Pengguna        Verifikasi Akun Pengguna



                                              [salah]

                                                                   [benar]

                    Masuk Ke Dalam Situs                 Beri Akses Masuk




                     Buka Halaman Unduh




                     Pilih Unduhan Materi




                   Kirim Permintaan Unduhan             Proses Unduhan




                      Terima Unduhan               Kirim Balik Unduhan




         Gambar 4.8 Diagram Aktifitas Proses Unduhan Modul Materi



       Diagram aktifitas ini menggambarkan bagaiman pengguna melakukan

unduhan untuk modul materi yang terdapat di dalam situs. Pengguna terlebih dahulu

mengakses masuk situs dengan memberikan akun pengguna untuk diverifikasi oleh
                                                                               134




situs. Ketika pengguna sudah berada di dalam situs barulah pengguna dapat

melakukan unduhan terhadap modul materi. Dimulai dengan membuka halaman

unduh yang dilanjutkan dengan memilih unduhan yang akan diunduh. Situs akan

memproses permintaan untuk unduhan yang hasilnya akan dikirim balik kepada

pengguna berupa unduhan.



4.3.2.3 Diagram Aktifitas Proses Pemilihan Layanan

       Diagram ini menggambarkan proses bagaimana pengguna meminta layanan

pembelajaran interaktif yang ada pada situs. Dimulai dengan mengakses masuk situs

dengan memberikan akun pengguna untuk diverifikasi oleh situs, lalu situs akan

memberikan akses masuk jika akun pengguna berhasil diverifikasi. Setelah pengguna

masuk ke dalam situs, pengguna dapat memilih dua jenis pembelajaran interaktif

yang disediakan. Jika pengguna memilih layanan aplikasi multimedia interaktif,

pengguna dapat memilih jenis aplikasi apa yang diinginkan lalu mengirim permintaan

terhadap aplikasi yang akan diproses oleh situs dan dikirimkan kembali ke pengguna

       Jika pengguna memilih layanan video streaming maka pengguna dapat

memilih video apa yang ingin ditampilkan dengan mengirim permintaan ke situs.

Permintaan pengguna akan diproses oleh situs untuk mengirimkan kembali layanan

video kepada pengguna.
                                                                                         135




                     Pengguna Akhir                                    Situs




                      Membuka Situs                             Halaman Muka Situs




               Memasukan Akun Pengguna                       Verifikasi Akun Pengguna


                                                           [salah]


                                                                              [benar]


                  Masuk Ke Dalam Situs                           Beri Akses Masuk




          Buka Halaman Pembelajaran Interaktif




            Pilih Jenis Layanan Pembelajaran




Aplikasi Multimedia Interaktif        Video Streming




 Memilih Layanan Aplikasi         Memilih Layanan Video




                                  Kirim Permintaan Video      Proses Permintaan Video




                                  Terima Layanan Video          Kirim Layanan Video




 Kirim Permintaan Aplikasi                                  Proses Permintaan Aplikasi




                                 Terima Layanan Aplikasi             Kirim Aplikasi




   Gambar 4.9 Diagram Aktifitas Proses Pemilihan Layanan
                                                                                                               136




4.3.2.4 Diagram Aktifitas Registrasi Pengguna Pada Blog



        Pengguna Akhir                               Situs                         Administrator




            Membuka Situs                      Halaman Muka Situs




      Memasukan Akun Pengguna               Verifikasi Akun Pengguna



                                         [salah]


                                                         [benar]


        Masuk Ke Dalam Situs                   Beri Akses Masuk




         Masuk Ke Dalam Blog




    Masuk Ke Dalam Halaman Kontak




  Mengirim Permohonan Akun Pengguna    Mengirim Permintaan Akun Pengguna   Menerima Permohonan Akun Pengguna




                                                                                   Membuat Akun Baru




        Terima Akun Pengguna            Mengirim Akun Pengguna Baru              Mengirimkan Akun Baru




                Mengakses Masuk Blog      Verifikasi Akun Pengguna



                                           [salah]


                                               [benar]


                                            Masuk Ke Dalam BLog




           Gambar 4.10 Diagram Aktifitas Registrasi Pengguna Pada Blog
                                                                                  137




       Diagram ini memvisualisasikan aktifitas pengguna untuk mendapatkan akun

pengguna yang digunakan untuk melakukan akses pada blog yang terdapat pada situs.

Aktifitas dimulai dengan pengguna membuka halaman awal situs dan melakukan

akses masuk terhadap situs. Situs akan memverifikasi akun pengguna, setelah

verifikasi berhasil pengguna akan diteruskan ke dalam situs. Dari dalam situs

pengguna dapat mengakses halaman awal dari blog.

       Cara registrasi pada blog berbeda dengan registrasi pada situs, pada registrasi

blog pengguna diharuskan untuk mengirimkan permintaan kepada administrator situs

untuk akun pengguna. Pengguna akan membuka halaman kontak pada blog dan

mengisikan permintaan untuk penggunaan blog yang akan dikirimkan dalam bentuk

email kepada email administrator. Administrator akan menerima permintaan dari

pengguna dan membuatkan akun pengguna.

       Ketika akun pengguna sudah dibuatkan administrator mengirimkan akun

pengguna kepada pengguna yang bersangkutan untuk digunakan. Pengguna dapat

menggunakan akun yang telah diberikan untuk mengakses masuk blog. Pengguna

menyediakan akun pengguna kepada situs untuk di verifikasi, setelah verifikasi

berhasil pengguna akan langsung diarahkan ke dalam blog dan bisa langsung

menggunakan blog. Tetapi jika akun yang diberikan salah situs akan meminta

pengguna untuk kembali memberikan akun pengguna.
                                                                          138




4.3.2.5 Diagram Aktifitas Entri Pada Blog

                      Pengguna Akhir                      Situs




                       Membuka Situs              Halaman Muka Situs




                  Memasukan Akun Pengguna      Verifikasi Akun Pengguna



                                             [salah]


                                                              [benar]


                    Masuk Ke Dalam Situs           Beri Akses Masuk




                    Mengakses Masuk Blog       Verifikasi Akun Pengguna



                                                [salah]


                                                              [benar]


                   Membuat Entri Blog Baru       Masuk Ke Dalam BLog




                                                Menampilkan Editor Teks




                    Melakukan Entri Blog          Menyimpan Entri Blog




                                                 Menampilkan Entri Blog




               Gambar 4.11 Diagram Aktifitas Entri Pada Blog



      Diagram aktifitas entri pada blog menjelaskan bagaimana pengguna

melakukan entri baru pada blog. Di mulai dengan mengakses masuk situs dengan

memberikan akun pengguna yang akan diverifikasi situs. Setelah masuk ke dalam
                                                                              139




situs pengguna dapat mengakses masuk blog dengan menggunakan akun pengguna

blog. Blog akan memverifikasi akun pengguna berhasil di verifikasi pengguna sudah

dapat menggunakan blog

       Pembuatan entri baru pada blog dilakukan dengan membuka halaman entri

baru yang di dalamnya terdapat penyunting teks untuk melakukan entri blog. Setelah

pengguna selesai membuat entri blog baru situs akan menyimpan entri pengguna

dalam basis data. Entri blog baru akan langsung ditampilkan setelah entri blog

disimpan.



4.3.2.6 Diagram Aktifitas Registrasi Forum

       Diagram aktifitas ini menunjukkan bagaimana pengguna melakukan registrasi

pada forum yang terdapat pada situs. Aktifitas dimulai dengan pengguna membuka

halaman awal situs dan melakukan akses masuk terhadap situs. Situs akan

memverifikasi akun pengguna, setelah verifikasi berhasil pengguna akan diteruskan

ke dalam situs. Dari dalam situs pengguna dapat mengakses halaman awal dari

forum. Sebelum menggunakan forum pengguna diharuskan melakukan registrasi

terlebih dahulu untuk medapatkan akun pengguna.

       Registrasi dilakukan dengan memberikan data pengguna kepada situs, lalu

situs akan menyimpan data pengguna tersebut dan membuat akun pengguna. Jika

proses regitrasi berhasil situs akan mengirimkan notifikasi beserta akun pengguna

kepada pengguna yang bersangkutan. Lalu pengguna dapat mengakses forum dengan
                                                                                                    140




memberikan akun pengguna untuk diverifikasi oleh situs, setelah verifikasi berakhir

pengguna dapat menggunakan layanan yang terdapat pada forum.



         Pengguna Akhir                                    Situs                    Administrator




             Membuka Situs                           Halaman Muka Situs




       Memasukan Akun Pengguna                    Verifikasi Akun Pengguna



                                            [salah]

                                                               [benar]


         Masuk Ke Dalam Situs                         Beri Akses Masuk




         Masuk Ke Dalam Forum




          Melakukan Registrasi                    Menyimpan Data Pengguna




                                                  Membuat Akun Pengguna




  Terima Notifikasi dan Akun Pengguna   Mengirim Notifikasi dan Akun Pengguna   Terima Notifikasi




                 Mengakses Masuk Blog             Verifikasi Akun Pengguna



                                        [salah]

                                                               [benar]


                                                   Masuk Ke Dalam BLog




                       Gambar 4.12 Diagram Aktifitas Registrasi Forum
                                                                                               141




4.3.2.7 Diagram Aktifitas Membuat Post dan Membalas Post



                           Pengguna Akhir                                   Situs




                          Membuka Situs                               Halaman Muka Situs




                    Memasukan Akun Pengguna                        Verifikasi Akun Pengguna



                                                                 [salah]


                                                                                    [benar]


                       Masuk Ke Dalam Situs                            Beri Akses Masuk




                      Mengakses Masuk Forum                         Verifikasi Akun Pengguna



                                                                     [salah]

                                                                  [benar]



                         Masuk Ke Forum




                        Cek Kategori Diskusi




               Mulai Topik baru                Balas Post




                Buat Topik Baru         Membuat Balasan Post     Simpan Balasan




                                                                Tampilkan Balasan




                                                                Simpan Topik Baru




                                                               Tampilkan Topik Baru




      Gambar 4.13 Diagram Aktifitas Membuat Post dan Membalas Post
                                                                              142




        Diagram ini memvisualisasikan bagaimana seorang pengguna melakukan

kegiatan pada forum yang terdapat di dalam situs. Kegiatan pengguna dimulai dengan

membuka situs dan memasukkan akun pengguna untuk otentikasi pengguna. Setelah

akun pegguna di verifikasi pengguna dapat membuka forum yang terdapat pada situs,

forum hanya dapat di akses menggunakan akun pengguna yang teregistrasi. Setelah

pengguna memberikan akun pengguna forum untuk diverifikasi situs akan

mengizinkan pengguna untuk menggunakan forum jika akun pengguna tersebut

tedaftar.

        Pada forum pengguna bisa melakukan dua kegiatan, yang pertama adalah

membuat topik baru, pengguna memulai diskusi dengan membuka topik baru. Setelah

pengguna membuat topik baru situs akan menyimpan topik tersebut dan

menampilkannya agar dapat dilihat dan dibalas oleh pengguna lainnya. Cara

membalas topik diskusi adalah dengan membuat post pada topik yang bersangkutan.

Pengguna dapat membuat post pada forum dan situs akan menyimpan post pengguna

lalu menampilkannya pada situs.



4.3.3 Diagram Sequence

4.3.3.1 Diagram Sequence Penggunaan Layanan Utama Situs

        Diagram ini menggambarkan aktivitas pengguna yang dilakukan melalui

suatu urutan tertentu dan berdasarkan stimulus yang diterima atau dikirimkan suatu

objek. Dengan pengguna sebagai aktor, pengguna mengirimkan stimulus yang akan

mengaktifkan objek situs dimana pengguna dapat melakukan aktivitas registrasai
                                                                                                                           143




yang diteruskan dengan login yang mengantarkan stimulus untuk mengaktifkan objek

beranda tempat semua kegiatan pengguna berawal.

       Dari objek beranda pengguna dapat mengirimkan suatu stimulus untuk

mengaktifkan objek unduh, objek unduh akan mengirimkan umpan balik kepada

pengguna. Begitu juga untuk objek video streaming dan multimedia interaktif setiap

kali objek menerima stimulus umpan balik akan dikirimkan kepada pengguna.


                                           Beranda                Unduh        Video Streaming    Multimedia Interaktif




      Pengguna                                  Membuka
                                                Halaman
                                                Download
                      Situs
            Membuka
            Situs
                                                                      Unduh
                                                                      Materi

                              Registrasi

                              Login

                              Keluar
                              Beranda


                                                     Mengirim
                                                     Unduhan




                                                Membuka                                 Meminta
                                                Layanan                                 Layanan Video
                                                Streaming Video                         Streaming
                                                                     Mengirimkan
                                                                     Streaming Video



                                                Membuka Aplikasi
                                                Multimedia
                                                Interaktif

                                                                                                               Mengirimkan
                                                                                                               Streaming Video




      Gambar 4.14 Diagram Sequence Penggunaan Layanan Utama Situs
                                                                                                                        144




4.3.3.2 Diagram Sequence Forum


                                     Beranda                        Halaman Registrasi     Buat Topik Baru      Post Baru



                                          Membuka
                                          Forum
                                                    Beranda Forum
     Pengguna


                     Situs
           Membuka                                           Registrasi
           Situs




                             Registrasi
                                                            Login
                             Login

                             Keluar
                             Beranda


                                                           Memberikan
                                                           Akun Pengguna




                                                            Membuat Post
                                                            Topik Baru


                                                                                 Tampilkan Post
                                                                                 Topik Baru




                                                            Mengirim Post
                                                            Baru
                                                                                                    Tampilkan Post
                                                                                                    Baru




                       Gambar 4.15 Diagram Sequence Forum



      Diagram ini memvisualisasikan bagaimana pengguna menggunakan forum

berdasarkan suatu urutan. Kegiatan dimulai dengan pengguna mengirimkan stimulus

untuk membuka situs. Kemudian pengguna dapat membuka objek beranda dengan

mengirimkan stimulus dari objek situs. Beranda forum hanya dapat dibuka melalui
                                                                            145




stimulus yang dikirim dari beranda utama. Dari beranda forum pengguna dapat

melakukan proses registrasi dengan mengirimkan stimulus kepada objek halaman

registrasi yang akan diteruskan dengan umpan balik berupa akun pengguna yang

dikirimkan kepada pengguna.

       Dari beranda forum pengguna juka dapat melakukan proses login setelah

melakukan proses login pengguna dapat melakukan kegiatan lainnya pada situs.

Melalui stimulus dari beranda forum pengguna dapat membuka objek buat topik baru

untuk membuat post topik baru yang akan diteruskan dengan umpan balik

menampilkan topik baru tersebut pada beranda forum. Begitu juga pengiriman post

baru objek post baru dapat diaktifkan melalui stimulus dari beranda forum yang

diteruskan dengan umpan balik terhadap beranda forum.



4.3.3.3 Diagram Sequence Blog

       Diagram ini memvisualisasikan bagaimana pengguna menggunakan blog

berdasarkan suatu urutan. Kegiatan dimulai dengan pengguna mengirimkan stimulus

untuk membuka situs. Kemudian pengguna dapat membuka objek beranda dengan

mengirimkan stimulus dari objek situs. Beranda blog hanya dapat dibuka melalui

stimulus yang dikirim dari beranda utama. Dari beranda blog pengguna dapat

melakukan proses registrasi dengan mengirimkan stimulus kepada objek halaman

registrasi yang akan diteruskan dengan umpan balik berupa akun pengguna yang

dikirimkan kepada pengguna.
                                                                                                                             146




       Dari beranda blog pengguna juka dapat melakukan proses login setelah

melakukan proses login pengguna dapat melakukan kegiatan lainnya pada situs.

Melalui stimulus dari beranda blog pengguna dapat membuka objek buat entri blog

untuk membuat entri blog baru yang akan diteruskan dengan umpan balik

menampilkan entri blog baru tersebut pada beranda forum. Begitu juga pengiriman

post baru objek komentar blog dapat diaktifkan melalui stimulus dari beranda blog

yang diteruskan dengan umpan balik terhadap beranda blog.


                                     Beranda                       Halaman Registrasi      Buat Entri Blog   Komentar Blog



                                          Membuka
                                          Forum
                                                    Beranda Blog
     Pengguna


                     Situs
           Membuka                                           Registrasi
           Situs




                             Registrasi
                                                           Login
                             Login

                             Keluar
                             Beranda


                                                           Memberikan
                                                           Akun Pengguna




                                                            Buat Entri Blog
                                                            Baru


                                                                                Tampilkan Entri
                                                                                Blog Baru




                                                           Kirim Komentar
                                                           Blog
                                                                                                    Tampilkan
                                                                                                    Komentar Blog




                              Gambar 4.16 Diagram Sequence Blog
                                                                                147




4.3.4 Diagram Kelas

4.3.4.1 Diagram Kelas Utama


                                 SitusUtama
                             -terimaIDPengguna
                             -simpanSesiPengguna               Blog
                             -halamanMuka                 -IDPenggunaBlog
                             +menuBar                     -BlogPost
       Pengguna              +beranda                     -BlogComment
                             +tutorialPage                +display()
     #IDPengguna
                             +showcasePage                +dispose()
     #SesiPengguna
                             +unduhan                     +fill()
     +post()                 +guestBook                   +save()
     +verifikasi()           +contactPage
                             +aboutPage
                             +display()
                             +dispose()
                             +getUserSession()
                             +getUserID()


                                   Forum
                              -IDPenggunaForum
                              -ForumPost
                              -ForumReply
                              +display()
                              +dispose()
                              +fill()
                              +save()


                      Gambar 4.17 Diagram Kelas Utama



       Diagram ini menunjukkan kelas-kelas utama yang dimiliki oleh situs, kelas ini

berupa fungsi atau layanan yang disediakan dalam situs pada tingkatan tertinggi,

yaitu pada tingkatan situs. Kelas yang berhubungan adalah kelas pengguna, kelas

situs utama, kelas blog, dan kelas forum. Pengguna merupakan suatu kelas berupa

entitas luar yaitu pengguna yang dapat berhubungan dengan kelas lainnya melalui

kelas situsutama.
                                                                              148




       Kelas situsutama merupakan kelas inti yang merupakan kelas penghubung

antara kelas pengguna, blog, dan forum. Setelah metode pose dan verifikasi untuk

atribut pada kelas pengguna dilakukan, hubungan dengan kelas situsutama dapat

dilakukan. Kelas situsutama mempunyai beberapa atribut di dalamnya yang dapat

dilihat pada gambar 4.17, beberapa diantaranya adalah terimaIDPengguna dan

SimpanSesiPengguna, yang akan digunakan oleh metode getUserSession dan

getUserID, untuk mengaktifkan identitas pengguna dan sesi pengguna untuk

menggunakan situs. Kelas blog dan kelas forum dapat dihubungkan dengan pengguna

melalui kelas situsutama, karena kelas blog dan forum hanya berhubungan langsung

dengan kelas situs utama dan tidak langsung dengan kelas pengguna.



4.3.4.2 Diagram Kelas Akun Pengguna

       Diagram ini memvisualiasasikan objek apa saja yang berhubungan dan

membentuk fungsi akun pengguna atau lebih tepatnya objek data yang digunakan

pada akun pengguna. Akun pengguna dibentuk oleh beberapa kelas, yaitu kelas

Users, UsersInRoles, Profile, Roles, Personalizatio(Per User), Personalization(All

User), Path, Application, dan Membership. Kelas-kelas tersebut merupakan objek

yang saling terhubung yang membentuk fungsi akun pengguna. Keterhubungan antar

kelas tersebut dapat terlihat pada kelas Users yang merupakan kelas dengan

keterhubungan terbanyak dengan kelas lainnya, pada kelas Users terdapat identitas

pengguna di dalamnya dan mempunyai keterhubungan one-to-one dengan kelas

Profile kelas yang digunakan untuk memyimpan profil pengguna berdasarkan
                                                                                 149




identitas pengguna, yang berarti satu pengguna hanya dapat mempunyai satu dan

hanya satu profil pengguna. Kelas Users juga mempunyai keterhubungan one-to-one

dengan kelas UsersInRoles, kelas UsersInRoles menunjukkan pengguna mana yang

mempunyai peran pengguna yang ada pada kelas Roles, kelas roles sendiri juga

berhubungan many-to-one dengan kelas users, yang berarti satu pengguna hanya

dapat mempunyai satu peran dan hanya bisa terdapat dalam satu peran pengguna dan

satu peran pengguna dapat dimiliki oleg beberapa pengguna.

       Kelas Applications merupakan kelas untuk mengidentifikasikan kelas lainnya

kepada aplikasi dimana kelas tersebut berada. Kelas application berhubungan one-to-

one dengam kelas lainnya seperti kelas Users, Roles, Path, dan Membership, yang

berarti kelas-kelas tersebut hanya dapat digunakan oleh satu identitas aplikasi saja.

Kelas Users juga berhubungan one-to-one dengan kelas Personalization(Per User),

kelas untuk penyimpanan data personalisasi dari sebuah akun pengguna berarti satu

penggun hanya mempunyai satu pengaturan untuk personalisasi per pengguna.

Dengan hubungan kelas Personalization(Per User) kepada kelas Path, untuk

menyimpan jalur dari personaliasasi pada aplikasi dan keterhubugannya dengan kelas

Personalization(All User) atau kelas personalisasi umum.

       Kelas users juga mempunyai hubungan one-to-one dengan kelas Membership,

kelas Membership merupakan kelas utama untuk tempat penyimapanan akun

pengguna atau keanggotaan pengguna. Untuk satu identitas pengguna hanya dapat

mempunyai satu dan hanya satu keanggotaan yang bersifat unik, atau tidak sama

untuk setiap pengguna.
                                                                                                                                   150




           Profile                             UsersInRoles
-UserId : string                               -UserId : string
-PropertyNames : string                        -RoleId : string
-PropertyValuesString : string                                           1
-PropertyValuesBinary : object
-LastUpdateDate : string
+fill()                                           1
+getData()
                                           1      1                                                             1
                     *
                                                    Users
                                 1                                                                               Roles
                                         -ApplicationId : string
                                                                                                     -ApplicationId : string
                                         -UserId : string
                                                                                                     -RoleId : string
                                         -UserName : string                  1..1         1..*
                                                                                                     -RioleName : string
                                         -LoweredUserName : string
                                                                                                     -LoweredRoleName : string
                                         -MobileAlias : string
                                     1                                                               -Description : string
                                         -IsAnonymous : bool
                                         -LastActivityDate : string                                  +fill()
                                                                                                     +getData()
                                         +fill()
                                         +getData()
                                                                                                                             1

                         1                        1
                                                                                                                1
                                                                                                                             1
               Personalization(Per User)
              -Id : string                                        Path                1          1
                                                                                                              Applications
              -PathId : string                        -ApplicationID : string                            -ApplicationName : char
              -UserId : string                        -PathID : string                                   -ApplicationID : char
              -PageSettings : object                  -Path : string                                     -Description : char
              -LastUpdateDate : string                -LoweredPath : string
                                                                                                         +fill()
              +fill()                                 +fill()                                            +getData()
              +getData()                              +getData()

                         1                                   1                   1                                    1

                                                                                                     1
                                 Membership
           -ApplicationID : string
                                                                                 Personalization(All User)
           -UserID : string
           -Password : string                                                -PathID : string
           -PasswordFormat : string                                          -PageSettings : string
           -Email : string                                                   -LastUpdateDate : string
    1      -LoweredEmail : string                                            +fill()
           -PasswordQuestion : string                                        +getData()
           -PasswordAnswer : string
           -IsApproved : bool                                                1
           -IsLockedOut : bool
           -CreateDate : string
           -LastLoginDate : string
           -LastPasswordChangeDate : string
           -LastLockoutDate : string
           -FailedPasswordAttemptCount : string
           -FailedPasswordAttemptWIndowStart : string
           -FailedPasswordAnswerAttemptCount : string
           -FailedPasswordAnswerAttemptWindowStart : string
           -Comment : string
           +insert()
           +fill()
           +getData()



                             Gambar 4.18 Diagram Kelas Akun Pengguna
                                                                                                                       151




4.3.4.3 Diagram Kelas Situs Utama


                   UserMembership                                                                   Unduhan
-Application : Applications                                        HalamanAwal              -TautanUnduhan : string
-Membership : Membership                                                                    -PDFDocument : object
                                                               -Registrasi : object
-Path : Paths                                                                               +getRequest()
                                                         11    -Login : object
-PersonalizationAllUser : Personalization(All User)                                         +sendRequest()
-PersonalizationPerUser : Personalization(Per User)            +simpanData()
-Profile : Profile                                             +verifikasi()
-Roles : Roles                                                 +display()
-Users : Users                                                 +dispose()                               Blog
-UsersInRole : UsersInRoles                                                                     -navBar : object
+verifikasi()                                                                                   -Login : object
+getData()                                                                                      -Registrasi : object
+insert()                                                                                       -BlogPost : string
                                                                                                -BlogReply : string
                                                                                                -IdPengguna : string
                                         1                                                      -ArsipBlog : object
                                                                                                -RSSFeed : object
                                                                                                +call()
        Forum                                                                                   +display()
                                                                                                +verifikasi()
-navBar : object                                               1
-ForumTopics : string
-ForumPost : string                                                                     HalamanVideoStreaming
-ProfilPengguna : object                                       Beranda                -navBar : object
-IdPengguna : string                              -navBar : object                    -LoginStatus : bool
-Registrasi : object                              -QuickLinks : object                -FlashVideoObject : FlashVideo
-Pencarian : object                               -SilverlightObject : object         -AJAXTabContainer : object
-Login : object                                   -LoginStatus : bool                 -AJAXTabContent : object
+call()                                           -AJAXAccordionControl : object      +display()
+display()                                        +display()                          +dispose()
+verifikasi()                                     +dispose()                          +sendRequest()
                                                                                      +getRequest()
               *
                                                        1                                                        1
   FlashApplication                                                                             1
-SWFObjetcs : object                                        HalamanTutorial
+getRequest() : object                                -navBar : object
+sendRequest() : object                               -LoginStatus : bool
+display()                                            -FlashObject : object
+dispose()                                            -AJAXTabContainer : object
                                                      -AJAXTabContent : object
                                             1        +display()
                                                      +dispose()
                                                      +sendRequest()                                       *
                   *                                  +getRequest()

                                                                                                    FlashVideo
   AJAXControlToolkit
                                                                                             -FLVVideoFile : object
-AJAXTabContainer : object                                                                   -SWFPlayer : object
-AJAXTabConten : object                                                                      +getRequest() : object
-ContentTemplate : object                                                                    +sendRequest() : object
-PartialUpdatePanel                 *
                                                                                             +display()
                                                                                             +dispose()




                                Gambar 4.19 Diagram Kelas Situs Utama
                                                                               152




       Diagram kelas ini menggambarkan objek-objek utama yang terdapat pada

situs utama serta hubungan antar kelas yang membentuk situs utama menjadi satu

kesatuan fungsi objek. Kelas Beranda berfungsi sebagai kelas penghubung antar kelas

lainnya, dapat dilihat pada gambar bahwa kelas Beranda mempunyai hubungan

dengan kelas HalamanAwal, UserMembership, Unduhan, Blog, Forum, Blog,

HalamanVideoStreaming,     dan   HalamanTutorial.    Kelas   Beranda   mempunyai

hubungan one-to-one dengan kelas UserMembership yang menyimpan keanggotaan

pengguna, berarti satu keanggotaan pengguna hanya dapat satu kali mengaktifkan

Kelas Beranda. Kelas UserMembership juga mempunyai hubungan one-to-one

dengan kelas HalamanAwal, kelas HalamanAwal merupakan kelas awal sebelum

aktifnya kelas Beranda oleh UserMembership, kelas HalamanAwal mempunyai

metode verifikasi, yang digunakan untuk memverifikasi kelas Beranda.

       Kelas Beranda mempunyai keterhubungan dengan kelas unduhan yang

mempunyai metode untuk memproses unduhan dari pengguna, serta berhubungan

dengan kelas HalamanTutorial dan HalamanVideoStreaming. Kedua kelas ini

berhubungan dengan kelas AJAXControlToolkit yang merupakan kelas untuk elemen

AJAX yang digunakan pada situs. Kelas HalamanTutorial berhubungan one-to-many

dengan kelas FlashApplication yang berarti pada satu kelas HalamanTutorial dapat

terdapat lebih dari satu kelas Flash Application, begitu juga untuk hubungan antara

kelas HalamanVidoeStreaming dan kelas FlashVideo berlaku kondisi hubungan yang

sama dengan kelas HalamanTutorial.
                                                                                                                                            153




4.3.4.4 Diagram Kelas Forum



      UserInfo                                                        Forums                        Topics                 Posts
-UserId : string             Categories                        -Fid : int                      -UserId : string      -UserId : string
-Title : string         -Cid : int                             -Fname : string                 -Tid : int            -Pid : int
-RealName : string      -Cname : string                        -Fdesc : string                 -Subject : string     -userIp : string
-URL : string           -DispPosition : string                 -RedirectUrl : string           -Posted : string      -Message : string
-Jabber : string        -Scid : int                            -Moderators : string            -NumViews : int       -HideSmiles : int
-Icq : string                                                  -SortBy : int                   -Closed : int         -Posted : string
                        +fill()
-Msn : string                                                  -DispPosition : int             -Sticky : int         -Edited : string
                        +getData()
-Aim : string                                                  -Cid : int                      -MovedTo : int        -EditedBy : string
-Yahoo : string                                                                                -Fid : int            -Tid : int
                                                               +fill()
-Location : string                                             +getData()                      +fill()               +fill()
-Signatures : string                                                                           +getData()            +getData()
-DispTopics : int
-DispPosts : int
-EmailSettings : int
-NotifyWithPost : int
-Autonotify : int                                                                                                     SearchMatches
-ShowSmilies : int                                     Users
-ShowImg : int                                                                                                     -Pid : int
-ShowImgSig : int              -UserId : string                                                                    -SubjectMatch : string
-ShowAvatars : int             -UserName : string                                                                  -Word : string
-ShowSig : int                 -ApplicationName : string                                Subscription               -UserId : int
-Timezone : int                -Email : string                                                                     +fill()
                                                                                       -UserId : string
-Dst : int                     -Comment : string                                                                   +getData()
                                                                                       -Tid : int
-TimeFormat : string           -Password : string
                               -PasswordQuestion : string                              +fill()
-DateFormat : string
                               -PasswordAnswer : string                                +getData()
-Language : string
-Style : string                -Salt : string
                               -IsApproved : bool
+fill()
                               -LastActivityDate : string
+getData()                                                                                                             SearchWords
                               -LastUpdatedDate : string
                               -LastLoginDate : string                                                             -Word : string
                               -LastPasswordChangeDate : string                                                    -SearchData : string
                               -CreationDate : string                                              Reports         +fill()
                               -IsOnLine : bool                                                                    +getData()
                               -IsLockedOut : bool                                            -Userid : string
                               -LastLockedOutDate : string                                    -Id : int
                               -FailedPasswordAttemptCount : int                              -Pid : int
                               -FailedPasswordAttemptWindowStart : string                     -Created : int
                               -FailedPasswordAnswerAttemptCount : int                        -Message : string
                               -FailedPasswordAnswerAttemptWindowStart : string               -Zapped : int
                                                                                              -ZappedBy : int
                               +fill()
                               +getData()                                                     +fill()
                                                                                              +getData()




                                                   UsersInRoles
      Roles
                                                 -UserName : string
-RoleName
                                                 -RoleName
-ApplicationName
                                                 -ApplicationName
+fill()
                                                 +fill()
+getData()
                                                 +getData()




                                        Gambar 4.20 Diagram Kelas Forum



              Diagram ini memvisualisasikan bukan hanya keterhubungan antar kelas yang

membentuk forum tetapi juga ketergantungan antar kelas yang membentuk forum.

Ketergantungan antar kelas dapat dilihat dari gambar panah dengan garis putus-putus
                                                                                   154




yang mewakilkan keterhubungan dan ketergantungan antar kelas. Kelas yang pada

diagram ini merupakan objek data yang membentuk satu kesatuan fungsi yang ada

pada forum. Kelas UserInfo yang menyimpan informasi pengguna secara umum

memiliki ketergantungan terhadap kelas Users yang menyimpan data pengguna

secara rinci dengan atribut refferal UserId. Sedangkan kelas Users sendiri memiliki

ketergantungan terhadap kelas lainnya, karena kelas seperti Topics, Posts,

Subscription, Reports, dan UserInRoles karena semua kelas tersebut mempunyai

atribut refferal UserId yang diambil dari kelas Users yang berasal dari kelas UserInfo.

       Untuk objek pembentuk forum dibentuk dari kelas Categories, Forums,

Topics, dan Posts, Reports, kesemua kelas tersebut mempunyai ketergantungan

langsung seperti pada kelas Topics dan Posts yang bergantung dengan atribut Tid dan

kelas Topics juga bergantung dengan kelas Forums dengan menggunakan refferal

Fid, begitu juga dengan kelas Forums dengan Categories yang saling ketergantungan

dengan refferal Cid. Untuk peran pengguna kelas yang berkaitan adalah kelas Roles

yang beketergantungan dengan kelas UsersInRoles dengan atribut referral RoleName.

       Terdapat juga kelas untuk pencarian yaitu kelas SearchWords dan

SearchMatches kedua kelas ini saling tergantung dengan atribut Word yaitu kata

pencarian dan kelas SearchMatches yang bertugas untuk menyamakan kata kunci

pencarian bergantung dengan kelas Posts dimana pencarian dilakukan.
                                                                                                         155




4.3.4.5 Diagram Kelas Blog



          Profiles
                                                 Users
  -DisplayName : uint                                                                     Roles
  -FirstName : string                    -UserName : string
  -MiddleName : string                   -Password : string                           -Name : string
  -LastName : string                     -Email : string                              -Users : string
  -CityTown : string                     -LastLoginTime : string                      +fill()
                            1       1                                 1           1   +create()
  -RegionState : string                  +fill()
  -Country : string                      +create()                                    +getData()
  -Birthday : string                     +getData()
  -AboutMe : string
  -PhotoUrl : string
                                           1                     1
  -Company : string
  -EmailAddress : string
  -PhoneMain : string                                                                          *
  -PhoneMobile : string
  -PhoneFax : string
  -IsPrivate : bool                                                                    Posts
                                                           Categories
  +fill()                                                                     -Author : string
                                                        -Category : string
  +create()                                                                   -Title : string
  +getData()                                            +fill()               -Description : string
                                                        +create()             -Content : string
                                                        +getData()            -IsPublished : bool
           Pages                                                              -IsCommentEnabled : bool
                                *                            1                -PubDate : string
   -Title : string
                                                                              -LastModified : string
   -Desciption : string
                                                                              -Raters : int
   -Keywords : string
                                                                          1   -Rating : int
   -Slug : string
                                                                              -Slug : string
   -IsFrontPage : bool               Blogroll
                                                                              -Tag : string
   -ShowInList : bool
                            -Outline : string                                 -Comments : string
   -IsPublished : bool
                            +fill()                                           -Categories : string
   -DateCreated : string
                            +create()               1                     1   -Notifications : string
   -DateModified : string
                            +getData()                                        +fill()
   +fill()
                                                                              +create()
   +create()
                                                                              +getData()
   +getData()


                                    Gambar 4.21 Diagram Kelas Blog



        Diagram kelas ini menjelaskan kelas-kelas apa saja yang membentuk fungsi

dari blog atau objek data yang membentuk blog. Terdapat enam kelas pada diagram

kelas ini, kelas Profiles, kelas Users, kelas Roles, kelas Pages, kelas Blogroll, kelas

Categories, dan kelas Posts. Kelas Users merupakan kelas yang mempunyai atribut
                                                                              156




untuk penyimapanan data pengguna blog. Kelas Users berhubungan one-to-one

dengan kelas Profiles yang mempunyai atribut yang berkaitan dengan pengaturan

data pengguna yang berarti satu pengguna hanya dapat mempunyai satu pengaturan.

Kelas Users juga berhubungan denga kelas Roles untuk pengaturan peran pengguna

dengan keterhubungan one-to-one yang berlaku untuk satu pengguna hanya dapat

mempunyai satu peran pengguna.

       Kelas yang menjadi tempat untuk objek blog adalah kelas Posts dan Pages,

kelas Posts adalah tempat dimana objek blog berada sedangkan kelas Pages adalah

tempat untuk halaman statis. Kelas Pages berhubungan dengan keterhubungan many-

to-one dengan kelas users, artinya satu pengguna dapat mempunyai lebih dari satu

halaman, dan satu halaman hanya dapat dimiliki satu pengguna. Kelas Posts

berhubungan dengan kelas Users dan kelas Categories serat blogroll, keterhubungan

kelas Posts dengan kelas Users merupakan keterhubungan many-to-one, yaitu satu

user dapat mempunyai beberapa blog post, dan satu blog post hanya dapat dimiliki

satu pengguna.

       Kelas Posts juga mempunyai hubungan one-to-one dengan kelas Categories

dan Blogroll, dalam artian satu posts hanya dapat mempunyai satu kategori saja dan

satu blog post hanya dapat mempunyai satu blogroll.
                                                                                                                                              157




4.3.5 Diagram Komponen




    Web Server                               XML Web.Config                 ASP.NET Masterpages              CSS Stylesheets



                                                   Web.Config
                                                                       Masterpage.Master                              Berkas CSS




                                             ASP.NET (ASPX)                           ASP.NET Code Behind (aspx.C#)



                                                                                                    Kode Program

                     DLL Runtime                                                    .XAP Archived



                       Silverlight Runtime                                    .XAP Archived




                       Flash Runtime
                                                                             Silverlight Object                Berkas XAML



                 ASP.NET AJAX Control Toolkit


                                                                             Kode Program C#




                  XML Data Connection                                                                               SQL Server Data Connection
                                                       .NET Components

                                                        .NET Flash Object                                 SQL Server Database
          XML Database

                                                                                                                   Access Jet DB Connection

                                                        .NET Flash Video Component

                                                                                                          Access Database



                                                        .NET Data Source




                                  Gambar 4.22 Diagram Komponen Situs



        Diagram ini menunjukkan ketergantungan antara komponen perangkat lunak

yang digunakan dalam pembuatan situs, komponen saling berinteraksi dengan

menggunakan antar muka jika komponen tersebut memang membutuhkan antar muka
                                                                               158




untuk berinteraksi. Komponen utama dalam situs ini adalah halaman ASP.NET

halaman dengan ekstensi *.aspx, halaman inilah yang nantinya akan dipanggil oleh

server web. Halaman *.aspx sendiri mempunyai ketergantungan terhadap komponen

lainnya yang digunakan pada situs. Halaman *.aspx sangat bergantung kepada tiga

komponen utama, yaitu XML Web Config, ASP.NET Masterpage, dan ASP.NET

Code Behind atau *.aspx.c#. Komponen XML Web Config berhubungan dengan

halaman *.aspx dengan menggunakan antar muka sebuah berkas web.config, XML

Web Config berisikan entri konfigurasi dari situs serta entri koneksi database dan

pengaturan situs lainnya.

       Komponen ASP.NET Masterpage merupakan komponen yang membentuk

halaman *.aspx, semua pengaturan tata letak halaman berada pada komponen ini.

ASP.NET Masterpage membutuhkan berkas CSS untuk pengaturan tata letak pada

halaman ASP.NET Masterpage. ASP.NET Masterpage merupakan komponen

pembentuk halaman *.aspx. Kemudian halaman *.aspx dikendalikan oleh sebuah

kode logik yang ditempatkan pada berkas dengan ekstensi *.aspx.c#, berkas ini

menyimpam kode logik suatu halaman *.aspx.

       Halaman *.aspx juga berinteraksi dengan berkas terkompresi dengan ekstensi

*.xap, berkas ini merupakan berkas yang di dalamnya terdapat objek Silverlight,

objek silverlight sendiri terdiri dari komponen berkas dengan ekstensi *.xaml yang

merupakan berkas pengaturan tampilan untuk silverlight dan kode logik dengan

ekstensi *.cs atau kode program dengan bahasa C#, kedua objek tersebut akan

dikompresi menjadi file dengan ekstensi *.xap agar dapat digunakan halaman *.aspx.
                                                                                159




       Komponen halaman ASP.NET membutuhkan beberapa runtime dan

komponen .NET agar dapat menggunakan dan mengakses komponen lainnya yang

digunakan. Runtime yang digunakan terdiri dari tiga jenis runtime yaitu silverlight

runtime yaitu runtime yang digunakan agar halaman *.aspx dapat menjalankan

komponen silverlight. Kemudian ada flash runtime, runtime yang digunakan agar

halaman *.aspx dapat mengeksekusi objek flash yang berada dalam situs dan runtime

AJAX control toolkit, runtime ini digunakan oleh halaman *.aspx untuk

mengeksekusi kode AJAX yang berada dalam situs.

       Untuk berhubungan dan menggunakan objek database situs menggunakan

komponen .NET yaitu komponen .NET data source dengan antar muka .NET data

connection, komponen ini bertanggung jawab atas hubungan situs dengan komponen

basis data yang digunakan seperti, basis data Microsoft Access, basis data Microsoft

Access dan basis data XML. Komponen .NET lain yang digunakan adalah komponen

.NET flash object untuk menempatkan objek flash pada halaman *.aspx dan .NET

flash video untuk menempatkan video berbasis flash dengan ekstensi *.flv.



4.3.6 Diagram Implementasi

       Diagram ini menunjukkan bagaimana situs akan diimplementasi secara fisik,

dan komponen fisik apa saja yang terlibat. Dapat dilihat pada gambar 4.21 bahwa ada

dua node fisik yang terlibat yaitu komputer pada sisi klien atau pengguna dan server

web tempat dimana aplikasi ditempatkan. Node klien mempunyai komponen web

browser atau program penjelajah web yang digunakan pengguna untuk menjalankan
                                                                                  160




situs web. Pada node server web terdapat komponen situs web yang terdiri dari

beberapa komponen seperti sesi pengguna, forum, situs utama, dan blog yang saling

terhubung satu sama lain.




                              bookshelf:WebServer



                                            BookshelfWebSite




                                                                         Forums
:client
                                                         SesiPengguna
                                                      UserSession
          Web Browser




                                                          Situs Utama   Blogs




                        Gambar 4.23 Diagram Implementasi Situs



4.4 Persiapan Pengembangan Situs

           Dalam dalam pengembangan pembelajaran elektronik berbasis web ini,

dibutuhkan beberapa persiapan, setelah tahap pemodelan situs selesai diperlukan

persiapan dalam menentuka perangkat keras dan perangkat lunak apa saja yang

digunakan dalam pengembangan. Persiapan ini dilakukan agar pengembangan dapat

berjalan dengan baik dan menggunakan perangkat yang sesuai untuk pengembangan

agar menghasilkan keluaran akhir yang baik.
                                                                             161




4.4.1 Persiapan Perangkat Keras Pengembangan

       Perangkat keras menjadi hal yang utama pada pengembangan suatu perangkat

lunak, perangkat keras merupakan sebuah tempat berjalannya perangkat lunak

pengembangan dan perangkat lunak yang dikembangkan. Perangkat keras yang

dimaksudkan pada pengembangan situs pembelajaran elektronik ini adalah

seperangkat komputer pribadi. Pada pengembangan situs pembelajaran elektronik ini

digunakan dua jenis perangkat keras pengembangan dengan spesifikasi yang berbeda.

       Perangkat keras yang pertama yang digunakan mempunyai spesifikasi

seperangkat komputer dengan prosesor Intel Core2Duo E8400 (3.0GHz), dengan

RAM (Random Access Memory) DDR2 4 Gigabyte, dan kapasitas penyimpanan 500

Gigabyte, perangkat keras ini merupakan perangkat keras utama pengembangan situs.

Perangkat keras kedua yang digunakan adalah seperangkat komputer dengan prosesor

AMD Athlon 64 3000+ (2 GHz) RAM (Random Access Memory) DDR 1 Gigabyte,

dan kapasitas penyimpanan 80 Gigabyte, perangkat keras yang kedua merupakan

perangkat keras yang lebih digunakan untuk simulasi pengujian ketika situs web

diakses melalui komputer lain dalam satu jaringan yang sama.



4.4.2 Persiapan Perangkat Lunak Pengembangan

       Persiapan untuk perangkat lunak dalam pembuatan situs pembelajaran

elektronik dilakukan untuk mempersiapkan perangkat lunak yang sesuai dengan

karakteristik situs yang akan dikembangkan. Perangkat lunak yang digunakan dalam

pengembangan situs pembelajaran elektronik ini dibagi menjadi lima jenis yaitu
                                                                                 162




sistem operasi dan kerangka pengembangan, editor berkas, server web, basis data,

dan penjelajah web.



4.4.2.1 Sistem Operasi dan Kerangka Pengembangan

       Persiapan sistem operasi dan kerangka pengembangan dilakukan untuk

memastiakan bahwa situs web yang dikembangkan, dibuat menggunakan sistem

operasi dan kerangkan pengembangan yang sesuai. Pada pembuatan situs kali karena

situs akan dikembangkan menggunakan bahasa pemrograman web ASP.NET 3.5 SP1

maka sistem operasi yang digunakan adalah keluarga Microsoft Windows 2000 SP4

atau lebih baru, untuk menjamin kelancaran pengembangan situs. Pemilihan sistem

operasi tersebut didasari karena bahasa pemrograman ASP.NET 3.5 dapat digunakan

dengan lebih baik pada lingkungan sistem operasi Microsoft Windows, karena

kerangkan pengembangan yang dibutuhkan telah ada pada sistem operasi tersebut.

       Selain sistem operasi yang mendukung pengembangan web dengan

menggunakan ASP.NET 3.5 membutuhkan suatu kerangka pengembangan. Semua

bahasa pemrograman berbasis .NET keluaran Microsoft membutuhkan suatu

kerangka   pengembangan      yang     dikenal   dengan   .NET    Framework.     Pada

pengembangan     situs   dengan     menggunakan    ASP.NET      3.5   SP1    kerangka

pengembangan yang mendukung adalah .NET Framework 3.5 SP1, kerangka

pengembangan ini mendukung pengembangan dengan menggunakan ASP.NET 2.0

dan ASP.NET 3.5, ASP.NET 3.5 SP1, serta pengembangan Silverlight 1.0, dan

Silverlight 2.0 yang akan digunakan juga pada pengembangan situs kali ini.
                                                                                  163




4.4.2.2 Editor


       Editor merupakan perangkat lunak yang digunakan untuk menyunting

dokumen-dokumen atau file yang digunakan pada situs web yang dikembangkan.

Editor yang digunakan terbagi menjadi dua kelompok besar yaitu IDE (Integrated

Development Environment) dan pengolah grafis atau citra.

       IDE Merupakan suatu perangkat lunak yang merupakan satu kesatuan

lingkungan pengembangan perangkat lunak. Selain dibekali kemampuan untuk

menyunting teks, IDE juga dibekali kemampuan untuk melakukan pencarian

kesalahan pada kode sumber , serta mempermudah proses pengembangan perangkat

lunak dengan fasilitas yang dimiliki IDE. IDE yang digunakan pada pengembangan

web kali ini adalah Microsoft Visual Web Developer 2008 Express Edition yang

digunakan untuk pengembangan dan pengkodean dari situs web, Microsoft

Expression Web 2 Beta Preview untuk pengaturan tata letak, dan Microsoft

Expression Blend 2.5 Beta Preview untuk pengembangan aplikasi Silverlight.

       Jenis penyunting yang kedua adalah pengolah grafis atau citra Merupakan

suatu perangkat lunak yang dikhususkan untuk melakukan penyuntingan file-file

dengan ekstensi grafis (*.jpg, *.bmp, *.tif, *.gif). Pengolah grafis sangat dibutuhkan

untuk melakukan penyuntingan file-file grafis yang digunakan dalam web. Dalam

penulisan ilmiah ini penulis menggunakan pengolah grafis Adobe Illustrator CS3 dan

Microsoft Expression Design 2 Beta Preview.
                                                                               164




4.4.2.3 Server Web

       Perangkat lunak yang akan dikembangkan adalah sebuah situs pembelajaran

elektronik yang berarti perangkat lunak ini merupakan suatu situs web, maka server

web dibutuhkan agar aplikasi dapat berjalan dengan baik. Penggunaan ASP.NET 3.5

SP1 mengharuskan penggunaan web server IIS (Internet Information Services)

keluaran Microsoft. Versi IIS minimum yang dibutuhkan adalah IIS versi 6.0 yang

terdapat pada Microsoft Windows XP, dan Microsoft Windows 2003 Server,

penggunaan server web yang lebih baru sangat disarankan yaitu IIS versi 7 yang

terdapat pada Microsoft Windows Vista dan Microsoft Windows 2008 Server

       Pada pengembangan situs ini kedua versi IIS, IIS 6 dan IIS 7 digunakan untuk

menguji kompatibilitas situs web yang dikembangkan terhadap kedua server web

tersebut. Karena pengembangan dilakukan dengan menggunakan IDE Visual Web

Developer 2008 Express Edition server web yang digunakan untuk pengembangan

adalah server web mini yang terdapat pada IDE, IIS hanya akan digunakan pada saat

pengujian situs pada server web.



4.4.2.4 Basis Data

       Database yang akan digunakan pada pengembangan situs pembelajaran

elektronik ini adalah SQL Server 2008 Express Edition Advanced Pack yang sudah

termasuk antar muka pengguna untuk pengaturan basis data dan layanan pelaporan.

Untuk mendirika suatu koneksi antara halaman web dengan basis data hanya

dibutuhkan sebuah komponen .NET yang dinamakan Data Source. Komponen ini
                                                                             165




mempunyai jenis yang beragam antara lain, SQL Data Source, komponen ini

berfungsi untuk membuat koneksi langsung dengan basis data yang dibuat melalui

SQL Server, dengan menggunakan file basis data dengan ekstensi *.mdf. Kemudian

juga dimungkinkan koneksi dengan basis data Microsoft Access dengan

menggunakan komponen Access Data Source, komponen ini berfungsi untuk

membuat koneksi langsung dengan database yang dibuat melalui Microsoft Access,

dengan menggunakan file database dengan ekstensi *.mdb.

       Sumber data lainnya yang dapat digunakan adalah menggunakan suatu objek,

koneksi ini dapat dilakukan dengan menggunakan komponen Object Data Source

komponen ini berfungsi untuk membuat koneksi langsung dengan basis data tanpa

mempedulikan jenis atau perangkat lunak apa yang digunakan untuk membuat basis

data tersebut, karena komponen ini tidak menggunakan basis data tersebut secara

eksplisit, melainkan dengan implisit dengan membuat dataset terlebih dahulu dari

basis data yang akan digunakan.   Semua    perubahan   yang   dilakukan   dengan

menggunakan Object Data Source akan disimpan terlebih dahulu di dalam dataset

sebelum merubah basis data aslinya.

       ASP.Net 3.5SP1 juga mendukung penggunaan basis data XML, komponen

ini berfungsi untuk membuat koneksi langsung dengan basis data yang dibuat dengan

menggunakan XML. Pada ASP.NET 3.5 SP1 juga dikenal sumber data dengan

menggunakan peta situs, komponen ini berfungsi untuk membuat koneksi langsung

dengan basis data dengan menggunakan peta situs. Komponen data yang hanya

terdapat spesifik pada ASP.NET 3.5 SP1 adalah LINQ, LINQ merupakan akronim
                                                                             166




dari Language-Integrated-Query. LINQ digunakan untuk menyeragamkan dan

menyederhanakan bagaimana data dapat diambil dari sebuah sumber data.

       Setelah komponen sumber data diletakkan pada situs, maka untuk membuat

koneksi yang harus dilakukan adalah membuka jendela server explorer pada Visual

Studio, lalu pilih ‘connect to database’, setelah itu cari berkas basis data yang

diinginkan serta jenis file basis data yang akan digunakan.



4.4.2.5 Penjelajah Web

       Untuk memastikan bahwa situs web yang dibuat dapat berjalan dengan baik

dan dapat dieksekusi pada penjelajah web yang beredar luas, maka dibutuhkan

perangkat lunak penjelajah web yang digunakan untuk melihat hasil keluaran situs.

Dalam pengembangan web ini tidak hanya satu penjelajah web yang digunakan tetapi

ada beberapa penjelajah web yang digunakan untuk pengembangan situs. Alasan

digunakannya berbagai      macam     penjelajah   web adalah untuk   memastikan

kompatibilitas silang situs antara berbagai macam penjelajah web yang ada.

Penjelajah web yang digunakan antara lain adalah Internet Explorer 6,7 dan 8,

Mozilla Firefox 2 dan 3, Apple Safari 3 dan 4, Opera 9 , dan Google Chrome 2.

Kesemua penjelajah web tersebut merupakan penjelajah web yang umum digunakan

pengguna.

       Untuk pembuatan web yang tidak bergantung kepada CSS mungkin tidak

akan menemukan masalah yang berarti, akan tetapi web yang menggunakan CSS

sebagai elemen untuk pengaturan web, uji coba pada berbagai jenis browser mutlak
                                                                                167




diperlukan. Alasan penulis memilih Internet Explorer 6 (IE6) sebagai web browser

adalah karena sebagian besar orang menggunakan IE6 sebagai browser mereka, selain

Mozilla Firefox dan Opera, selain itu juga penggunaan IE6 dimaksudkan untuk

melihat apakah kode CSS yang penulis gunakan dapat berjalan disemua browser

untuk menguji kompatibilitas dari aplikasi berbasis web yang penulis buat.

       Pengujian akan diutamakan pada Firefox karena Firefox merupakan salah satu

browser yang mempunyai standar render halaman HTML dengan metode standard-

compliance yang lebih baik dibanding browser lainnya yang memungkinkan untuk

memeriksa validitas dari sintaks HTML yang ada pada situs dan merupakan browser

dengan pengguna terbanyak di dunia sebanyak 45.5% pengguna menggunakan

Firefox, dengan disusul oleh Internet Explorer 7 sebanyak 25.7%, Internet Explorer 6

18.5% menurut hasil survei www.w3schools.com per Januari 2009.



4.5 Pembuatan Rancangan Navigasi

       Pembuatan rancangan navigasi dilakukan untuk mengetahui arah dan alir dari

tiap halaman pada situs. Struktur navigasi pada situs pembelajaran elektronik ini

terbagi menjadi tiga bagian, situs utama, forum, dan blog. Tetapi untuk forum dan

blog hanya dapat diakses melalui situs utama, jadi struktur navigasi untuk forum dan

blog merupakan separasi dari struktur navigasi situs utama.
                                                                                                             168




4.5.1 Rancangan Struktur Navigasi Situs Utama


                    Beranda      Artikel




                                                         Komputerisasi             Struktur             Internet
                    Tutorial    Graf & Algoritma
                                                           Akuntansi                Data               & Jaringan




                                                    Bahasa               Bahasa                  Graf
                     Video      Arsitektur
                                                   Indonesia             Inggris              & Algoritma



 Halaman Login
 Dan Registrasi                   MKI              Teknik Sipil      Struktur Data



   Lupa Kata
     Kunci         Downloads




                    Forum




                     Blogs




                   Contact Us    Guest Book




                   About Us



                   Gambar 4.24 Struktur Navigasi Situs Utama



         Struktur navigasi ini menjelaskan alir dari tiap halaman yang berada pada

situs. Dari gambar 4.24 dapat dilihat bahwa struktur navigasi yang digunakan

merupakan struktur navigasi komposit atau campuran di mana setiap halaman dapat

memanggil halaman lainnya tanpa harus menuju halaman sebelumnya. Navigasi situs
                                                                                169




bermula dari halaman login dan registrasi, halaman ini tempat pengguna melakukan

proses registrasi dan proses login untuk dapat mengakses situs, halaman ini juga

merupakan halaman yang pertama kali muncul ketika mengakses situs.

       Ketika pengguna berhasil melakukan registrasi dan diteruskan dengan proses

login maka pengguna akan diarahkan ke halaman beranda, dari halaman beranda

pengguna dapat mengakses seluruh halaman yang ada pada situs dengan hirarki yang

dapat dilihat pada gambar struktur navigasi. Halaman artikel merupakan halaman

yang berada di bawah halaman beranda, tetapi halaman artikel juga dapat diakses dari

halaman lain pada situs. Halaman artikel berisikan artikel tentang situs dan artikel

lainnya tentang pembelajaran elektronik. Halaman beranda juga memungkinkan akses

pengguna menuju halaman tutorial.

       Halaman tutorial merupakan halaman yang memuat tutorial aplikasi

multimedia interaktif berbasis yang terdapat pada halaman lainnya yang mempunyai

tingkatan di bawah halaman tutorial. Halaman pembelajaran interaktif meliputi

halaman graf dan algoritma, halaman komputerisasi akuntansi, halaman struktur data,

dan halaman internet dan jaringan. Semua halaman tersebut mempunyai alur navigasi

ke halaman lainnya pada situs. Kemudian terdapat halaman showcase tempat dimana

pengguna dapat melihat video tutorial interaktif, video tutorial dapat diakses

pengguna melalui halaman arsitektur, bahasa Indonesia, bahasa Inggris, graf dan

algoritma, MKI, teknik sipil, dan struktur data, penamaan halaman melambangkan isi

yang ada pada halaman tersebut. Semua halaman yang terdapat pada hirarki showcase

dapat diakses melalui halaman manapun.
                                                                                            170




          Halaman lainnya yang terdapat pada situs utama adalah halaman download,

halaman ini berisikan materi yang dapat diunduh oleh pengguna. Halaman download

dapat diakses dari halaman manapun yang terdapat pada situs. Selain itu terdapat juga

halaman Contact            Us dan halaman About Us. Halaman contact us merupakan

halaman tempat alamat kontak pembuat situs, halaman contact us dapat diakses dari

halaman manapun pada situs, di dalam halaman contact us terdapat halaman

guestbook. Halaman guestbook merupakan tempat pengguna untuk memberikan

umpan balik terhadap situs yang telah mereka kunjungi, halaman ini hanya dapat

diakses melalui halaman contact us. Halaman about us menampilkan informasi

tentang tim pembuat situs. Forum dan blog bukan merupakan halaman yang terdapat

pada situs utama tetapi merupakan tautan yang mengarahkan pengguna ke situs lain

yaitu situs untuk forum dan blog.



4.5.2 Rancangan Struktur Navigasi Forum



   Home         Register         User List     Search       Profile      Administrasi   Login




 View Topics    Post Reply
                                Password       Identity   Information




                                    Start                                  Setting




  Categories       Forum         Information     Setup     Groups       Announcement    Users



                             Gambar 4.25 Struktur Navigasi Forum
                                                                                   171




       Struktur navigasi ini memperlihatkan bagaimana alur pengguna dalam

menggunakan forum yang ada pada situs. Terdapat tujuh halaman dengan hirarki

teratas yang dapat langsung diakses oleh pengguna. Jika dilihat pada gambar struktur

navigasi yang digunakan adalah struktur navigasi komposit, dengan struktur ini

memungkinkan pengguna berpindah halaman tanpa harus melalui halaman

sebelumnya, dan dapat mengakses halaman yang diinginkan dari halaman manapun

pada situs. Halaman pertama yang akan muncul setelah pengguna membuka situs

web adalah halaman home atau beranda, tetapi pengguna belum dapat menggunakkan

forum jika belum melakukan login pada halaman login. Halaman home berisikan

forum yang dibuat oleh administrator dengan topik dan balasan yang dibuat oleh

pengguna forum. Topik akan dimuat pada halaman View Topics dan dimuat pada

halaman Post Reply.

       Halaman berikutnya adalah halaman Register, halaman ini merupakan

halaman dimana pengguna dapat melakukan proses registrasi untuk dapat

mengunakan forum. Kemudian juga terdapat halaman User List, pada halaman ini

ditampilkan informasi tentang siapa saja pengguna forum dan status pengguna forum

pada saat itu, apakah aktif atau tidak aktif. Pada forum juga terdapat fungsi pencarian

yang terdapat di dalam halaman Search, halaman ini dapat digunakan untuk

melakukan pencarian terhadap topik dan balasan pada forum.

       Halaman lainnya adalah halaman Profile, halaman ini digunakan untuk

melakukan pengaturan profil pengguna. Pengaturan profil pengguna meliputi

perubahan password atau kata kunci yang dapat dilakukan pada halaman Password,
                                                                                                  172




perubahan identitas pengguna yang dapat dilakukan pada halaman identitas, serta

menampilkan informasi dari pengguna dari halaman informasi. Untuk melakukan

pengaturan forum disediakan halaman administrasi yang di dalamnya terdapat

beberapa fungsi pengaturan situs. Halaman administrasi dibagi menjadi dua bagian

yaitu Start, dan Settings, Start berisikan pengaturan forum secara umum dimana

administrator dapat membuat kategori forum baru pada halaman Categories,

melakukan pengaturan umum pada forum melalui halaman Forum, serta melihat

informasi umum dari forum melalui halaman Information. Bagian Settings berisikan

pengaturan pada pengguna forum pada halaman Users, pengaturan informasi umum

blog pada halaman Setup, pembuatan pengumuman pada forum pada halaman

Announcement Page, dan pengaturan kelompok pengguna pada Groups.



4.5.3 Rancangan Struktur Navigasi Blog



   Home          Archive           Contact       Subscribe        Log in / Log off    Administration




   Blogs




   Add Entry    Blogroll      Categories     Pages      Referrers          Profiles




    Controls   PingServices       Settings     Users         Extensions



                           Gambar 4.26 Struktur Navigasi Blog
                                                                             173




       Struktur navigasi pada gambar 4.26 memperlihatkan alut navigasi pengguna

pada blog. Pada blog terdapat enam halaman yang dapat diakses oleh pngguna blog,

dengan halaman pertama yang akan terbuka ketika pengguna mengakses situs

adalahan halaman Home atau beranda. Struktur navigasi yang digunakan pada blog

adalah struktur navigasi komposit, dengan semua halaman dapat berhubungan antar

satu dengan yang lainnya. Pada halaman beranda pengguna dapat melihat blog

terakhir yang dibuat oleh pengguna dan widget lainnya yang ada pada blog. Halaman

pengguna merupakan tempat dimana pengguna mengawali aktifitas dalam

menggunakan blog.

       Halaman lainnya yang terdapat pada blog adalah halaman Archive, halaman

archive merupakan tempat untuk menampilkan arsip dari blog yang telah ditulis

pengguna. Kemudian terdapat halaman kontak untuk mengirimkan umpan balik

kepada administrator situs dan meminta akun pengguna kepada administrator situs.

Terdapat juga halaman Subscribe, halaman ini berfungsi untuk melakukan sindikasi

pada blog dengan menggunakan RSS (Really Simple Syndication). Halaman untuk

log in atau log off pengguna juga dapat diakses melalui beranda, atau halaman

lainnya pada situs.

       Halaman berikutnya yang terdapat pada situs merupakan halaman

Administration dimana pengguna dapat melakukan pengaturan pada blog mereka.

Pada halaman administrasi pengguna dapat membuat entri blog bari dengan

menggunakan halaman Add Entry yang ada pada halaman administrator, mengatur

tampilan blogroll dan jumlah blogroll yang ditampilkan pada halaman blogroll,
                                                                                174




pengaturan kategori blog pada halaman Categories, pembuatan halaman statis baru

pada halaman Pages, pengaturan penjejakan acuan blog pada halaman Refferers, dan

pengaturan profil serta identitas pengguna pada halaman Profiles. Halaman

administration juga mempunyai beberapa halaman yang hanya dapat digunakan oleh

administrator situs seperti halaman Controls untuk pengaturan jumlah post dan

komentar yang ditampilkan, halaman PingServices untuk menambahkan fungsi ping

kepada host yang dituju, halaman Settings untuk melakukan pengaturan dasar pada

blog, halaman Users untuk melakukan pengaturan pada akun pengguna blog, dan

halaman Extensions untuk melakukan pengaturan atas paket perluasan dari blog.



4.6 Rancangan Halaman Situs

       Rancangan halaman diperlukan untuk membuat suatu model sebelum situs

dibuat sebagai acuan ketika pembuatan halaman situs. Rancangan yang dibuat berupa

suatu model visual yang dibuat mendekati apa yang akan dibuat menjadi sebuah

model fisik atau situs yang dibuat. Pada bagian selanjutnya akan diperlihatkan

rancangan yang nantinya akan diterapkan pada tiap halaman yang terdapat pada situs

berserta penjelasan dan maksud dari rancangan tersebut.



4.6.1 Rancangan Halaman Registrasi dan Log In

       Halaman ini merupakan halaman pertama yang akan berinteraksi dengan

pengguna ketika pengguna membuka situs. Pada halaman ini pengguna akan

dihadapkan dengan dua bagian kolom isian. Bagian kolom isian yang pertama adalah
                                                                               175




kolom isian login. Bagian ini digunakan oleh pengguna untuk dapat mengakses situs

menggunakan akun pengguna yang telah ada dengan memberikan nama pengguna

dan kata sandi. Bagian yang kedua adalah bagian sign up dimana pengguna dapat

melakukan registrasi dengan memberikan informasi pada kolom isian untuk

mendapatkan akun pengguna.

        Elemen lain yang ditampilkan pada halaman ini adalah judul situs,

pemberitahuan persyaratan untuk dapat membuka situs dengan baik, dan notifikasi

pengguna. Notifikasi pengguna ditampilkan sebagai umpan balik dari serangkaian

kegiatan yang dilakukan oleh pengguna.




    Login
    User Name
    Password
    Remember Me


    Lupa Password            Log In
                                                    Sign Up
                                                    User Name
                                                    Password
                                                    Confirm Password

    Judul Situs                                     E-Mail
                                                    Security Question
                                                    Security Answer


                                                    Tempat Notifikasi


                                                                        Next
     Pemberitahuan Singkat




                  Gambar 4.27 Rancangan Halaman Registrasi dan Log In
                                                                                  176




4.6.2 Rancangan Halaman Notifikasi Registrasi

        Halaman notifikasi registrasi merupakan halaman yang serupa dengan

halaman registrasi, hanya saja halaman ini muncul sebagai umpan balik ketika

pengguna telah berhasil melakukan regitrasi pada situs. Elemen yang ditampilkan

terdiri dari bagian login untuk pengguna memberikan akun pengguna untuk dapat

menggunakan situs, judul situs, dan notifikasi bahwa pengguna telah berhasil

melakukan registrasi.

        Pada kenyataanya model fisik yang digunakan tidak berpindah halaman,

ketika pengguna berhasil melakukan registrasi halaman tidak berpindah, melainkan

hanya bagian sign up yang berubah dan menampilkan umpan balik.



    Login
    User Name
    Password
    Remember Me


    Lupa Password            Log In
                                                      Sign Up
                                                       Tempat Notifikasi



    Judul Situs                                                            Next




     Pemberitahuan Singkat




                    Gambar 4.28 Rancangan Halaman Notifikasi Registrasi
                                                                                        177




4.6.3 Rancangan Klise Halaman Utama

       Klise atau yang biasa kita kenal dengan template dalam bahasa inggris

merupakan suatu cetakan yang digunakan untuk membuat objek lainnya sesuai

dengan klise tersebut.

                                                                          Status Pengguna

   Judul Situs
                                                         Pencarian   Kotak Pencarian

  Menu Navigasi




                                  Animasi Silverlight




                            Isi Situs                                    Isi Situs




      Animasi Silverlight          Animasi Silverlight         Animasi Silverlight




                                                                          Catatan Kaki




                  Gambar 4.29 Rancangan Klise Halaman Utama
                                                                                  178




       Gambar 4.29 menunjukkan struktur dari klise yang akan membentuk halaman

yang akan dibuat degan menggunakan klise ini. Halaman yang akan dibentuk

menggunakan klise pada gambar 4.29 antara lain adalah halaman Home atau beranda,

halaman artikel, halaman unduhan, halaman awal video tutorial, dan halaman awal

aplikasi multimedia interaktif. Halaman klise ini mempunyai beberapa elemen yang

terdapat di dalamnya antara lain judul situs tempat menempatkan logo atau nama

situs dengan format gambar, di sebelah kanan atas terdapat tulisan yang menampilkan

status pengguna apakah sedang berada pada status log in atau log off, dan terdapat

kotak pencarian untuk melakukan pencarian.

       Navigasi pada situs dilakukan dengan menggunakan menu navigasi yang

terdapat di bawah judul dan kotak pencarian, menu navigasi memungkinkan

pengguna secara leluasa untuk berpindah antar halaman pada situs. Tepat di bawah

menu navigasi terdapat animasi silverlight sebagai banner dari situs, banner berisikan

gambar dan tulisan tentang situs. Tepat di bawah animasi silverlight terdapat dua

kolom yang merupakan tempat dimana isi dari situs ditempatkan. Dua kolom ini

merupakan satu-satunya elemen pada halaman yang dapat dirubah isinya. Karena

elemen lain merupakan klise dan kedua kolom isi situs yang akan menjadi tempat dari

situs. Tepat di bawah kolom isi situs terdapat tiga animasi silverlight, animasi ini

berfungsi sebagai tautan cepat ke halaman lainnya yang terdapat pada situs. Pada

bagian bawah klise halaman terdapat catatan kaki yang menampilkan nama situs dan

tahun pembuatan situs serta pemberitahuan legalitas situs.
                                                                                                      179




4.6.4 Rancangan Klise Halaman Video Streaming

            Klise ini digunakan sebagai acuan pengaturan tata letak beberapa halaman

pada situs yang mempunyai fungsi untuk menampilkan streaming video. Pada

gambar 4.30 dapat dilihat visualisasi tata letak halaman.

                                                                                        Status Pengguna

   Judul Situs
                                                                       Pencarian   Kotak Pencarian

  Menu Navigasi




                                                 Animasi Silverlight



   Navigasi Tab    Navigasi Tab   Navigasi Tab   Navigasi Tab

    Judul

    Penjelasan Singkat




                                         Video Streaming Area




     Tombol Kontrol Video




                                                                                        Catatan Kaki




                  Gambar 4.30 Rancangan Klise Halaman Video Streaming
                                                                                 180




       Pada gambar 4.30 dapat dilihat bahwa klise mempunyai beberapa elemen

yang terdapat di dalam klise hampir serupa dengan elemen yang terdapat pada klise

halaman utama. Elemen yang terdapat pada klise ini adalah judul situs pada pojok kiri

atas, status pengguna pada pojok kanan atas klise, kotak pencarian untuk melakukan

pencarian, menu navigasi sebagai navigasi situs, animasi silverlight dengan tujuan

sebagai banner situs, dan catatan kaki yang menampilkan nama situs dan tahun

pembuatan situs serta pemberitahuan legalitas situs.

       Perbedaan mendasar antara klise halaman video streaming dengan klise

halaman utama terletak pada isi situs. Pada klise halaman video streaming isi situs

merupakan area untuk ditempatkannya video pada halaman situs. Tepat di atas area

video streaming terdapat navigasi tab, navigasi berbentuk tab ini dimaksudkan untuk

memungkinkan pengguna merubah video yang mereka inginkan dengan cepat dan

tanpa harus berpindah halaman. Tepat di tengah area video streaming merupakan

tempat dimana isi dari video ditempatkan, dengan tombol kontol video yang terdapat

pada bagian bawah video.

       Klise halaman video streaming akan digunakan untuk beberapa halaman pada

situs yang memuat isi video pada halamannya. Halaman yang akan menggunakan

klise ini antara lain halaman video arsitektur, halaman video bahasa Indonesia,

halaman video bahasa Inggris, halaman video MKI, halaman video teknik sipil,

halaman video graf dan algoritma, dan halaman video struktur data.
                                                                                                     181




4.6.5 Rancangan Klise Halaman Tutorial

            Klise ini digunakan sebagai acuan pengaturan tata letak beberapa halaman

pada situs yang mempunyai fungsi untuk menampilkan aplikasi multimedia interaktif.

Pada gambar 4.31 dapat dilihat visualisasi tata letak halaman.

                                                                                       Status Pengguna

   Judul Situs
                                                                      Pencarian   Kotak Pencarian

  Menu Navigasi




                                                Animasi Silverlight



   Navigasi Tab   Navigasi Tab   Navigasi Tab   Navigasi Tab

    Judul

    Penjelasan Singkat




                                         Multimedia Interaktif




                                                                                       Catatan Kaki




                      Gambar 4.31 Rancangan Klise Halaman Tutorial
                                                                                182




       Pada gambar 4.31 dapat dilihat bahwa klise mempunyai beberapa elemen

yang terdapat di dalam klise hampir serupa dengan elemen yang terdapat pada klise

halaman video streaming. Elemen yang terdapat pada klise ini adalah judul situs pada

pojok kiri atas, status pengguna pada pojok kanan atas klise, kotak pencarian untuk

melakukan pencarian, menu navigasi sebagai navigasi situs, animasi silverlight

dengan tujuan sebagai banner situs, dan catatan kaki yang menampilkan nama situs

dan tahun pembuatan situs serta pemberitahuan legalitas situs.

       Perbedaan mendasar antara klise halaman video streaming dengan klise

halaman tutorial terletak pada isi situs. Pada klise halaman tutorial isi situs

merupakan area untuk ditempatkannya aplikasi multimedia interaktif pada halaman

situs. Tepat di atas aplikasi multimedia interaktif terdapat navigasi tab, navigasi

berbentuk tab ini dimaksudkan untuk memungkinkan pengguna merubah isi dari

aplikasi multimedia interaktif yang mereka inginkan cepat dan tanpa harus berpindah

halaman. Tepat di tengah merupakan tempat dimana isi dari aplikasi multimedia

interaktif ditempatkan.

       Klise halaman tutorial akan digunakan untuk beberapa halaman pada situs

yang memuat isi aplikasi multimedia interaktif pada halamannya. Halaman yang akan

menggunakan klise ini antara lain halaman komputerisasi akuntansi, halaman graf

dan algoritma, halaman struktur data, halaman internet dan jaringan, halaman

matematika dasar, dan halaman Bahasa Indonesia.
                                                                                         183




4.6.6 Rancangan Klise Halaman Buku Tamu

        Klise ini digunakan sebagai acuan pengaturan tata letak beberapa halaman

pada situs yang mempunyai fungsi untuk menampilkan buku tamu. Pada gambar 4.32

dapat dilihat visualisasi tata letak halaman.

                                                                           Status Pengguna

   Judul Situs
                                                          Pencarian   Kotak Pencarian

   Menu Navigasi




                                    Animasi Silverlight




                                                                           Catatan Kaki




                   Gambar 4.32 Rancangan Klise Halaman Buku Tamu
                                                                              184




       Pada gambar 4.32 dapat dilihat bahwa klise mempunyai beberapa elemen

yang terdapat di dalam klise hampir serupa dengan elemen yang terdapat pada klise

halaman lainnya. Elemen yang terdapat pada klise ini adalah judul situs pada pojok

kiri atas, status pengguna pada pojok kanan atas klise, kotak pencarian untuk

melakukan pencarian, menu navigasi sebagai navigasi situs, animasi silverlight

dengan tujuan sebagai banner situs, dan catatan kaki yang menampilkan nama situs

dan tahun pembuatan situs serta pemberitahuan legalitas situs.

       Pada klise halaman buku tamu isi situs merupakan area untuk ditempatkannya

form isiang pengguna untuk memberikan umpan balik pada halaman situs dan

menampilkan umpan balik tersebut. Tepat di tengah merupakan tempat dimana isi

dari aplikasi multimedia interaktif ditempatkan. Klise halaman buku tamu akan

digunakan untuk beberapa halaman pada situs yang memuat berhubungan dengan

pemberian umpan balik pengguna. Halaman yang akan menggunakan klise ini antara

lain halaman awal buku tamu dan halaman entri buku tamu.



4.6.6.1 Rancangan Halaman Entri dan Tampilan Buku Tamu

       Klise ini digunakan sebagai acuan pengaturan tata letak halaman pada situs

yang mempunyai fungsi untuk menampilkan form entri buku tamu. Pada gambar 4.33

dapat dilihat visualisasi tata letak halaman.

       Pada gambar 4.33 dapat dilihat bahwa halaman entri buku tamu mempunyai

beberapa elemen yang terdapat terdapat pada klise halaman buku tamu, hal ini

dikarenakan halaman ini menggunakan klise halaman buku tamu sebagai acuan.
                                                                                      185




Elemen yang terdapat pada klise ini identik dengan elemen yang terdapat pada klise.

Perbedaan yang terdapat hanya pada isi situs dimana terdapat beberapa elemen

tambahan.

                                                                        Status Pengguna

  Judul Situs
                                                       Pencarian   Kotak Pencarian

  Menu Navigasi




                                 Animasi Silverlight



  Navigasi Tab    Navigasi Tab

   Judul
   Nama Anda

   Alamat Email

   Telepon

   Komentar




                      Submit




                                                                        Catatan Kaki




       Gambar 4.33 Rancangan Halaman Entri dan Tampilan Buku Tamu
                                                                                                        186




       Elemen tambahan yang terdapat pada halaman entri buku tamu adalah berupa

kolom isian yang dapat digunakan pengguna untuk memberikan umpan balik kepada

situs. Isian tersebut terdiri dari empat kolom yang dapat menerima entri dari

pengguna, kolom tersebut adalah kolom isian nama pengguna, alamat surat elektronik

pengguna, nomor telepon pengguna, dan komentar pengguna serta tombol untuk

mengirimkan dan menyimpan umpan balik dari pengguna.

                                                                                      Status Pengguna

       Judul Situs
                                                                     Pencarian   Kotak Pencarian

       Menu Navigasi




                                               Animasi Silverlight



       Navigasi Tab    Navigasi Tab

        Ringkasan Buku Tamu
        Nama Pengguna         Nama Pengguna

        Komentar              Komentar


        Ringkasan Buku Tamu




                                              Tabel Buku Tamu




                                                                                      Catatan Kaki




      Gambar 4.34 Rancangan Halaman Entri dan Tampilan Buku Tamu
                                                                                  187




       Untuk bagian tampilan buku tamu yang berfungsi untuk menampilkan entri

buku tamu dari pengguna menggunakan halaman yang sama dengan halaman entri

buku tamu. Untuk melihat hasil dari entri pengguna pada buku tamu, pengguna dapat

menggunakan navigasi tab pada halaman seperti yang tampak pada gambar 4.34.

maka isi dari situs akan menampilkan hasil entri buku tamu dari pengguna tanpa

harus berpindah halaman. Halaman untuk menampilkan entri buku tamu dapat dilihat

pada gambar 4.34.



4.6.7 Rancangan Klise Halaman Manajemen Pengguna

       Klise ini digunakan sebagai acuan pengaturan tata letak halaman pada situs

yang mempunyai fungsi untuk menampilkan pengaturan dan manajemen pengguna

situs. Pada gambar 4.35 dapat dilihat visualisasi tata letak halaman.

       Pada gambar 4.35 dapat dilihat bahwa klise mempunyai beberapa elemen

yang terdapat di dalam klise hampir serupa dengan elemen yang terdapat pada klise

halaman lainnya. Elemen yang terdapat pada klise ini adalah judul situs pada pojok

kiri atas, status pengguna pada pojok kanan atas klise, kotak pencarian untuk

melakukan pencarian, menu navigasi sebagai navigasi situs, animasi silverlight

dengan tujuan sebagai banner situs, dan catatan kaki yang menampilkan nama situs

dan tahun pembuatan situs serta pemberitahuan legalitas situs.

       Pada    klise   halaman    manajemen     isi   situs   merupakan   area   untuk

ditempatkannya elemen-elemen pengaturan terhadap pengguna situs. Klise halaman

buku tamu akan digunakan untuk beberapa halaman pada situs yang memuat
                                                                                     188




berhubungan dengan manajemen pengguna situs. Halaman yang akan menggunakan

klise ini antara lain halaman pengembalian kata sandi, halaman manajemen pengguna

dan halaman manajemen buku tamu.

                                                                       Status Pengguna

  Judul Situs
                                                      Pencarian   Kotak Pencarian

  Menu Navigasi




                                Animasi Silverlight




                                    Isi Situs




                                                                       Catatan Kaki




          Gambar 4.35 Rancangan Klise Halaman Manajemen Pengguna
                                                                                                    189




4.6.7.1 Rancangan Halaman Pengembalian Kata Sandi

        Halaman pengembalian kata sandi digunakan untuk pengembalian kata sandi

kepada pengguna yang lupa terhadap kata sandinya. Halaman ini menggunakan klise

halaman manajemen pengguna sehingga tata letak menyerupai klise tersebut, seperti

dilihat pada gambar 4.36.

                                                                                  Status Pengguna

     Judul Situs
                                                                 Pencarian   Kotak Pencarian

     Menu Navigasi




                                           Animasi Silverlight




      Widget Pengembalian Kata Sandi
      Nama Anda

                                      Submit



      Penggantian Kata Sandi
      Kata Kunci

      Kata Kunci Baru

      Konfirmasi Kata Kunci Baru

       Rubah Kata Kunci       Batal




                                      Petunjuk Penggunaan




                                                                                  Catatan Kaki




            Gambar 4.36 Rancangan Halaman Pengembalian Kata Sandi
                                                                                 190




       Elemen yang terdapat pada halaman pengembalian kata sandi mewariskan

elemen yang terdapat pada klise halaman manajemen pengguna, hanya saja halaman

ini mempunyai beberapa elemen tambahan pada bagian isi situs. Elemen ini

digunakan sebagai alat untuk berinteraksi kepada pengguna dalam pengembalian kata

sandi. Pada pengembalian kata sandi tempat untuk memberikan nama pengguna

sebelum melakukan prosedur pengembalian kata sandi dan diteruskan dengan

mengklik tombol, seperti yang tampak pada gambar 4.36. Terdapat juga elemen yang

memungkinkan pengguna untuk mengganti kata sandi mereka. Penggantian kata

sandi mempunyai tiga kolom isian untuk masing-masing informasi yang berbeda

yaitu, isian kata kunci, isian untuk kata kunci baru, dan isian untuk konfirmasi kata

kunci baru yang disertai dengan tombol untuk melanjutkan dan membatalkan.

       Pada bagian terbawah dari halaman terdapat pentunjuk penggunaan dari

halaman yang dapat membantu pengguna dalam perubahan dan pengembalian kata

kunci. Setiap pengiriman nilai yang dilakukan pada halaman ini akan diteruskan

dengan umpan balik kepada pengguna pada halaman yang sama. Seperti yang tampak

pada gambar 4.37.

       Halaman akan menampilkan umpan balik kepada pengguna, pada elemen

pengembalian kata sandi, akan ditanyakan pertanyaan keamanan dan pengguna akan

memberikan jawaban atas pertanyaan yang diajukan, ketika proses berhasil maka

halaman akan menampilkan konfirmasi bahwa proses pengembalian kata kunci telah

berhasil. Hal yang serupa juga berlaku pada penggantian kata sandi setelah pengguna

memberikan informasi yang dibutuhkan untuk perubahan kata sandi maka pada
                                                                                                  191




halaman akan ditampilkan umpan balik berupa konfirmasi bahwa proses perubahan

kata sandri telah berhasil.




                                                                                    Status Pengguna

   Judul Situs
                                                                   Pencarian   Kotak Pencarian

   Menu Navigasi




                                     Animasi Silverlight




    Widget Pengembalian Kata Sandi
    Pertanyaan                            Konfirmasi yang ditampilkan
    Jawaban
                                           Kata Kunci Telah Dikirim
                                Submit

    Penggantian Kata Sandi
     Kata Kunci Telah Dirubah




     Rubah Kata Kunci   Batal




                                Petunjuk Penggunaan




                                                                                    Catatan Kaki




           Gambar 4.37 Umpan Balik Halaman Pengembalian Kata Sandi
                                                                                                             192




4.6.7.2 Rancangan Halaman Manajemen Pengguna

           Halaman manajemen pengguna digunakan untuk pengaturan data mengenai

pengguna situs. Halaman ini menggunakan klise halaman manajemen pengguna

sehingga tata letak menyerupai klise tersebut, seperti dilihat pada gambar 4.38.

                                                                                               Status Pengguna

  Judul Situs
                                                                              Pencarian   Kotak Pencarian

  Menu Navigasi




                                                Animasi Silverlight



  Navigasi Tab    Navigasi Tab   Navigasi Tab   Navigasi Tab   Navigasi Tab

   Judul

   Penjelasan Singkat




                                                   Tabel Area




                  Area Penyuntingan




                                                                                               Catatan Kaki




                 Gambar 4.38 Rancangan Halaman Manajemen Pengguna
                                                                               193




       Pada gambar 4.38 dapat dilihat bahwa halaman mempunyai beberapa elemen

yang terdapat di dalam klise. Elemen yang terdapat pada halaman ini adalah judul

situs pada pojok kiri atas, status pengguna pada pojok kanan atas klise, kotak

pencarian untuk melakukan pencarian, menu navigasi sebagai navigasi situs, animasi

silverlight dengan tujuan sebagai banner situs, dan catatan kaki yang menampilkan

nama situs dan tahun pembuatan situs serta pemberitahuan legalitas situs.

       Pada halaman manajemen pengguna isi situs merupakan area untuk

ditempatkannya tabel dan area penyuntingan pada halaman situs. Tepat di atas

terdapat navigasi tab yang berfungsi untuk berpindah antar isi pengaturan pengguna,

navigasi berbentuk tab ini dimaksudkan untuk memungkinkan pengguna merubah isi

dari halaman manajemen pengguna yang mereka inginkan cepat dan tanpa harus

berpindah halaman.

       Pada halaman manajemen pengguna terdapat dua elemen yang membantu

kegiatan pengaturan pengguna. Elemen tersebut adalah area tabel dan area

penyuntingan. Area tabel merupakan area dimana ditempatkannya tabel yang

berhubungan dengan data pengguna sedangkan area penyuntingan merupakan tempat

penyuntingan data pengguna yang diinginkan berdasarkan informasi yang didapatkan

pada area tabel.
                                                                                        194




4.6.8 Rancangan Halaman About Us

        Halaman about us digunakan untuk menampilkan informasi tentang pembuat

situs. Halaman ini mempunyai tata letak yang hampir serupa dengan halaman lainnya

yang terdapat pada situs seperti dilihat pada gambar 4.39.

                                                                          Status Pengguna

  Judul Situs
                                                         Pencarian   Kotak Pencarian

  Menu Navigasi




                                  Animasi Silverlight




                                      Isi Situs




                                                                          Catatan Kaki




              Gambar 4.39 Rancangan Rancangan Halaman About Us
                                                                                 195




       Pada gambar 4.39 dapat dilihat bahwa halaman mempunyai beberapa elemen

yang terdapat di dalam klise ataupun halaman lainnya pada situs. Elemen yang

terdapat pada halaman ini adalah judul situs pada pojok kiri atas, status pengguna

pada pojok kanan atas klise, kotak pencarian untuk melakukan pencarian, menu

navigasi sebagai navigasi situs, animasi silverlight dengan tujuan sebagai banner

situs, dan catatan kaki yang menampilkan nama situs dan tahun pembuatan situs serta

pemberitahuan legalitas situs. Pada halaman about us isi situs merupakan area untuk

menampilkan informasi tentang pembuat situs.



4.7 Perancangan Basis Data

       Situs pembelajaran elektronik sangat bergantung pada basis data untuk

mendukung fungsi manajemen pengguna pada situs. Nama basis data yang digunakan

adalah ASPNETDB.mdf dan GuestData.mdf. Nama basis data ASPNETDB.mdf

merupakan basis data yang dibuat oleh fungsi manajemen pengguna yang disediakan

oleh ASP.NET yang dapat dikostumisasi menurut pengguna. Di dalam kedua basis

yang digunakan pada situs terdapat total sebanyak 12(dua belas) tabel, yaitu tabel

aspnet_Applications,       aspnet_Membership,         aspnet_Paths,    aspnet_Paths,

aspnet_PersonalizationAllUsers,     aspnet_PersonalizationPerUser,    aspnet_Profile,

aspnet_Roles,     aspnet_SchemaVersions,       aspnet_Users,    aspnet_UsersInRoles,

aspnet_WebEvent_Events, dan GuestTable. Rancangan tabel-tabel tersebut dapat

dilihat dalam deskripsi data pada tabel-tabel dibawah ini.
                                                                                       196




4.7.1 Perancangan Basis Data Situs Utama

          Tabel yang pertama adalah aspnet_Applications, tabel ini digunakan untuk

penyimpanan data dari aplikasi atau web yang dibuat. Deskripsi rancangan tabel

secara rinci dapat dilihat pada tabel 4.9.

                 Tabel 4.9 Rancangan Struktur aspnet_Applications

Atribut                     Tipe Data           Panjang    Constraint      Keterangan

ApplicationName             nvarchar            256        Not Null

LoweredApplicationName nvarchar                 256        Not Null

ApplicationId               uniqueidentifier ~             Primary Key

                                                           Not Null

Description                 nvarchar            256



          Tabel yang kedua adalah tabel aspnet_Membership, tabel ini merupakan tabel

yang digunakan untuk penyimpanan data keanggotaan pengguna. Deskripsi

rancangan tabel secara rinci dapat dilihat pada tabel 4.10.

                Tabel 4.10 Rancangan Struktur aspnet_Membership

   Atribut                   Tipe Data           Panjang    Constraint    Keterangan

   ApplicationId             uniqueidentifier    ~          Primary Key

                                                            Foreign Key

                                                            Not Null

   UserId                    uniqueidentifier    ~          Primary Key

                                                            Foreign Key

                                                            Not Null
                                                                       197




Atribut                Tipe Data   Panjang   Constraint   Keterangan

Password               nvarchar    128       Not Null

PasswordFormat         int                   Not Null

PasswordSalt           nvarchar    128       Not Null

MobilePIN              nvarchar    16

Email                  nvarchar    256

LoweredEmail           nvarchar    256

PasswordQuestion       nvarchar    256

PasswordAnswer         nvarchar    256

IsApproved             bit                   Not Null

IsLockedOut            bit                   Not Null

CreateDate             datetime              Not Null

LastLoginDate          datetime              Not Null

LastPasswordChangeD    datetime              Not Null
ate

LastLockoutDate        datetime              Not Null

FailedPasswordAttemp   int                   Not Null
tCount

FailedPasswordAttemp   datetime              Not Null
tWindowStart

FailedPasswordAnswer   int                   Not Null
Count

FailedPasswordAnswer   datetime              Not Null
AttemptWindowStart

Comment                ntext
                                                                                 198




          Tabel yang selanjutnya adalah tabel aspnet_Paths, tabel ini merupakan tabel

yang digunakan untuk penyimpanan path atau jejak aplikasi ke beberapa tabel yang

menyimpan pengaturan pengguna. Deskripsi rancangan tabel secara rinci dapat

dilihat pada tabel 4.11.

                    Tabel 4.11 Rancangan Struktur aspnet_Paths

Atribut                     Tipe Data       Panjang   Constraint        Keterangan

ApplicationId               uniqueidentifier ~        Foreign Key

                                                      Not Null

PathId                      uniqueidentifier ~        Primary Key

                                                      Not Null

Path                        nvarchar        256       Not Null

LoweredPath                 nvarchar        256       Not Null



          Tabel aspnet_PersonalizationAllUsers dibuat untuk penyimpanan data yang

berkaitan dengan pengaturan personalisasi semua pengguna yang berlaku untuk

semua pengguna. Deskripsi rancangan tabel secara rinci dapat dilihat pada tabel 4.12.

           Tabel 4.12 Rancangan Struktur aspnet_PersonalizationAllUsers

Atribut                     Tipe Data       Panjang   Constraint        Keterangan

PathId                      uniqueidentifier ~        Primary Key

                                                      Foreign Key

                                                      Not Null

PageSettings                image           ~         Not Null

LastUpdateDate              datetime                  Not Null
                                                                                   199




          Tabel aspnet_PersonalizationPerUser dibuat untuk penyimpanan data yang

berkaitan dengan pengaturan personalisasi pengguna yang berlaku untuk pengguna

tertentu. Deskripsi rancangan tabel secara rinci dapat dilihat pada tabel 4.13.

           Tabel 4.13 Rancangan Struktur aspnet_PersonalizationPerUser

Atribut                    Tipe Data         Panjang    Constraint         Keterangan

Id                         uniqueidentifier ~           Primary Key

                                                        Not Null

PathId                     uniqueidentifier ~           Foreign Key

UserId                     uniqueidentifier ~           Foreign Key

PageSettings               image             ~          Not Null

LastUpdateDate             datetime



          Tabel aspnet_Profiles merupakan tabel yang digunakan untuk penyimpanan

data profil beserta pengaturan pengguna. Deskripsi rancangan tabel secara rinci dapat

dilihat pada tabel 4.14.

                   Tabel 4.14 Rancangan Struktur aspnet_Profiles

Atribut                    Tipe Data         Panjang    Constraint         Keterangan

UserId                     uniqueidentifier ~           Primary Key

                                                        Foreign Key

                                                        Not Null

PropertyNames              ntext             ~          Not Null

PropertyValuesString       ntext             ~          Not Null
                                                                                   200




Atribut                    Tipe Data        Panjang    Constraint         Keterangan

PropertyValuesBinary       image            ~          Not Null

LastUpadateDate            datetime                    Not Null



          Untuk menyimpan data tentang peran pengguna yang nantinya akan

digunakan sebagai fitur tingkatan otentikasi pengguna digunakan tabel aspnet_Roles.

Deskripsi rancangan tabel secara rinci dapat dilihat pada tabel 4.15.

                    Tabel 4.15 Rancangan Struktur aspnet_Roles

Atribut                    Tipe Data        Panjang    Constraint         Keterangan

ApplicationId              uniqueidentifier ~          Foreign Key

                                                       Not Null

RoleId                     uniqueidentifier ~          Primary Key

                                                       Not Null

RoleName                   nvarchar         256        Not Null

LoweredRoleName            nvarchar         256        Not Null

Description                nvarchar         256



          Skema basis data akan disimpan pada sebuat tabel yang menyimpan informasi

tentang versi dari skema basis data yang digunakan, dan fitur yang digunakan pada

skema basis data. Deskripsi rancangan tabel secara rinci dapat dilihat pada tabel 4.16.

                Tabel 4.16 Rancangan Struktur aspnet_SchemaVersions

Atribut                     Tipe Data        Panjang    Constraint        Keterangan

Feature                     nvarchar         128        Primary key
                                                                                201




                                                       Not Null

Atribut                     Tipe Data       Panjang    Constraint      Keterangan

CompatibleSchemaVersion nvarchar            128        Primary Key

                                                       Not Null

IsCurrentVersion            bit



          Data pengguna situs akan disimpan pada sebuah tabel, tabel tersebut adalah

tabel aspnet_Users. Tabel aspnet_Users digunakan untuk menyimpan seluruh

informasi pengguna situs. Deskripsi rancangan tabel secara rinci dapat dilihat pada

tabel 4.17.

                    Tabel 4.17 Rancangan Struktur aspnet_Users

 Atribut                    Tipe Data        Panjang   Constraint       Keterangan

 ApplicationId              uniqueidentifier ~         Foreign Key

                                                       Not Null

 UserId                     uniqueidentifier ~         Primary Key

                                                       Not Null

 UserName                   nvarchar         256       Not Null

 LoweredUserName            nvarchar         256       Not Null

 MobileAlias                nvarchar         16

 IsAnonymous                bit                        Not Null

 LastActivityDate           datetime                   NotNull



          Data pengguna situs yang terdapat pada peran pengguna tertentu atau

tingkatan pengguna tertentu akan disimpan pada sebuah tabel yang mendeskripsikan
                                                                                 202




pengguna yang terdapat dalam peran pengguna. Tabel yang akan mendeskripsikan

informasi ini adalah tabel aspnet_UsersInRoles. Deskripsi rancangan tabel secara

rinci dapat dilihat pada tabel 4.18.

                Tabel 4.18 Rancangan Struktur aspnet_UsersInRoles

 Atribut                   Tipe Data          Panjang     Constraint     Keterangan

 UserId                    uniqueidentifier ~             Primary Key

                                                          Foreign Key

                                                          Not Null

 RoleId                    uniqueidentifier ~             Primary Key

                                                          Foreign Key

                                                          Not Null



          Untuk penyimpanan status sesi situs telah dibuat satu tabel dengan fungsi

penyimpanan status sesi. Tabel aspnet_WebEvents_Events merupakan tabel yang

digunakan untuk penyimpanan data status sesi pengguna. Deskripsi rancangan tabel

secara rinci dapat dilihat pada tabel 4.19.

             Tabel 4.19 Rancangan Struktur aspnet_WebEvents_Events

 Atribut                     Tipe Data          Panjang    Constraint     Keterangan

 EventId                     char               32         Primary Key

                                                           Not Null

 EventTimeUtc                datetime                      Not Null

 EventTime                   datetime                      Not Null

 EventType                   nvarchar           256        Not Null
                                                                               203




 Atribut                    Tipe Data        Panjang    Constraint      Keterangan

 EventSequence              decimal          19,0       Not Null

 EventOccurrence            decimal          19,0       Not Null

 EventCode                  int                         Not Null

 EventDetailCode            int                         Not Null

 Message                    nvarchar         1024

 ApplicationPath            nvarchar         256

 ApplicationVirtualPath     nvarchar         256

 MachineName                nvarchar         256        Not Null

 RequestUrl                 nvarchar         1024

 ExceptionType              nvarchar         256

 Details                    ntext



         Untuk penyimpana data buku tamu pengguna digunakan tabel GuestTable.

Deskripsi rancangan tabel secara rinci dapat dilihat pada tabel 4.20.

                    Tabel 4.20 Rancangan Struktur GuestData

 Atribut                    Tipe Data        Panjang    Constraint      Keterangan

 UserName                   varchar          200        Not Null

 EmailAddress               varchar          100        Not Null

 Phone                      char             10

 DateTimeStamp              smalldatetime               Not Null

 IPAddress                  char             15

 Comment                    varchar          100        Not Null
                                                                               204




4.7.2 Perancangan Basis Data Forum

        Forum pada situs juga menggunakan basis data sebagai media penyimpanan

data pengguna dan post forum dari pengguna. Berbeda dengan basis data pada situs

utama yang menggunakan berkas basis data SQL Server *.mdf, forum menggunakan

basis data Microsoft Access *.mdb untuk mengurangi kompleksitas. Karena

pembuatan forum menggunakan perangkat lunak pihak ketiga untuk pembuatan

forum yaitu PunBB.Net maka basis data yang dibuat merupakan basis data yang

dibuat oleh perangkat lunak pada saat kompilasi.

        Tabel yang pertama adalah Categories, tabel ini digunakan untuk

penyimpanan data kategori dari forum. Deskripsi rancangan tabel secara rinci dapat

dilihat pada tabel 4.21.

                     Tabel 4.21 Rancangan Struktur Categories

 Atribut                    Tipe Data        Panjang    Constraint      Keterangan

 Cid                        Number                      Primary Key

                                                        Not Null

 Cname                      Text             80

 DispPosition               Text             80

 Scid                       Number



        Tabel yang kedua adalah tabel Censoring, tabel ini merupakan tabel yang

digunakan untuk penyimpanan data sensor dari forum yang dibuat pengguna.

Deskripsi rancangan tabel secara rinci dapat dilihat pada tabel 4.22.
                                                                                    205




                     Tabel 4.22 Rancangan Struktur Censoring

 Atribut                   Tipe Data          Panjang   Constraint     Keterangan

 Id                        Number                       Primary Key

 SearchFor                 Text               60

 ReplaceWith               text               60



         Tabel yang selanjutnya adalah tabel Forums, tabel ini merupakan tabel yang

digunakan untuk penyimpanan forum yang ditulis oleh pengguna. Deskripsi

rancangan tabel secara rinci dapat dilihat pada tabel 4.23.

                      Tabel 4.23 Rancangan Struktur Forums

 Atribut                     Tipe Data        Panjang    Constraint       Keterangan

 Fid                         Number                      Primary Key

 Fname                       Text             80

 Fdesc                       Text             255

 RedirectUrl                 nvarchar         100

 Moderators                  Text             255

 SortBy                      Number

 DispPosition                Number

 Cid                         Number



         Tabel Posts dibuat untuk penyimpanan data yang berkaitan dengan

pengiriman balasan atas forum yang dilakukan pengguna. Deskripsi rancangan tabel

secara rinci dapat dilihat pada tabel 4.24.
                                                                               206




                      Tabel 4.24 Rancangan Struktur Posts

Atribut                  Tipe Data        Panjang   Constraint        Keterangan

UserId                   Text             200       Foreign Key

Pid                      Number                     Primary Key

UserIp                   Text

Message                  Text             255

HideSmiles               Number

Posted                   Date/Time

Edited                   Date/Time

EditedBy                 Text             200

Tid                      Number



          Tabel Reports dibuat untuk penyimpanan data yang berkaitan dengan

pelaporan kegiatan pada forum. Deskripsi rancangan tabel secara rinci dapat dilihat

pada tabel 4.25.

                     Tabel 4.25 Rancangan Struktur Reports

Atribut                  Tipe Data        Panjang   Constraint        Keterangan

UserId                   Text             200       Primary Key

                                                    Foreign Key

Id                       Number                     Primary Key

                                                    Foreign Key

Pid                      Number                     Foreign Key

Created                  Number
                                                                                 207




Atribut                   Tipe Data        Panjang    Constraint        Keterangan

Message                   Text             255

Zapped                    Number

ZappedBy                  Number



          Tabel Roles merupakan tabel yang digunakan untuk penyimpanan data

tentang peran pengguna yang nantinya akan digunakan sebagai fitur tingkatan

otentikasi pengguna. Deskripsi rancangan tabel secara rinci dapat dilihat pada tabel

4.26.

                      Tabel 4.26 Rancangan Struktur Roles

Atribut                   Tipe Data        Panjang    Constraint        Keterangan

RoleName                  Text             50         Primary Key

                                                      Foreign Key

ApplicationName           Text             100        Primary Key



          Untuk menyimpan data pencarian yang berhasil atau cocok digunakan

sebuagh tabel. Tabel yag digunakan untuk penyimpanan data pencarian adalah tabel

SearchMatches Deskripsi rancangan tabel secara rinci dapat dilihat pada tabel 4.27.

                  Tabel 4.27 Rancangan Struktur SearchMatches

Atribut                   Tipe Data        Panjang    Constraint        Keterangan

Pid                       Number

SubjectMatch              Text             80

Word                      UserId           20         Foreign Key
                                                                                     208




Atribut                     Tipe Data       Panjang    Constraint         Keterangan

UserId                      Number                     Foreign Key



          Untuk penyimpanan sementara kata kunci pencariang digunakan tabel

SearchWords. Deskripsi rancangan tabel secara rinci dapat dilihat pada tabel 4.28.

                    Tabel 4.28 Rancangan Struktur SearchWords

Atribut                     Tipe Data        Panjang    Constraint        Keterangan

Word                        Text             20         Primary Key

SearchData                  Date/Time



          Untuk mengetahui pengguna yang telah membuat suatu topik digunakan tabel

Subscriptions. Deskripsi rancangan tabel secara rinci dapat dilihat pada tabel 4.29.

                    Tabel 4.29 Rancangan Struktur Subscriptions

 Atribut                     Tipe Data       Panjang    Constraint         Keterangan

 UserId                      Text            200        Primary Key

                                                        Foreign Key

 Tid                         Number                     Foreign Key



          Data dari topik yang dibuat pengguna akan disimpan pada sebuah tabel. Tabel

yang digunakan untuk penyimpanan data topik yang dibuat adalah tabel Topics.

Deskripsi rancangan tabel secara rinci dapat dilihat pada tabel 4.30.
                                                                                 209




                       Tabel 4.30 Rancangan Struktur Topics

 Atribut                   Tipe Data       Panjang   Constraint        Keterangan

 UserId                    Text            200       Primary Key

                                                     Foreign Key

 Tid                       Number                    Primary Key

 Subject                   Text            255

 Posted                    Date/Time

 NumViews                  Number

 Closed                    Number

 Sticky                    Number

 MovedTo                   Number

 Fid                       Number                    Foreign Key



          Untuk penyimpanan data pengguna situs digunakan tabel Users. Tabel Users

berisikan data lengkap tentang pengguna situs. Deskripsi rancangan tabel secara rinci

dapat dilihat pada tabel 4.31.

                        Tabel 4.31 Rancangan Struktur Users

  Atribut                  Tipe Data       Panjang   Constraint     Keterangan

  UserId                   Text            200       Primary Key

                                                     Not Null

  UserName                 Text            200

  ApplicationName          Text            100

  Email                    Text            80
                                                                       210




Atribut                Tipe Data   Panjang   Constraint   Keterangan

Comment                Text        255

Password               Text        40

PasswordQuestion       Text        200

PasswordAnswer         Text        200

Salt                   Text        200

IsApproved             Yes/No

LastActivityDate       Date/Time

LastUpdatedDate        Date?Time

LastLoginDate          Date/Time

LastPasswordChangeD    Date/Time
ate

CreationDate           Date/Time

IsOnLine               Yes/No

IsLockedOut            Yes/No

LastLockoutDate        Date/Time

FailedPasswordAttemp   Number
tCount

FailedPasswordAttemp   Date/Time
tWindowStart

FailedPasswordAnswer   Number
AttemptCount

FailedPasswordAnswer   Date/Time
AttemptWindowStart
                                                                                   211




       Data pengguna situs yang terdapat pada peran pengguna tertentu atau

tingkatan pengguna tertentu akan disimpan pada sebuah tabel yang mendeskripsikan

pengguna yang terdapat dalam peran pengguna. Tabel yang akan mendeskripsikan

informasi ini adalah tabel UsersInRoles. Deskripsi rancangan tabel secara rinci dapat

dilihat pada tabel 4.32.

                     Tabel 4.32 Rancangan Struktur UsersInfo

  Atribut                  Tipe Data       Panjang   Constraint       Keterangan

  UserName                 Text            200       Primary Key

                                                     Foreign Key

  RoleName                 Text            200       Primary Key

                                                     Foreign Key

  ApplicationName          Text            100       Primary Key

                                                     Foreign Key



4.8 Pembuatan Berkas Citra

       Sebuah situs web, sangat bergantung pada antar muka dengan grafis, oleh

karena itu dalam pembuatan situs ini diperlukan suatu perangkat lunak pengolah citra

untuk pembuatan antar muka dari situs. Perangkat lunak yang penulis gunakan adalah

Adobe Illustrator CS3. Langkah pertama adalah membuat suatu lembar kerja baru,

kemudian dilanjutkan dengan pembuatan latar belakang serta tulisan.
                                                                           212




       Cara pembuatan suatu lembar kerja baru pada Adobe Illustrator CS dimulai

dengan mengklik menu New pada menu dropdown File, atau pada layar utama pilih

web documents seperti tampak pada gambar 4.40 dan 4.41.




             Gambar 4.40 Welcome Screen Adobe Illustrator CS3



       Pada layar ini pilih dan klik Web Document atau klik dropdown menu File,

Adobe Illustrator CS3 akan menampilkan jendela dialog baru untuk pengaturan

properti baru yang akan dibuat. Lalu atur properti yang ada seperti gambar 4.41

berikut.
                                                                              213




                  Gambar 4.41 Jendela Dialog Dokumen Baru

       Setelah melakukan pengaturan properti pada jendela dialog selesaikan dengan

mengklik tombol OK. Sebuah lembat kerja baru akan tampil pada layar monitor

seperti tampak pada gambar 4.42.




               Gambar 4.42 Layar Kerja Adobe Illustrator CS3
                                                                                214




Klik Rectangle Tool pada jendela Tools di sebelah kiri layar kerja     atau tekan M

pada papan ketik. Buat objek persegi panjang pada layar kerja sebesar layar kerja

yang anda buat dengan mengklik dan menggeser tetikus pada layar kerja. Klik objek

persegi panjang yang telah dibuat dengan menggunakan Selection Tool          . Pada

toolbar di atas layar kerja klik     untuk membuka jendela pemilihan latar belakang

seperi pada gambar 4.43, lalu pilih latar belakang linear gradient.




                  Gambar 4.43 Jendela Pemilihan Latar Belakang

Atur warna gradien pada jendela pengaturan gradien dengan tipe linear dan sudut -90o

seperti tampak pada gambar 4.44.




              Gambar 4.44 Jendela Pengaturan Gradien Dan Warna
                                                                            215




Atur warna dengan menggunakan pengaturan warna pada gambar 4.45 dengan

mengatur masing-masing elemen warna RGB (Red, Green, Blue) sesuai dengan nilai

yang diinginkan. Akan tampak pada layar kerja objek persegi panjang telah

mempunyai sebuah latar belakang.




                Gambar 4.45 Gradien Dengan Latar Belakang



      Untuk pembuatan bingkai pada latar belakang dapat dilakukan dengan cara

memilih objek persegi panjang dengan Selection Tools      lalu pilih ikon     .
                                                                                216




Akan tampil jendela pengaturan bingkai seperti pada gambar 4.46. Pilih warna hitam

agar bingkai terlihat.




                         Gambar 4.46 Jendela Pemilihan Bingkai



Atur jenis bingkai dengan mengatur properti kuas dan lebar dari bingkai pada toolbar

dengan ikon                          hingga tampil jendela pengaturan kuas seperti

tampak pada gambar 4.47.




                         Gambar 4.47 Jendela Pengaturan Kuas



Setelah melakukan pengaturan objek persegi panjang akan berubah seperti pada

gambar 4.48 dengam bingkai disekeliling objek.
                                                                           217




                   Gambar 4.48 Hasil Akhir Latar Belakang



4.9 Pembuatan Basis Data

      Pembuatan basis data SQL Server dapat dilakukan melalui Visual Web

Developer 2008 Express Edition atau SQL Server Management Studio. Karena

pengembangan basis data dengan SQL Server dapat dilakukan dengan antar muka

dari IDE Visual Web Developer, maka pembuatan perintah transact-SQL dengan cara

mengetikan setiap perintah dari SQL tidak diperlukan. Cara pembuatan basis data

pada dengan menggunakan Visual Web Developer 2008 adalah sebagai berikut,
                                                                                 218




pertama-tama klik menu dropdown WebSite lalu pilih sub menu add new item, kotak

dialog untuk penambahan objek baru akan tampil seperti pada gambar 4.49.




              Gambar 4.49 Kotak Dialog Penambahan Item Baru.



       Pilih basis data SQL, untuk membuat sebuah objek basis data baru, rubah

nama basis data menjadi GuestBook.mdf klik tombol Add, setelah itu akan muncul

kotak dialog yang menanyakan apakah basis data yang dibuat ingin ditempatkan di

folder App_Data atau di direktori lainnya, klik tombol yes. Jika pembuatan basis data

berhasil jendela Database Explorer akan memperlihatkan koneksi basis data yang

telah dibuat dan file web.config akan menampilkan entri baru, atau bisa dilakukan

dengan cara mengetikkan beberapa baris kode pada file web.config.
                                                                                 219




<connectionStrings>
    <add name="Basis dataConnectionString1" connectionString="Data
      Source=.\SQLEXPRESS;AttachDbFilename=|DataDirectory|\Basis
data. mdf;Integrated Security=True;User Instance=True"
      providerName="System.Data.SqlClient"/>
</connectionStrings>



       Langkah selanjutnya adalah pembuatan tabel, langkah pembuatan tabel

dengan menggunakan Visual Web Developer 2008 dilakukan dengan membuka

jendela Database Explorer akan terlihat pada jendela Database Explorer basis data

yang telah dibuat beserta objek basis data lainnya seperti tampak pada gambar 4.50.




                         Gambar 4.50 Jendela Basis Data.



Buka basis data GuestData.mdf pada Database Explorer untuk melakukan perubahan

pada basis data. Setelah basis data GuestData.mdf terbuka tampak beberapa objek
                                                                             220




yang terdapat pada basis data, klik kanan objek Tables lalu pilih Add New Table.

Akan tampil jendela definis tabel seperti pada gambar 4.51.




                       Gambar 4.51 Jendela Definisi Tabel

       Untuk menyimpan struktur tabel yang telah dibuat bisa dilakukan dengan

mengklik tombol Save atau dengan kombinasi tombol Ctrl+Shift+S. Struktur basis

data yang dibuat sama dengan yang telah dibahas sebelumnya pada rancangan

struktur tabel basis data. Pengisian data juga dapat dilakukan dengan menggunakan

Visual Web Developer dengan cara mengklik kanan objek Tables pada Database
                                                                             221




Explorer dan memilih opsi Show Table Data, akan muncul jendela query untuk

melakukan entri data seperti pada gambar 4.52.




                           Gambar 4.52 Jendela Query



4.10 Pembuatan Halaman Situs

       Bahasa pemrograman web ASP.NET merupakan suatu berkas yang

mempunyai ekstensi atau akhiran (*.aspx) di dalam berkas tersebut berisikan skrip

HTML dan Visual Basic atau Visual C# serta skrip ASP.NET itu sendiri, dan tidak

menutup kemungkinan terdapat juga Javascript di dalam halaman ASP.NET. Untuk
                                                                                 222




mempermudah pengembangan situs berbasis ASP.NET dapat digunakan Microsoft

Visual Web Developer 2008 Express Edition. Pembuatan halaman situs yang akan

dibahas antara lain adalah pembuatan ASP.NET Masterpage atau halaman klise,

penggunaan basis data pada beberapa halaman, penerapan keanggotaan dan peran

pengguna dengan bantuan ASP.NET Web Site Administrator, serta pembuatan

halaman beranda, proses registrasi, aplikasi multimedia interaktif, dan halaman video

streaming.



4.10.1 Pembuatan Situs Baru

       Sebelum membuat halaman akan berada pada situs web, terlebih dahulu kita

harus membuat sebuah situs web yang baru untuk menempatkan kesemua objek yang

digunakan dalam pengembangan situs web. Untuk memulai pertama kali jalankan

Visual Web Developer 2008 Express Edition, langkah yang dilakukan untuk

menjalankan Visual Web Developer adalah sebagai berikut, Pilih menu program dari

menu start menu Microsoft Windows, kemudian pilih program Microsoft Visual Web

Developer 2008 Express Edition, tampilan awal Visual Web Developer akan muncul,

untuk membuat suatu situs web baru klik tautan Create Web Site pada bagian Recent

Projects, seperti dapat dilihat pada gambar 4.53, atau dengan mengklik menu

dropdown File dan memilih New Website atau dengan kombinasi tombol

Shift+Alt+N.
                                                                             223




        Gambar 4.53 Halaman Awal Microsoft Visual Web Developer 2008



Setelah opsi untuk pembuatan situs web baru dilakukan akan muncul jendela New

Web Site untuk pembuatan situs web baru ataupun aplikasi berbasis web. Pada

jendela New Web Site terdapat beberapa pilihan jenis dari situs yang dapat dibuat

seperti ASP.NET Web Site, Empty Web Site, Dynamic Data Web Site, Silverlight

Script Web, WCF Service, ASP.NET Web Service, dan Dynamic Data Entities Web

Site.
                                                                                  224




                   Gambar 4.54 Jendela Pembuatan Situs Baru



       Pilih jenis situs ASP.NET Web Site, kemudian pilih lokasi dimana tempat

situs web tersebut disimpan dengan mengklik tombol browse lalu akan muncul

jendela yang dapat digunakan untuk memilih dimana lokasi situs web akan dsimpan,

lokasi tersebut antara lain adalah pada sistem berkas biasa, ditempatkan di dalam

media penyimpanan pada folder biasa layaknya sebuag berkas biasa, pada IIS lokal,

di mana situs di tempatkan pada lingkungan yang menyerupai keadaan seperti

layaknya ketika situs pada suatu server web, pada situs FTP, atau situs yang berada di

internet dengan memberikan alamat URL dari situs, untuk situs ini penempatan

dilakukan pada IIS lokal untuk mensimulasikan lingkungan yang sebenarnya ketika

situs telah terhubung dengan internet. Kemudian klik tombol Open. Tampilan jendela

pemilihan lokasi dapat dilihat pada gambar 4.55.
                                                                            225




                  Gambar 4.55 Jendela Tempat Penyimpanan



Jendela New Web Site akan kembali muncul, pilih jenis bahasa yang akan digunakan

pada situs, pada pengembangan situs ini bahasa yang digunakan adalah C#, setelah

itu klik OK pada jendela New Web Site. Jendela New Web Site akan tertutup dan

kembali ke layar kerja utama. Tampilan akan berubah menjadi ke sebuah halaman

kosong dengan nama default.aspx. klik design untuk melihat tampilan halaman web,

klik source untuk melihat tampilan skrip dari halaman web, dan klik split untuk

melihat tampilan kode sumber dan tampilan halaman secara bersamaan.
                                                                               226




4.10.2 Pembuatan Halaman Klise (Masterpage.master)

       Halaman klise atau Master page adalah halaman yang menjadi klise untuk

pembuatan halaman lainnya. Halaman klise mempunyai struktur yang sama dengan

halaman ASP.NET lainnya tetapi yang berbeda adalah halaman klise mempunyai

akhiran (*.master) dan tidak dapat dipanggil melalui penjelajah web. Halaman klise

berfungsi sebagai suatu klise untuk halaman lainnya agar suatu situs mempunyai gaya

tampilan yang serupa dan konsisten pada setiap halamannya.

        Halaman klise juga dapat menampung suatu instan dari kontrol ASP.NET

System.Web.UI.WebControls.ContentPlaceHolder         atau     ContentPlaceHolder,

digunakan untuk menempatkan isi dari halaman web yang diturunkan dari halaman

klise tanpa harus merubah halaman klise yang digunakan. Cara pembuatan halaman

klise adalah sebagai berikut.

       Pilih menu drop down Web Site, pilih Add New Item, akan muncul jendela

Add New Item seperti pada gambar 4.56, pilih AJAX Masterpage, beri nama halaman

contoh tersebut dan jenis bahasa yang akan digunakan, lalu beri tanda cek untuk

menempatkan kode pada berkas yang berbeda.
                                                                           227




             Gambar 4.56 Kotak Dialog Penambahan Item Baru.

Halaman klise kosong akan muncul seperti tampak pada gambar 4.57, dapat dilihat

dari gambar bahwa kode sumber suatu halaman klise serupa dengan kode sumber

halaman HTML pada umumnya. Perbedaan hanya terletak pada directive halaman

ASP.NET yang menjelaskan bahwa halaman ini adalah suatu halaman ASP.NET.

<%@ Master Language="C#" AutoEventWireup="true"
CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
                                                                               228




                     Gambar 4.57 Halaman Klise ASP.NET



       Langkah selanjutnya dalam pembuatan halaman klise yaitu pengaturang tata

letak dan elemen lainnya yang akan ditampilkan pada setiap halaman situs dengan

menggunakan CSS. Pada jendela kode tambahkan beberapa tanda <div> untuk

pembuatan tata letak judul, catatan kaki, isi situs, menu, dan animasi silverlight,

untuk kode lengkap dapat dilihat pada bagian Lampiran B Skrip Halaman Web pada

bagian kode main.master. Tambahkan kontrol <asp:ContentPlaceHolder> pada tag

<div id=”maincontent”> dan <div id=”secondarycontent>.

<div id="content">
                                                                                229




                <div id="maincontent">
                       <asp:ContentPlaceHolder ID="ContentPlaceHolder1"
                       runat="server">
                       </asp:ContentPlaceHolder>
                </div>
                <div id="secondarycontent">
                       <asp:ContentPlaceHolder ID="ContentPlaceHolder2"
                       runat="server">
                       </asp:ContentPlaceHolder>
                </div>
</div>

         Situs akan mempunyai dua area yang dapat dikostumisasi. Pada saat ini situs

belum mempunyai pengaturan tata letak ataupun tampilan, untuk dibutuhkan suatu

berkas CSS untuk pengaturan tata letak halaman. Untuk menambahkan berkas CSS

pada situs dapat dilakukan dengan cara yang sama dengan penambahan berkas

lainnya pada situs, klik menu Web Site, lalu pilih Add New Item kemudian klik Style

Sheet beri nama master.css, kode CSS lengkap dapat dilihat pada Lampiran B Skrip

Halaman Web pada bagian master.css, jendela penyuntingan untuk berkas CSS akan

tampil seperti pada gambar 4.58.
                                                                           230




                     Gambar 4.58 Penyuntingan Berkas CSS



Agar halaman klise dapat menggunakan pengaturan gaya yang telah dibuat dalam

sebuah berkas CSS, maka pada halaman klise perlu dituliskan beberapa baris kode

untuk tautan ke arah berkas CSS yang dituju.

       <link href="~/Stylesheets/master.css" rel="stylesheet"
        type="text/css" />

Atau dengan cara mendrag berkas CSS pada Solution Explorer ke dalam halaman

yang akan dipasangkan dengan berkas CSS. Halaman main.master yang telah

ditautkan dengan berkas CSS akan tampak seperti gambar 4.59.
                                                                              231




             Gambar 4.59 Halaman Klise main.master dengan CSS



       Halaman klise main.master akan digunakan sebagai klise untuk beberapa

halaman pada situs terutama halaman awal untuk setiap sub halaman seperti halaman

beranda, halaman artikel, dan halaman kontak. Pembuatan halaman klise lainnya pada

situs serupa dengan pembuatan halaman klise main.master, perbedaan terletak pada

berkas CSS yang digunakan dan pengaturan tag <div>.
                                                                             232




4.10.3 Pembuatan Navigasi Situs Pada Halaman Klise

       Pembuatan navigasi situs pada halaman klise dapat menggunakan beberapa

cara, cara yang sering ditempuh pada umumnya pengembangan situs dengan

menggunakan ASP.NET adalah dengan menggunakan Site Map. Pada pengembangan

kali ini cara yang digunakan adalah cara tradisional dengan menggunakan tag <a

href></a>. Cara ini ditempuh untuk meningkatkan kompatibilitas antar browser yang

digunakan. Pembuatan navigasi dimulai dengan pembuatan tag <div> untuk

menempatkan tautan yang akan ditampilkan pada halaman klise.

<div class="chromestyle" id="chromemenu">
       <ul>
       <li><a href="home.aspx" rel="dropmenu1">Home</a></li>
       <li><a href="tutorial.aspx" rel="dropmenu2">Tutorial</a></li>
       <li><a href="showcase.aspx” rel="dropmenu3">Showcase</a></li>
       <li><a href="download.aspx">Downloads</a></li>
       <li><a href="#">Forum</a></li>
       <li><a href="#">Blogs</a></li>
       <li><a href="GuestBook/guestBook.aspx">Contact Us</a></li>
       <li><a href="AboutUs/aboutUs.aspx">About Us</a></li>
       </ul>
</div>

Dapat dilihat dari kode bahwa pengaturan berkas CSS pada menu menggunakan

pengaturan kelas, hal ini dimaksudkan untuk menyederhanakan proses pengkodean

CSS. Setelah kode untuk menu utama dituliskan, tag <div> untuk sub menu yang

akan ditampilkan akan ditulis pada halaman yang sama.

    <!--1st drop down menu -->
    <div id="dropmenu1" class="dropmenudiv">
        <a href="artikel.aspx">Articles</a>
    </div>

    <!--2nd drop down menu -->
    <div id="dropmenu2" class="dropmenudiv">
        <a href="Tutorial/graf.aspx">Graf dan Algoritma</a>
        <a href="Tutorial/akuntansi.aspx">KomputerisasiAkuntansi</a>
        <a href="Tutorial/strukturdata.aspx">Struktur Data</a>
                                                                              233




        <a href="Tutorial/interjar.aspx">Internet dan Jaringan</a>
    </div>

    <!--3rd drop down menu -->
    <div id="dropmenu3" class="dropmenudiv">
        <a href="Showcase/arsitektur.aspx">Arsitektur</a>
        <a href="Showcase/indonesia.aspx">Bahasa Indonesia</a>
        <a href="Showcase/inggris.aspx">Bahasa Inggris</a>
        <a href="Showcase/vidGraf.aspx">Graf dan Algoritma</a>
        <a href="Showcase/mki.aspx">MKI</a>
        <a href="Showcase/sipil.aspx"> Teknik Sipil</a>
        <a href="Showcase/vidStrukturData.aspx">Struktur Data</a>
    </div>

       Setelah seluruh tag <div> untuk penempatan dituliskan, proses dilanjutkan

dengan pembuatan berkas CSS untuk pengaturan tata letak dari menu yang

ditampilkan pada berkas CSS yang sama untuk pengaturan tata letak halaman

main.master. Untuk kode CSS lengkap dapat dilihat pada Lampiran Bagian B. Agar

menu dapat menampilkan animasi seperti layaknya menu dropdown akan dibuat

sebuah skrip dengan menggunakan Jscript. Untuk menambahkan berkas Jscript pada

situs dapat dilakukan dengan cara yang sama dengan penambahan berkas lainnya

pada situs, klik menu Web Site, lalu pilih Add New Item kemudian klik Jscrip Filet

beri nama menu.js, kode Jscript lengkap dapat dilihat pada Lampiran B Skrip

Halaman Web pada bagian menu.js, berkas Jscript harus ditempatkan pada direktori

yang sama dengan halaman yang menggunakan berkas Jscript tersebut agar berkas

dapat dijalankan. Agar berkas Jscript dapat dijalankan maka halaman klise perlu

memanggil berkas Jscript yang dituju dengan beberapa baris kode.

       <script type="text/javascript" src="menu.js"></script>

Kode tersebut akan memanggil dan menginisiasi berkas yang bernama menu.js, tetapi

belum menggunakannya pada elemen yang membutuhkan berkas tersebut. Agar suatu
                                                                             234




tag <div> dapat memanggil berkas Jscript dan menggunakannya maka akan

digunakan baris kode.

       <script type="text/javascript" id="menuscript">
                 cssdropdown.startchrome("chromemenu")
       </script>

       Menu yang telah dibuat akan digunakan pada semua halaman klise yang

terdapat pada situs, yang berarti pada semua halaman akan terdapat menu navigasi.

Menu navigasi yang sudah diimplementasi dapat dilihat pada gambar 4.60.




                          Gambar 4.60 Menu Navigasi
                                                                             235




4.10.4 Pembuatan Animasi Silverlight

       Animasi Silverlight digunakan pada beberapa halaman yang berada pada web

sebagai elemen tambahan. Animasi Silverlight merupakan elemen yang ditempatkan

pada halaman klise situs, agar dapat tampil pada tiap halaman yang menggunakan

halaman klise yang berkaitan. Untuk pembuatan animasi Silverlight yang dibutuhkan

adalah Visual Web Developer 2008 Service Pack 1 dengan Silverlight Tools for

Visual Studio 2008 SP1. Kesemua perangkat pengembangan Silverlight tersebut

dapat diperoleh secara gratis dari situs Microsoft.

       Untuk membuat suatu animasi Silverlight, hal pertama yang dilakukan Untuk

memulai pertama kali jalankan Visual Web Developer 2008 Express Edition. Pilih

menu program dari menu start menu Microsoft Windows, kemudian pilih program

Microsoft Visual Web Developer 2008 Express Edition, tampilan awal Visual Web

Developer akan muncul, untuk membuat suatu situs web baru klik tautan Create

Project pada bagian Recent Projects, seperti dapat dilihat pada gambar 4.61, atau

dengan mengklik menu dropdown File dan memilih New Project atau dengan

kombinasi tombol Ctrl+Shift+N.
                                                                                  236




       Gambar 4.61 Halaman Awal Microsoft Visual Web Developer 2008



Setelah opsi untuk pembuatan suatu aplikasi baru dilakukan akan muncul jendela

New Project untuk pembuatan aplikasi baru. Pada jendela New Project terdapat

beberapa pilihan jenis dari aplikasi yang dapat dibuat dan terbagi menjadi dua bagian

berdasarkan bahasa yang digunakan, yaitu Visual Basic dan Visual C#, dengan tiga

jenis aplikasi yang dapat dibuat aplikasi Windows, aplikasi Web, dan aplikasi

Silverlight. Pilih opsi Silverlight Application pada layar sebelah kanan bagian bahasa
                                                                                237




Visal C# untuk membuat aplikasi Silverlight baru lanjutkan dengan mengklik tombol

OK.




                 Gambar 4.62 Jendela Pembuatan Aplikasi Baru



       Setelah mengklik tombol OK, Visual Web Developer akan menanyakan

apakah untuk menjalankan aplikasi Silverlight, aplikasi harus dijalankan pada sebuah

halaman HTML, dengan dua opsi pilihan, opsi pertama adalah menambahkan situs

ASP.NET dari pada aplikasi Silverlight yang akan dibuat, dan opsi kedua adalah

membuat halaman uji pada saat kompilasi untuk menjalankan aplikasi Silverlight.

Pilh opsi kedua untuk secara otomatis membuat halaman uji untuk menjalankan

aplikasi Silverlight seperti pada gambar 4.63. Klik tombol OK. Pemilihan opsi ini
                                                                                 238




dimaksudkan untuk mempermudah implementasi aplikasi pada situs dan halaman

klise pada langkah selanjutnya.




             Gambar 4.63 Jendela Penambahan Aplikasi Silverlight



Visual Web Developer akan menampilkan layar kerja baru dan membuat suatu

struktur aplikasi baru dengan berkas bernama page.xaml yang merupakan tempat

dibuatnya aplikasi Silverlight dengan berkas kode page.xaml.cs. Struktur aplikasi dan

lembar kerja dapat dilihat pada gambar 4.64 dan 4.65.




                    Gambar 4.64 Struktur Aplikasi Silverlight
                                                                                239




                Gambar 4.65 Layar Kerja Pembuatan Silverlight



Langkah pembuatan diawali dengan menambahkan satu kontrol Silverlight baru pada

aplikasi melalui menu dropdown Project dan memilih opsi Add New Item, Visual

Web Developer akan menampilkan jendela penambahan objek baru seperi tampak

pada   gambar    4.66,   pilih   objek   Silverlight   User   Control   beri   nama

AccordianBanner.xaml, lanjutkan dengan mengklik tombol OK.
                                                                             240




            Gambar 4.66 Layar Penambahan Objek Silverlight Baru



Tambahkan juga sebuah direktori baru pada aplikasi untuk penyimpanan gambar.

Setelah semua objek telah dibuat proses dilanjutkan ke proses pengkodean. Halaman

page.xaml adalah halaman yang dikodekan terlebih dahulu karena merupakan tempat

aplikasi akan tampil.

<UserControl x:Class="bannerBig.Page"
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   Width="880" Height="300">
   <Grid x:Name="LayoutRoot" Background="White">
   </Grid>
</UserControl>

Kode tersebut dimaksudkan untuk mengatur besar dari area aplikasi Silverlight,

kemudian berkas xaml AccordionBanner.xaml juga harus dikodekan untuk

mendefinisikan objek apa saja yang terdapat pada berkas tersebut.
                                                                                 241




<UserControl x:Class="bannerBig.AccordionBanner"
 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 Width="880" Height="300">
    <Grid x:Name="LayoutRoot" Background="White">
        <Grid.ColumnDefinitions>
            <ColumnDefinition x:Name="c1"
             Width="400"></ColumnDefinition>
            <ColumnDefinition x:Name="c2"
             Width="120"></ColumnDefinition>
            <ColumnDefinition x:Name="c3"
             Width="120"></ColumnDefinition>
            <ColumnDefinition x:Name="c4"
             Width="120"></ColumnDefinition>
            <ColumnDefinition x:Name="c5"
             Width="120"></ColumnDefinition>
    </Grid.ColumnDefinitions>

    <Image Source="images/image1.jpg" Stretch="None"
     x:Name="Image1"/>
    <Image Source="images/image2_small.jpg" Stretch="None"
     Grid.Column="1" x:Name="Image2"/>
    <Image Source="images/image3_small.jpg" Stretch="None"
     Grid.Column="2" x:Name="Image3"/>
    <Image Source="images/image4_small.jpg" Stretch="None"
     Grid.Column="3" x:Name="Image4"/>
    <Image Source="images/image5_small.jpg" Stretch="None"
     Grid.Column="4" x:Name="Image5"/>
    </Grid>
</UserControl>

Kode tersebut mengatur objek mana yang akan ditempatkan gambar di atasnya serta

besar dan lebar area dari objek. Proses pengkodean dilanjutkan dengan mengkodekan

kode program logik pada berkas AccordionBanner.xaml.cs, kode program lengkap

data dilihat pada bagian Lampiran B penulisan. Setelah aplikasi selesai dikodekan,

proses akan berlanjut ke tahap pengujian dan pencarian kesalahan, hasil keluaran dari

proses pengujian adalah berkas dengan ekstensi *.xap yang nantinya akan digunakan

untuk   menempatkan     aplikasi   Silverlight   pada   halaman   ASP.NET.    Untuk

menempatkan objek Silverlight pada suatu halaman ASP.NET dapat digunakan

beberapa baris kode yang dapat menginisiasi berkas *.xap.
                                                                             242




<asp:Silverlight ID="Silverlight1" runat="server" Height="300px"
 MinimumVersion="2.0.31005.0" Source="~/ClientBin/bannerBig.xap"
 Width="880px" Windowless="true" BackColor="Transparent" />

Tampilan aplikasi yang telah berjalan dapat dilihat pada gambar 4.67.




            Gambar 4.67 Objek Silverlighi Pada Halaman ASP.NET



4.10.5 Pembuatan Halaman Beranda

       Karena pada kegiatan sebelumnya telah dibuat suatu halaman klise sebagai

acuan untuk pembuatan halaman. Untuk pembuatan halaman beranda hal yang perlu

dilakukan adalah membuka Solution Explorer untuk melihat objek yang terdapat pada

situs, lalu arahkan pointer mouse ke halaman main.master. Klik kanan pada objek
                                                                            243




main.master dilanjutkan dengan pemilihan opsi Add Content Page untuk penambahan

halaman baru bedasarkan klise main.master seperti pada gambar 4.68.




                         Gambar 4.68 Solution Explorer



Setelah pembuatan halaman baru selesai maka sebuah halaman kosong dengan

elemen yang identik dengan klise main.master akan muncul pada layar kerja dengan

nama Default.aspx, ganti nama halaman menjadi home.aspx, seperti tampak pada

gambar 4.69.
                                                                            244




         Gambar 4.69 Halaman Baru Berdasarkan Klise main.master



Halaman tersebut akan memiliki satu baris kode yang menyatakan bahwa halaman

dibuat menggunakan halaman masterpage.

<%@ Page Title="" Language="C#" MasterPageFile="~/main.master"
AutoEventWireup="true" CodeFile="home.aspx.cs" Inherits="Default3"
%>



      Tambahkan beberapa tag <h1>, <h2> dan <p> sebagai isi situs pada kedua

area ContentPlaceHolder yang terdapat pada situs, karena area tersebut merupakan

area yang dapat diubah pada halaman, dikarenakan pembuatan halaman

menggunakan masterpage. Halaman beranda menggunakan beberapa elemen AJAX
                                                                              245




(Asynchronous Javaxscript and XML.) pada isi situs. Penggunaan elemen AJAX yang

digunakan pada halaman beranda dibuat dengan menggunakan ASP.NET AJAX

Control Toolkit. Untuk menambahkan kontrol AJAX toolbox dari Visual Web

Developer harus dikostumisasi terlebih dahulu dengan mengklik kanan salah satu tab

pada toolbox dan memilih opsi Add Tab, beri nama tab menu yang baru dibuat

dengan nama AJAX Control Toolkit. Kembali klik kana pada area kosong yang

berada pada tab yang baru dibuat dilanjutkan dengan memilih opsi Choose Item,

jendela Choose Toolbox Items akan ditampilkan seperti tampak pada gambar 4.70.




               Gambar 4.70 Jendela Dialog Pemilihan Komponen

Klik tombol Browse untuk mencari letak dari berkas AjaxControlToolkit.dll pada

komputer, lanjutkan dengan mengklik tombol OK. Visual Web Developer akan
                                                                         246




menyarankan berkas AjaxControlToolkit.dll untuk disimpan pada direktori Bin,

setujui saran dengan mengklik tombol Yes. Tampilan toolbox akan terisi dengan

komponen AJAX Control Toolkit seperti tampak pada gambar 4.71




                  Gambar 4.71 Toolbox AJAX Control Toolkit



Komponen AJAX yang digunakan adalah Accordion dan AccordionPane, untuk

menghasilkan tampilan menu seperti akordion. Untuk menggunakan komponen

accordion yang perlu dilakukan hanya melakukan drag and drop komponen

Accordion pada toolbox ke dalam halaman pada bagian ContentPlaceHolder untuk

membuat tempat diletakkannya komponen AccordionPane di dalam komponen

Accordion, kode lengkap dapat dilihat pada Lampiran Bagian B.
                                                                             247




<ajaxToolkit:Accordion ID="MyAccordion" runat="server"
 SelectedIndex="0" HeaderCssClass="accordionHeader"
 HeaderSelectedCssClass="accordionHeaderSelected"
 ContentCssClass="accordionContent"
 FadeTransitions="true" FramesPerSecond="40"
 TransitionDuration="400" AutoSize="None"
 RequireOpenedPane="false" SuppressHeaderPostbacks="true">
 <Panes>
     <ajaxToolkit:AccordionPane ID="AccordionPane1" runat="server">
         <Header>Bahasa Indonesia</Header>
         <Content>
            <p>Bahasa Indonesia merupakan salah satu mata kuliah
               wajib yang ada pada Universitas Gunadarma, untuk
               menunjang pembelajaran mahasiswa maka bookshelf.com
               mencoba membuat pembelajaran multimedia pada situs
               ini. Konten yang ditawarkan terdiri dari berbagai
               macam jenis media yang dapat diunduh, selengkapnya
               lihat di <a href="#">Bahasa Indonesia</a></p>
         </Content>
    </ajaxToolkit:AccordionPane>
</ajaxToolkit:Accordion>

Atur berkas CSS untuk pengaturan akordion pada berkas CSS yang sama dengan

berkas master.css yang digunakan untuk halaman klise main.master. Sebelum suatu

komponen AJAX Control Toolkit dapat digunakan di dalam suatu halaman *.aspx.

Halaman *.aspx membutuhkan satu baris kode yang diletakkan pada awal halaman

untuk meregistrasikan berkas AjaxControlToolkit.dll pada halaman *.aspx.

       <%@ Register Assembly="AjaxControlToolkit"

       Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>

Kode tersebut akan menginisiasi setiap komponen AJAX yang digunakan pada setiap

halaman. Halaman beranda dapat dilihat pada gambar 4.72. Cara pembuatan halaman

beranda dapat diterapkan pada pembuatan halaman awal tutorial dan video streaming

serta halaman artikel.
                                                                              248




                        Gambar 4.72 Halaman Beranda



4.10.6 Pembuatan Halaman Tutorial

       Halaman tutorial pada bahasan ini mencakup kesemua halaman yang berada

pada sub menu tutorial, antara lain halaman graf dan algoritma, halaman

komputerisasi akuntansi, halaman struktur data, dan halaman internet dan jaringan.

Hal ini dikarenakan kesemua halaman yang ada pada sub menu tutorial mempunyai

tata letak yang sama, dan hanya berbeda dalam isi yang ditampilkan. Karena pada

kegiatan sebelumnya telah dibuat suatu halaman klise sebagai acuan untuk
                                                                                   249




pembuatan halaman. Untuk pembuatan halaman beranda hal yang perlu dilakukan

adalah membuka Solution Explorer untuk melihat objek yang terdapat pada situs, lalu

arahkan pointer mouse ke halaman tutorialPage.master pada direktori Tutorial. Klik

kanan pada objek tutorialPage.master dilanjutkan dengan pemilihan opsi Add Content

Page untuk penambahan halaman baru bedasarkan klise main.master seperti pada

gambar 4.73.




                         Gambar 4.73 Solution Explorer



Halaman tutorialPage.master memiliki tata letak yang sedikit berbeda dengan

halaman   main.master    terutama   pada   bagian     isi   situs,   dimana   halaman

tutorialPage.master   hanya   mempunyai    satu     area    isi   situs   dengan   area

ContentPlaceHolder tunggal, seperti tampak pada gambar 4.74.
                                                                             250




                  Gambar 4.74 Halaman tutorialPage.master



Setelah pembuatan halaman baru selesai maka sebuah halaman kosong dengan

elemen yang identik dengan klise tutorialPage.master akan muncul pada layar kerja

dengan nama Default.aspx, ganti nama halaman menjadi sesuai dengan halaman yang

akan dibuat, seperti tampak pada gambar 4.75. Halaman tersebut akan memiliki satu

baris kode yang menyatakan bahwa halaman dibuat menggunakan halaman

masterpage.

<%@ Page Title="" Language="C#" MasterPageFile="~/main.master"
AutoEventWireup="true" CodeFile="home.aspx.cs" Inherits="
Tutorial_Default" %>
                                                                              251




      Gambar 4.75 Halaman Baru Berdasarkan Klise tutorialPage.master



       Halaman pada sub menu tutorial menggunakan elemen AJAX (Asynchronous

Javaxscript and XML.) pada isi situs yang ditujukan untuk memudahan navigasi antar

isi dari suatu halaman. Penggunaan elemen AJAX yang digunakan pada halaman

yang berada pada sub menu tutorial dibuat dengan menggunakan ASP.NET AJAX

Control Toolkit. Untuk menambahkan kontrol AJAX toolbox dari Visual Web

Developer harus dikostumisasi terlebih dahulu dengan mengklik kanan salah satu tab

pada toolbox dan memilih opsi Add Tab, beri nama tab menu yang baru dibuat

dengan nama AJAX Control Toolkit. Kembali klik kana pada area kosong yang
                                                                             252




berada pada tab yang baru dibuat dilanjutkan dengan memilih opsi Choose Item,

jendela Choose Toolbox Items akan ditampilkan seperti tampak pada gambar 4.76.




              Gambar 4.76 Jendela Dialog Pemilihan Komponen



Klik tombol Browse untuk mencari letak dari berkas AjaxControlToolkit.dll pada

komputer, lanjutkan dengan mengklik tombol OK. Visual Web Developer akan

menyarankan berkas AjaxControlToolkit.dll untuk disimpan pada direktori Bin,

setujui saran dengan mengklik tombol Yes. Tampilan toolbox akan terisi dengan

komponen AJAX Control Toolkit seperti tampak pada gambar 4.77
                                                                            253




                 Gambar 4.77 Toolbox AJAX Control Toolkit



      Komponen AJAX yang digunakan adalah TabContainer, untuk menghasilkan

tampilan menu dengan menggunakan tab yang akan memudahkan navigasi. Untuk

menggunakan komponen TabContainer yang perlu dilakukan hanya melakukan drag

and drop komponen TabContainer pada toolbox ke dalam halaman pada bagian

ContentPlaceHolder untuk membuat tempat diletakkannya komponen TabPanel di

dalam komponen TabContainer, kode lengkap dapat dilihat pada Lampiran Bagian B.

<ajaxToolkit:TabContainer ID="TabContainer1" runat="server"
 ActiveTabIndex="0" CssClass="ajax__tab_technorati-theme"
 Height="760px" Width="850px">
    <ajaxToolkit:TabPanel ID="TabPanel1" runat="server"
     HeaderText="Teori Dasar">
    </ajaxToolkit:TabPanel>
</ajaxToolkit:TabContainer>
                                                                                254




Atur berkas CSS untuk pengaturan area tab pada berkas CSS yang sama dengan

berkas tutorialPage.css yang digunakan untuk halaman klise main.master. Sebelum

suatu komponen AJAX Control Toolkit dapat digunakan di dalam suatu halaman

*.aspx. Halaman *.aspx membutuhkan satu baris kode yang diletakkan pada awal

halaman untuk meregistrasikan berkas AjaxControlToolkit.dll pada halaman *.aspx.

       <%@ Register Assembly="AjaxControlToolkit"

       Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>

Kode tersebut akan menginisiasi setiap komponen AJAX yang digunakan pada setiap

halaman. Untuk penambahan aplikasi multimedia interaktif berbasis Adobe Flash

akan dituliskan beberapa baris kode pada halaman.

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/director
/sw.cab#version=10.2.0.021" id="Movie" width="800px" height="600px">
      <param name="movie" value="../Flash/teori_dasar.swf" />
      <param name="bgcolor" value="#000000" />
      <param name="quality" value="high" />
      <param name="wmode" value="transparent" />
      <param name="allowscriptaccess" value="samedomain" />
      <embed type="application/x-shockwave-flash"
       pluginspage="http://www.macromedia.com/go/getflashplayer"
       width="800px" height="600px" wmode="transparent" name="Movie"
       src="../Flash/teori_dasar.swf" bgcolor="#000000"
       quality="high" swliveconnect="true"
       allowscriptaccess="samedomain">
      </embed>
</object>

Kode ini akan menempatkan suatu objek Flash pada halaman HTML, dengan cara

memanggil berkas *.swf dari objek flash dan menempelkannya pada halaman HTML,

setelah objek Flash ditempatkan maka halaman akan tampak seperti gambar 4.78.
                                                                          255




          Gambar 4.78 Salah Satu Halaman Tutorial (interjar.aspx)



4.10.7 Pembuatan Halaman Video Streaming

      Halaman video streaming pada bahasan ini mencakup kesemua halaman yang

berada pada sub menu video yang digunakan untuk menampilkan streaming video

pada situs, halaman yang menampilkan streaming video antara lain halaman

arsitektur, halaman Bahasa Indonesia, halaman Bahasa Inggris, dan halaman MKI,

halaman teknik sipil, halaman video graf dan algoritma ,dan halaman. Hal ini

dikarenakan kesemua halaman yang ada pada sub menu video mempunyai tata letak

yang sama, dan hanya berbeda dalam isi yang ditampilkan. Karena pada kegiatan
                                                                            256




sebelumnya telah dibuat suatu halaman klise sebagai acuan untuk pembuatan

halaman. Untuk pembuatan halaman beranda hal yang perlu dilakukan adalah

membuka Solution Explorer untuk melihat objek yang terdapat pada situs, lalu

arahkan pointer mouse ke halaman showcase.master pada direktori Showcase. Klik

kanan pada objek main.master dilanjutkan dengan pemilihan opsi Add Content Page

untuk penambahan halaman baru bedasarkan klise main.master seperti pada gambar

4.79.




                        Gambar 4.79 Solution Explorer



Halaman showcase.master memiliki tata letak yang sedikit berbeda dengan halaman

main.master terutama pada bagian isi situs, dimana halaman showcase.master hanya
                                                                             257




mempunyai satu area isi situs dengan area ContentPlaceHolder tunggal, seperti

tampak pada gambar 4.80.




                    Gambar 4.80 Halaman showcase.master



Setelah pembuatan halaman baru selesai maka sebuah halaman kosong dengan

elemen yang identik dengan klise showcase.master akan muncul pada layar kerja

dengan nama Default.aspx, ganti nama halaman menjadi sesuai dengan halaman yang

akan dibuat, seperti tampak pada gambar 4.81. Halaman tersebut akan memiliki satu
                                                                           258




baris kode yang menyatakan bahwa halaman dibuat menggunakan halaman

masterpage.

<%@ Page Title="" Language="C#" MasterPageFile="~/main.master"
AutoEventWireup="true" CodeFile="home.aspx.cs" Inherits="
Showcase_Default" %>




       Gambar 4.81 Halaman Baru Berdasarkan Klise showcase.master



      Halaman buku tamu menggunakan elemen AJAX (Asynchronous Javaxscript

and XML.) pada isi situs yang ditujukan untuk memudahan navigasi antar isi dari

suatu halaman. Penggunaan elemen AJAX yang digunakan pada halaman dibuat
                                                                              259




dengan    menggunakan    ASP.NET     AJAX    Control   Toolkit.   Langkah   Untuk

menambahkan kontrol AJAX toolbox dari Visual Web Developer sama seperti

langkah pada sub bab 4.10.6.

         Komponen AJAX yang digunakan adalah TabContainer, untuk menghasilkan

tampilan menu dengan menggunakan tab yang akan memudahkan navigasi. Untuk

menggunakan komponen TabContainer yang perlu dilakukan hanya melakukan drag

and drop komponen TabContainer pada toolbox ke dalam halaman pada bagian

ContentPlaceHolder untuk membuat tempat diletakkannya komponen TabPanel di

dalam komponen TabContainer, kode lengkap dapat dilihat pada Lampiran Bagian B.

<ajaxToolkit:TabContainer ID="TabContainer1" runat="server"
 ActiveTabIndex="0" CssClass="ajax__tab_technorati-theme"
 Height="760px" Width="850px">
    <ajaxToolkit:TabPanel ID="TabPanel1" runat="server"
     HeaderText="Teori Dasar">
    </ajaxToolkit:TabPanel>
</ajaxToolkit:TabContainer>

Atur berkas CSS untuk pengaturan area tab pada berkas CSS yang sama dengan

berkas tutorialPage.css yang digunakan untuk halaman klise main.master. Sebelum

suatu komponen AJAX Control Toolkit dapat digunakan di dalam suatu halaman

*.aspx. Halaman *.aspx membutuhkan satu baris kode yang diletakkan pada awal

halaman untuk meregistrasikan berkas AjaxControlToolkit.dll pada halaman *.aspx.

         <%@ Register Assembly="AjaxControlToolkit"

         Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>

Kode tersebut akan menginisiasi setiap komponen AJAX yang digunakan pada setiap

halaman. Berkas media berupa video akan ditempatkan pada halaman ini, jenis berkas

video yang digunakan adalah berkas video *.flv. Berkas video ini dipilih karena
                                                                              260




ukurannya yang lebih kecil dibanding berkas video lainnya meskipun dengan kualitas

gambar dan suara yang kurang baik, mengingat video ini nantinya akan diakses

melalui internet maka ukuran yang kecil lebih menjadi prioritas dibandingkan

kualitas gambar dan suara. Untuk menempatkan media *.flv pada suatu halaman

ASP.NET mengharuskan penggunaan suatu komponen dari pihak ketiga, komponen

ini bernama ASP.NET Flash Video, yang dikeluarkan oleh ASP.NET Media.

Komponen ini memungkinkan suatu halaman *.aspx memanggil berkas media *.flv

dan menjalankannya. Untuk dapat menggunakan komponen ASP.NET Flash Video,

komponen ini harus diintegrasikan dengan Visual Web Developer terlebih dahulu.

Cara mengintegrasikan komponen ini sama dengan yang dilakukan pada komponen

AJAX Control Toolkit pada langkah sebelumnya. Setelah integrasi komponen

dilakukan maka toolbox akan tampak seperti gambar 4.82 .




                  Gambar 4.82 Toolbox ASP.NET Flash Video
                                                                             261




       Untuk menggunakan komponen yang perlu dilakukan adalah menarik

komponen dari toolbox ke halaman web, lalu dilanjutkan dengan pengaturan properti

dari kontrol seperti pada gambar 4.83. Atau bisa dengan menuliskan kode secara

langsung pada halaman web.

<ASPNetFlashVideo:FlashVideo ID="FlashVideo1" runat="server"
 VideoURL="~/Flash/vid-arsitektur-jambi.flv" Height="600px"
 Width="800px" DebugMode="False" StartUpImageURL="" Volume="100">
</ASPNetFlashVideo:FlashVideo>




               Gambar 4.83 Properti dari ASP.NET Flash Video



Kedua cara akan menghasilkan keluaran yang sama pada halaman web. Kontrol

ASP.NET Flash mempunyai beberapa properti yang dapat diatur untuk merubah

penampilan dari kontrol terutama tampilan dari kontrol untuk berkas video yang
                                                                            262




ditampilkan. Semua halaman yang menggunakan streaming video pada situs

menggunakan kontrol yang disediakan oleh ASP.NET Flash Video. Hasil penerapan

kontrol ASP.NET Flash Video dapat dilihat pada gambar 4.84.




           Gambar 4.84 Salah Satu Halaman Video (arsitektur.aspx)



4.10.8 Pembuatan Halaman Log In

       Halaman Log In merupakan halaman pertama yang akan tampak di situs.

Halaman Log In memungkinkan pengguna untuk memberikan akun penggunanya

untuk dapat menggunakan situs atau mengikuti proses registrasi untuk mendapatkan
                                                                                 263




keanggotaan. Halaman Log In tidak menggunakan halaman klise dalam proses

pembuatannya, halaman dibuat dengan mengkode HTML dari awal. Langkah-

langkah yang ditempuj pada pembuatan halaman registrasi adalah mengkode

tampilan halaman terlebih dahulu, kode lengkap dapat dilihat pada bagian Lampiran

B dari penulisan. Pada halaman Log In terdapat dua kontrol yang digunakan untuk

interaksi pengguna, yaitu kontrol <asp:Login> dan kontrol <asp:CreateUserWizard>.

Cara menempatkan kontrol pada halaman adalah dengan cara            menarik kontrol

<asp:Login> dan <asp:CreateUserWizard> ke dalam halaman, Atur properti continue

destination page menjadi, home.aspx. Klik kembali ikon create user wizard tasks, lalu

pilih pengaturan situs web, untuk melakukan pengaturan cara pembuatan akun

pengguna. Tampilan halaman registrasi.aspx dapat dilihat pada gambar 4.85




                          Gambar 4.85 Halaman Log In
                                                                                264




4.10.9 Pembuatan Halaman Buku Tamu

       Untuk pembuatan halaman buku tamu yang perlu dilakukan adalah membuka

Solution Explorer untuk melihat objek yang terdapat pada situs, lalu arahkan pointer

mouse ke halaman guestbook.master pada direktori Tutorial. Klik kanan pada objek

guestbook.master dilanjutkan dengan pemilihan opsi Add Content Page untuk

penambahan halaman baru bedasarkan klise main.master seperti pada gambar 4.86.




                         Gambar 4.86 Solution Explorer



Halaman guestbook.master memiliki tata letak yang sedikit berbeda dengan halaman

main.master terutama pada bagian isi situs, dimana halaman tutorialPage.master

hanya mempunyai satu area isi situs dengan area ContentPlaceHolder tunggal, seperti

tampak pada gambar 4.87.
                                                                             265




                   Gambar 4.87 Halaman guestbook.master



Setelah pembuatan halaman baru selesai maka sebuah halaman kosong dengan

elemen yang identik dengan klise guestbook.master akan muncul pada layar kerja

dengan nama Default.aspx, ganti nama halaman menjadi sesuai dengan halaman yang

akan dibuat, seperti tampak pada gambar 4.88. Halaman tersebut akan memiliki satu

baris kode yang menyatakan bahwa halaman dibuat menggunakan halaman

masterpage.

<%@ Page Title="" Language="C#" MasterPageFile="~/main.master"
AutoEventWireup="true" CodeFile="home.aspx.cs" Inherits="
GuestBook_Default" %>
                                                                            266




         Gambar 4.88 Halaman Baru Berdasarkan Klise guestbook.master



         Halaman buku tamu menggunakan elemen AJAX (Asynchronous Javaxscript

and XML.) pada isi situs yang ditujukan untuk memudahan navigasi antar isi dari

suatu halaman. Penggunaan elemen AJAX yang digunakan pada halaman dibuat

dengan    menggunakan    ASP.NET   AJAX    Control   Toolkit.   Langkah   Untuk

menambahkan kontrol AJAX toolbox dari Visual Web Developer sama seperti

langkah pada sub bab 4.10.6. Komponen AJAX yang digunakan adalah

TabContainer, untuk menghasilkan tampilan menu dengan menggunakan tab yang

akan memudahkan navigasi. Untuk menggunakan komponen TabContainer yang
                                                                               267




perlu dilakukan hanya melakukan drag and drop komponen TabContainer pada

toolbox ke dalam halaman pada bagian ContentPlaceHolder untuk membuat tempat

diletakkannya komponen TabPanel di dalam komponen TabContainer, kode lengkap

dapat dilihat pada Lampiran Bagian B.

<ajaxToolkit:TabContainer ID="TabContainer1" runat="server"
 ActiveTabIndex="0" CssClass="ajax__tab_technorati-theme"
 Height="760px" Width="850px">
    <ajaxToolkit:TabPanel ID="TabPanel1" runat="server"
     HeaderText="Teori Dasar">
    </ajaxToolkit:TabPanel>
</ajaxToolkit:TabContainer>

Atur berkas CSS untuk pengaturan area tab pada berkas CSS yang sama dengan

berkas tutorialPage.css yang digunakan untuk halaman klise main.master. Sebelum

suatu komponen AJAX Control Toolkit dapat digunakan di dalam suatu halaman

*.aspx. Halaman *.aspx membutuhkan satu baris kode yang diletakkan pada awal

halaman untuk meregistrasikan berkas AjaxControlToolkit.dll pada halaman *.aspx.

       <%@ Register Assembly="AjaxControlToolkit"
       Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>

Halaman buku tamu memungkinkan pengguna untuk memberika umpan balik kepada

situs melalui sebuah form isian. Form isian dibuat menggunakan beberapa kontrol asp

sederhana seperti kotak teks, label, dan tombol. Cara untuk menggunakan kontrol

tersebut adalah dengan cara menarik kontrol tersebut dari toolbox ke dalam halaman

web. Setelah kontrol tersebut berada di dalam halaman web, maka proses pengkodean

dapat dilakukan, kode lengkap dapat dilihat pada bagian Lampiran B. Tata letak

kontrol dapat dilihat pada gambar 4.89.
                                                                              268




            Gambar 4.89 Tata Letak Kontrol Halaman Buku Tamu



       Setelah pengguna memberikan umpan balik, umpan balik tersebut perlu

ditampilkan, maka tata letak untuk menampilkan hasil entri buku tamu dari pengguna

harus dibuat. Untuk menampilkan buku tamu digunakan beberapa kontrol yang lebih

kompleks yang mempunyai kapabilitas untuk dihubungkan dengan basis data.

Kontrol yang digunakan untuk menampilkan hasil entri buku tamu adalah kontrol

<asp:DataList> dan kontrol <asp:GridView>. Kontrol DataList digunakan untuk

menampilkan data dengan tampilan satu baris untuk satu data. Sedangkan kontrol
                                                                               269




GridView digunakan untuk menampilkan data dalam bentuk baris dan kolom atau

biasa disebut dengan tabel. Cara untuk menggunakan kontrol tersebut adalah dengan

cara menarik kontrol tersebut dari toolbox ke dalam halaman web. Setelah kontrol

tersebut berada di dalam halaman web, maka proses pengkodean dapat dilakukan,

kode lengkap dapat dilihat pada bagian Lampiran B. Tata letak kontrol dapat dilihat

pada gambar 4.90




            Gambar 4.90 Tata Letak Kontrol Halaman Buku Tamu
                                                                             270




Agar kontrol yan digunakan dapat menampilkan data, kontrol perlu dikonfigurasikan

untuk menggunakan sumber data. Cara mengkofigurasi sumber data adalah dengan

mengklik kontrol yang akan dihubungkan dengan data, buka menu konteks yang

terdapat di kanan atas kontrol, seperti pada gambar 4.91.




                      Gambar 4.91 Menu Konteks GridView

Klik opsi untuk mengkonfigurasi sumber data, akan tampil jendela pengaturan

sumber data seperti pada gambar 4.92.




                 Gambar 4.92 Jendela Konfigurasi Sumber Data
                                                                               271




Pilik ConnectionString dengan nama GuestDataConnectionString, lalu klik tombol

Next. Jendel konfigurasi selanjutnya akan ditampilkan, jendela ini mengatur atribut

mana saja yang akan ditampikan pada kontrol, atur konfigurasi seperti tampak pada

gambar 4.93.




                    Gambar 4.93 Jendela Konfigurasi Query



Selesaikan dengan mengklik tombol Next, jendela untuk mengujicoba query akan

ditampilkan, jendela ini berguna untuk mengujikan query yang telah dibuat

sebelumnya sebelum ditampilkan di kontrol seperti yang terlihat pada gambar 4.94.

Lanjutkan dengan mengklik tombol Finish.
                                                                                  272




                       Gambar 4.94 Jendela Pengujian Query



Jika konfigurasi sumber data telah dilakukan maka pada saat halaman dibuka, data

akan tampil pada kontrol, dan ketika pengguna memasukkan data pada halaman

untuk melakukan entri data dan mengirimkan data, data akan disimpan dan secara

real-time akan ditampilkan pada kontrol GridView dan DataList. Halaman buku tamu dapat

dilihat pada gambar 4.95.
                                                                              273




                      Gambar 4.95 Halaman Buku Tamu



4.10.10 Pembuatan Keanggotaan Pengguna

       Dalam ASP.NET 3.5 pembuatan keanggotaan pengguna tidak harus dilakukan

dengan mengetikkan kode yang panjang dan sulit untuk dimengerti, melainkan

penerapan manajemen pengguna dalam ASP.NET 3.5 dapat dilakukan dalam sebuah

antar muka grafis yang disebut ASP.NET Web Site Administration Tool. Sebelum

membuka ASP.NET Situs web Administration Tool, terlebih dahulu buat direktori

pada situs, dengan nama Administrator. Nantinya direktori ini akan digunakan untuk

menyimpan halaman yang hanya dapat diakses dengan hak akses administrator.
                                                                               274




Masukkan halaman yang nantinya akan digunakan untuk administrator ke dalam

direktori secure_admin, sedangkan untuk halaman yang digunakan oleh anggota

terdaftar dimasukkan ke dalam direktori secure_members, halaman lainnya biarkan

berada dalam direktori utama. Jalankan ASP.NET Web Site Administration Tool

dengan cara membuka jendela penjelajah berkas dan mengklik ikon konfigurasi

ASP.NET. Setelah tampil jendela utama klik tautan menuju pengaturan keamanan.

       Setelah muncul jendela wizard pertama klik next, maka akan anda diminta

untuk memilih metode akses, pilih akses dari internet, lanjutkan pada jendela

lewatkan jendela pengaturan penyedia tingkat lanjut. Akan muncul jendela untuk

pengaturan peran, tandai opsi Enable Roles for this Web Site, lanjutkan. Masukkan

nama peran yang akan dibuat, kali ini beri nama peran tersebut administrator,

tambahkan peran, kemudian tambahkan lagi satu peran dengan nama anggota,

lanjutkan. Pada jendela pembuatan pengguna, buat pengguna baru dengan

memasukkan informasi pada kolom isian, buat pengguna, setelah berhasil lanjutkan.

       Atur hak akses pada jendela pengaturan hak akses. Berikan hak akses pada

direktori Administrator administrator, dan tolak akses untuk pengguna biasa seperti

tampak pada gambar 4.96.
                                                                             275




             Gambar 4.96 ASP.NET Web Site Administration Tool



4.10.11 Pembuatan Forum Dengan PunBB.NET

       Pembuatan forum pada situs ini menggunakan perangkat lunak dari pihak

ketiga, yaitu PunBB.NET. PunBB.NET merupaka perangkat lunak open-source untuk

pembuatan forum berbasis ASP.NET. Alasan digunakannya perangkat lunak dari

pihak ketiga adalah mengingat besarnya situs yang dibuat dalam rentang waktu yang

cukup singkat, sehingga pengembangan situs dapat dilakukan dengan lebih cepat dan

baik. PunBB.NET menyediakan suatu dasar pengembangan forum yang lengkap dan

sederhana serta dapat dikostumisasi sesuai keinginan dari pengembang.
                                                                             276




       Cara menggunakan PunBB.NET adalah dengan mengekstraksi berkas

PunBB.NET.rar yang telah anda unduh. Ketika proses ekstraksi berhasil secara

otomatis akan dibuat suatu direktori bernama PunBB dengan seluruh berkas yang

dibutuhkan. Untuk menggunakan PunBB.NET, situs PunBB harus dikompilasi

terlebih dahulu. Cara mengkompilasi situs PunBB.NET dengan cara membuka situs

pada Visual Web Developer sama seperti membuka situs lainnya. Pada layar awal

Visual Web Developer pilih Open Web Site, kemudian arahkan ke direktori PunBB

lalu klik tombol Open, maka situs akan terbuka.

       Untuk mengkompilasi dan menjalankan PunBB untuk pertama kalinya, pada

Solution Explorer arahkan kursor mouse pada berkas Install.aspx untuk memulai

instalasi dari PunBB.NET. Jalankan situs dengan kombinasi tombol Ctrl+F5. Layar

instalasi akan dibuka menggunakan penjelajah web, seperti pada gambar 4.97




                       Gambar 4.97 Instalasi PunBB.NET
                                                                                 277




Pada layar instalasi dapat dipilih jenis basis data yang digunakan dan informasi

tambahan lainnya mengenai basis data yang digunakan. Sebelum mengisikan

informasi dan melanjutkan instalasi, sebuah basis data harus dibuat terlebih dahulu.

Pada situs ini basis data yang digunakan adalah berkas basis data Microsoft Access

2003 dengan ekstensi *.mdb, beri nama basis data tersebut Forums.mdb dan letakkan

basis data pada direktori App_Data pada solusi situs. Mulai instalasi dengan

mengklik tombol Start Installation. Instalasi akan berjalan secara otomatis, jika

instalasi selesai forum PunBB.NET siap dikostumisasi seperti pada gambar 4.98.




              Gambar 4.98 Forum Pada Situs dengan PunBB.NET
                                                                             278




4.10.12 Pembuatan Blog dengan BlogEngine.NET

       Pembuatan blog pada situs ini juga menggunakan perangkat lunak dari pihak

ketiga, yaitu BlogEngine.NET. BlogEngine.NET merupaka perangkat lunak open-

source untuk pembuatan blog berbasiskan ASP.NET. Alasan digunakannya perangkat

lunak dari pihak ketiga adalah mengingat besarnya situs yang dibuat dalam rentang

waktu yang cukup singkat, sehingga pengembangan situs dapat dilakukan dengan

lebih cepat dan baik. BlogEngine.NET menyediakan suatu dasar pengembangan

forum yang lengkap dan sederhana serta dapat dikostumisasi sesuai keinginan dari

pengembang.

       Cara menggunakan BlogEngine.NET adalah dengan mengekstraksi berkas

BlogEngine.NET.rar yang telah anda unduh. Ketika proses ekstraksi berhasil secara

otomatis akan dibuat suatu direktori bernama BlogEngine dengan seluruh berkas

yang dibutuhkan. Untuk menggunakan BlogEngine.NET, situs BlogEngine harus

dikompilasi terlebih dahulu. Cara mengkompilasi situs BlogEngine.NET dengan cara

membuka situs pada Visual Web Developer sama seperti membuka situs lainnya.

Pada layar awal Visual Web Developer pilih Open Web Site, kemudian arahkan ke

direktori PunBB lalu klik tombol Open, maka situs akan terbuka.

       Untuk mengkompilasi dan menjalankan BlogEngine untuk pertama kalinya,

pada Solution Explorer arahkan kursor mouse pada berkas Install.aspx untuk

memulai instalasi dari BlogEngine.NET. Jalankan situs dengan kombinasi tombol

Ctrl+F5. BlogEngine.NET dapat segera digunakan dan dikostumisasi, seperti pada

gambar 4.99.
                                                                               279




             Gambar 4.99 Blog Pada Situs dengan BlogEngine.NET



4.11 Pengujian dengan Penjelajah Web

       Pengujian dengan menggunakan penjelajah web digunakan untuk mengetahui

seberapa baik tingkat kompatibilitas situs ketika digunakan dan telah dihost pada

penyedia layanan hosting. Pada tahapan pengujian beberapa perangkat keras dan

perangkat lunak harus disiapkan terlebih dahulu untuk menjamin validitas dari hasil

pengujian. Perangkat keras yang digunakan terdiri dari tiga unit komputer personal

dengan spesifikasi berbeda dan dua diantaranya merupakan komputer yang digunakan

pada saat fase pengembangan.
                                                                                  280




       Perangkat keras yang pertama yang digunakan mempunyai spesifikasi

seperangkat komputer dengan prosesor Intel Core2Duo E8400 (3.0GHz), dengan

RAM (Random Access Memory) DDR2 4 Gigabyte, dan kapasitas penyimpanan 500

Gigabyte, digunakan untuk proses pengujian dan pencarian kesalahan awal.

Perangkat keras kedua yang digunakan adalah seperangkat komputer dengan prosesor

AMD Athlon 64 3000+ (2 GHz) RAM (Random Access Memory) DDR 1 Gigabyte,

dan kapasitas penyimpanan 80 Gigabyte, perangkat keras yang ketiga adalah

seperangkat komputer dengan prosesor Intel Pentium 4 (2.8GHz), dengan RAM

(Random Access Memory) DDR 1 Gigabyte, dan kapasitas penyimpanan 80

Gigabyte. Perangkat keras kedua dan ketiga merupakan perangkat keras yang

digunakan untuk simulasi pengujian ketika situs web diakses melalui komputer lain

dalam satu jaringan yang sama.

       Perangkat lunak yang digunakan pada pengujian adalah penjelajah web dan

server web. Server web digunakan untuk mensimulasikan keadaan ketika situs telah

berada pada penyedia layanan hosting dan diakses melalui Internet. Server web yang

digunakan adalah IIS 6 dan 7 (Internet Information Service) yang terdapat pada

sistem operasi Windows XP dan Windows Vista. Untuk penjelajah web digunakan

lima jenis penjelajah web yang telah diadopsi secara luas yaitu Mozilla Firefox 3.0.7,

Internet Explorer 8, Google Chrome 2.0.162.0, Opera 9.64, dan Apple Safari 4.

Penggunaan berbagai jenis dan versi rilis dari penjelajah web dimaksudkan untuk

menguji kompatibilitas antar penjelajah web dari situs.
                                                                              281




       Pengujian dilakukan dengan cara menjalankan situs secara lokal dengan

komputer lokal dan intranet. Web diakses oleh komputer lokal ke server web melalui

sebuah jaringan lokal intranet.



4.11.1 Pengujian Pada Internet Explorer 8

       Internet explorer (IE) sebagai salah satu penjelajah web yang mempunyai

pengguna terbanyak di dunia dengan persentase pengguna lebih dari 43,6% dan

merupakan pesaing terdekat dari Firefox merupakan salah satu penjelajah web yang

digunakan dalam tahapan pengujian ini.




                   Gambar 4.100 Situs Pada Internet Explorer 8
                                                                            282




Hasil pengujian dengan menggunakan IE8 dapat dilihat pada gambar 4.100.

Diharapkan dengan menggunakan IE8 hasil pengujian yang valid dapat tercapai dan

mewakilkan kompatibilitas situs dengan versi rilis IE yang sebelumnya. Sekilas

tampak pada gambar 4.100 situs tampak berjalan dengan baik tanpa masalah, tetapi

pada halaman lain yang tampak pada gambar 4.101. Situs mempunyai sedikit

masalah pada IE8 terutama pada saat menjalankan objek Flash. Ketika tab

dipindahkan ke tab yang lainnya pada Internet Explorer, objek Flash




           Gambar 4.101 Objek Flash Situs Pada Internet Explorer 8
                                                                               283




yang sebelumnya tetap akan berjalan di belakang sementara objek Flash yang baru

berjalan juga. Hal ini menyebabkan bertumpuknya suara antar dua objek Flash.




                  Gambar 4.102 Blog Pada Internet Explorer 8



Sedangkan untuk blog dan forum berjalan dengan baik IE8 tanpa ada isu

kompatibilitas apapun. Seperti tampak pada gambar 4.102 dan 4.103.
                                                                             284




                 Gambar 4.103 Forum Pada Internet Explorer 8



4.11.2 Pengujian Pada Firefox 3.0.7

       Firefox merupakan penjelajah web yang paling populer saat ini dengan

persentase pengguna sebesar 46.4%. Firefox juga dikenal sebagai penjelajah web

dengan metode render paling baik dan sesuai dengan standar W3C. Karena alasan itu

penjelajah web Firefox digunakan pada pengujian. Dapat dilihat pada gambar 4.103

situs berjalan pada Firefox tanpa menemui masalah yang siginifikan. Begitu juga

dalam menangani objek Flash yang ada pada situs, situs dapat berjalan sangat baik

tanpa ada anomali seperti pada IE8 seperti tampak pada gambar 4.104.
                                                    285




      Gambar 4.104 Situs Pada Firefox 3.0.7




Gambar 4.105 Objek Flash Situs Pada Firefox 3.0.7
                                                                     286




       Blog dan forum berjalan dengan baik Firefox 3.0.7 tanpa ada isu

kompatibilitas apapun. Seperti tampak pada gambar 4.106 dan 4.107.




                    Gambar 4.106 Forum Pada Firefox 3.0.7




                     Gambar 4.107 Blog Pada Firefox 3.0.7
                                                                             287




4.11.3 Pengujian Pada Apple Safari 4

       Apple Safari 4 merupakan penjelajah web terbaru dari Apple yang

mempunyai banyak fitur. Alasan dilakukannya pengujian situs pada Safari adalah

untuk memastikan apakan situs dapat berjalan dengan baik pada penjelajah web yang

tidak hanya terdapat di Windows tetapi juga digunakan pada sistem operasi yang

berbeda yaiti OS X 10.3.




                    Gambar 4.108 Situs Pada Apple Safari 4
                                                                               288




Situs dapat berjalan dengan baik pada Safari tidak terjadi anomali pada objek Flash

seperti pada IE. Dengan demikian dapat disimpulkan situs dapat berjalan dengan

normal pada sistem operasi yang berbasis UNIX seperti OS X 10.3 dan tidak

menutup kemungkinan situs dapat berjalan dengan normal juga pada Linux dengan

menggunanak moonlight dari mono project.




                 Gambar 4.109 Objek Flash Situs Pada Safari 4



       Blog dan forum dapat berjalan dengan baik Firefox 3.0.7 tanpa ada isu

kompatibilitas apapun. Seperti tampak pada gambar 4.110 dan 4.111.
                                   289




Gambar 4.110 Forum Pada Safari 4




 Gambar 4.111 Blog Pada Safari 4
                                                                           290




4.11.4 Pengujian Pada Opera 9

       Opera merupakan salah satu penjelajah web yang ada di pasaran, meskipun

tidak begitu banyak mempunyai penggemar, hanya sekitar 1% hingga 2% pemakai

internet dunia yang menggunakan Opera. Alasan digunakannya Opera pada pengujian

adalah untuk memastikan kompatibilits situs terhadap berbagai macam penjelajah

web. Opera juga dikenal sebagai pembuat penjelajah web mini untuk perangkat

seluler, yang dikenal dengan Opera Mini dengan jumlah pengguna yang cukup

banyak. Yang menarik adalah Opera Mini dibangun dengan dasar yang sama seperti

pada Opera untuk komputer personal, jadi pengujian dengan Opera juga dapat

dijadikan pengujian kompatibilitas dengan perangkat seluler.




                       Gambar 4.112 Situs Pada Opera 9.5
                                                                               291




Pada Opera situs mempunyai sedikit isu kompatibilitas terutama pada objek

Silverlight yang terkadang tidak tampil di layar. Tetapi objek Flash dapat berjalan

dengan baik pada Opera.




                Gambar 4.113 Objek Flash Situs Pada Opera 9.5



       Untuk forum dan blog juga dapat dijalankan dengan sangat baik pada Opera,

karena forum dan blog tidak menggunakan objek Flash maupun Silverlight, seperti

terlihat pada gambar 4.114 dan 4.115.
                                    292




Gambar 4.114 Forum Pada Opera 9.5




 Gambar 4.115 Blog Pada Opera 9.5
                                                                                293




4.11.5 Pengujian Pada Google Chrome 2

       Google Chrome merupakan penjelajah web terbaru yang ada saat ini dan

dibuat oleh Google. Digunakannnya Chrome pada pengujian dimaksudkan untuk

mengujicoba kompatibilitas situs pada penjelajah web terbaru keluaran Google.




                   Gambar 4.116 Situs Pada Google Chrome 2



Google Chrome dapat menjalankan situs dengan sangat baik, tanpa ada anomali

sedikitpun yang terjadi. Begitu juga dengan objek Flash yang terdapat pada situs

dapat berjalan dengan sangat baik pada Google Chrome.
                                                                             294




            Gambar 4.117 Objek Flash Situs Pada Google Chrome 2



       Blog dan forum juga dapat ditampilkan dengan baik pada Google Chrome,

tanpa ada masalah kompatibilitas atau kesalahan kecil. Hal ini cukup menarik

mengingat umut penjelajah web Google Chrome yang cukup muda dan tergolong

baru, namun sudah dapat menjalankan web dengan perangkat pengembangan terbaru

seperti Silverlight 2.0 dan AJAX dengan sangat baik. Tampilan blog dan forum pada

Chrome dapat dilihat pada gambar 4.118 dan 4.119.
                                          295




Gambar 4.118 Forum Pada Google Chrome 2




 Gambar 4.119 Blog Pada Google Chrome 2
                                                                                296




4.11.6 Kesimpulan Hasil Pengujian

       Dari pengujian yang dilakukan dapat ditarik sebuah kesimpulan bahwa situs

sudah mempunyai kompatibilitas yang cukup baik meskipun masih terdapat sedikit

kesalahan. Tetapi kesalahan yang terjadi hanya disebagian penjelajah web, dan

penjelajah web tersebut merupakan penjelajah web dengan jumlah pengguna yang

tidak terlalu banyak. Anomali hanya terjadi pada penjelajah web Opera 9.5 dan Apple

Safari 4 dan anomali tersebut hanya terjadi pada sebagian elemen kecil situs.

       Sebaliknya pada penjelajah web Firefox, Chrome, dan IE situs mempunyai

nilai kompatibilitas sangat tinggi dan anomali hanya terjadi pada objek Flash ketika

dijalankan pada penjelajah web IE. Berdasarkan hasil dari pengujian sangat

direkomendasikan untuk mengakses situs menggunakan Firefox dan Chrome.



4.12 Penelitian Akhir

       Penelitian akhir dilakukan untuk melakukan analisa terhadap respon pengguna

dalam hal ini mahasiswa akan situs pembelajaran berbasis web yang beru selain

http://cai.gunadarma.ac.id. Penelitian dilakukan dengan menyebarkan kuesioner

kepada responden untuk melihat respon yang diberikan terhadap situs sebelumnya

http://www.i-bookshelf.net. Tentang metodologi penelitian, variabel dan indikator

yang digunakan dapat dilihat pada bagian 3 atau metodologi penelitian pada

penulisan ini.
                                                                                                  297




4.12.1 Hasil Analisa Deskriptif Penilitian Akhir

        Hasil dari penelitian dengan tiga puluh responden yang kesemuanya adalah

mahasiswa Universitas Gunadarma dipresentasikan dengan menggunakan analisa

deskriptif. Keempat indikator, kualitas dan kompatibilitas situs, kualitas tampilan,

penyajian materi dan interaksi pemakai akan dianalisa terlebih dahulu menggunakan

tabel distribusi frekuensi seperti pada tabel 4.33 untuk indikator kualitas dan

kompatibilitas, tabel 4.35 untuk indikator kualitas tampilan, tabel 4.37 untuk

indikator penyajian materi, dan tabel 4.39 untuk indikator interaksi pemakai.

   Tabel 4.33 Distribusi Frekuensi Indikator A (Kualitas dan Kompatibilitas)

            Tidak Baik   Kurang Baik        Netral           Baik      Sangat Baik        TOTAL
        F      % Valid   F   % Valid   F     % Valid    F    % Valid   F   % Valid   F     % Valid
 KK1                     1     3,3%    11       36,7%   14     46,7%   4    13,3%    30      100%
 KK2                                   8        26,7%   20     66,7%   2     6,7%    30      100%
 KK3                                   8        26,7%   18     60,0%   4    13,3%    30      100%
 KK4                                   10       33,3%   14     46,7%   6    20,0%    30      100%
 KK5                                   7        23,3%   16     53,3%   7    23,3%    30      100%
 KK6                                   4        13,3%   18     60,0%   8    26,7%    30      100%
 KK7                     1     3,3%    12       40,0%   13     43,3%   4    13,3%    30      100%
 KK8                     1     3,3%    8        26,7%   15     50,0%   6    20,0%    30      100%
 KK9                     1     3,3%    18      60,0%    9      30,0%   2     6,7%    30      100%
 KK10                    1     3,3%    21      70,0%    7      23,3%   1     3,3%    30      100%
 KK11                                  10       33,3%   18     60,0%   2     6,7%    30      100%
 KK12                                  5        16,7%   19     63,3%   6    20,0%    30      100%
 KK13                                  8        26,7%   15     50,0%   7    23,3%    30      100%
 KK14                    1     3,3%    21      70,0%    8      26,7%                 30      100%
Sumber: Data Yang Telah Diolah

        Pada tabel distribusi frekuensi terlihat sebagian besar responden berpendapat

bahwa kinerja situs dalam hal kualitas dan kompatibilitas terbilang sudah sangat baik.
                                                                                      298




Pada variabel KK2 (kemudahan akses dalam browser) sebanyak 66,7% responden

menjawab baik yang berarti situs dapat terakses dengan mudah. Serta pada variabel

KK12 (penyajian informasi) situs memperoleh hasil yang baik dengan 63.3%

responden menjawab baik pada variabel tersebut. Pada variabel KK10 (akses web

dengan menggunakan Opera) 70,0% berpendapat netral, hal ini dikarenakan browser

Opera mempunyai pengguna yang tidak sampai 3% diseluruh dunia dibandingkan

dengan Firefox dengan jumlah responden sebanyak 50% menjawab baik pada

indikator KK8. Pada indikator KK1 yaitu indikator penamaan situs, situs

mendapatkan hasil yang lebih baik dibandingkan situs sebelumnya dengan 46.7%

responden berpendapat baik. Serta indikator KK11 yang berkenaan dengan tautan

situs juga memperoleh hasil yang cukup baik.

    Tabel 4.34 Analisa Deskriptif Indikator A (Kualitas dan Kompatibilitas)


                      N    Range   Minimum   Maximum   Mean    Std. Deviation   Variance
 KK1                  30       3         2         5    3,70             ,750       ,562
 KK2                  30       2         3         5    3,80             ,551       ,303
 KK3                  30       2         3         5    3,87             ,629       ,395
 KK4                  30       2         3         5    3,87             ,730       ,533
 KK5                  30       2         3         5    4,00             ,695       ,483
 KK6                  30       2         3         5    4,13             ,629       ,395
 KK7                  30       3         2         5    3,67             ,758       ,575
 KK8                  30       3         2         5    3,87             ,776       ,602
 KK9                  30       3         2         5    3,40             ,675       ,455
 KK10                 30       3         2         5    3,27             ,583       ,340
 KK11                 30       2         3         5    3,73             ,583       ,340
 KK12                 30       2         3         5    4,03             ,615       ,378
 KK13                 30       2         3         5    3,97             ,718       ,516
 KK14                 30       2         2         4    3,23             ,504       ,254
 Valid N (listwise)   30

Sumber: Data Yang Telah Diolah
                                                                                                299




       Dari tabel analisa deskriptif dapat dilihat bahwa pada indikator kualitas dan

kompatibilitas kecederungan jawaban responden adalah adalah berkisar pada jawaban

netral dan baik dengan kecenderungan terbanyak kepada jawaban baik. Kejadian ini

dapat dilihat dari rata-rata variabel pada indikator kualitas dan kompatibilitas berkisar

antar 3,23 hingga 4.13 yang mendekati skala jawaban baik (4) dan netral (3).

            Tabel 4.35 Ditribusi Frekuensi Indikator B (Kualitas Tampilan)

           Tidak Baik   Kurang Baik        Netral          Baik      Sangat Baik        TOTAL
       F      % Valid   F   % Valid   F     % Valid   F    % Valid   F   % Valid   F     % Valid
 KT1                                  9       30,0%   20     66,7%   1     3,3%    30      100%
 KT2                                  5       16,7%   20     66,7%   5    16,7%    30      100%
 KT3                                  7       23,3%   18     60,0%   5    16,7%    30      100%
 KT4                    1     3,3%    12      40,0%   12     40,0%   5    16,7%    30      100%
 KT5                                  5       16,7%   19     63,3%   5    16,7%    29       97%
 KT6                                  17      56,7%   10     33,3%   3    10,0%    30      100%
 KT7                    1     3,3%    16      53,3%   9      30,0%   4    13,3%    30      100%
Sumber: Data Yang Telah Diolah



       Pada tabel distribusi frekuensi indikator kualitas tampilan situs memperoleh

hasil yang sangat baik, pada variabel KT1 (petunjuk penggunaan situs), KT2

(keterbacaan teks), KT3 (kualitas tampilan gambar), dan KT5 (komposisi warna)

antara 60,0% hingga 66,7% responden menjawab baik, yang berarti dalam segi

tampilan situs telah mendapatkan hasil yang baik dibandinkan situs sebelumnya. Pada

variabel KT6 (tingkat kejelasan suara) dan KT7 (musik yang digunakan) sekitar

53,3% hingga 56,7% responden mempunyai persepsi yang biasa. Dapat diambil

sebuah kesimpulan dari distribusi untuk indikator kualitas dan tampilan, kesimpulan
                                                                                                               300




yang dapat ditarik adalah situs telah berhasil untuk memperbaiki penampilan dan

hanya dibutuhkan sedikit perbaikan pada aspek audio dari situs.

             Tabel 4.36 Analisa Deskriptif Indikator B (Kualitas Tampilan)


                         N       Range     Minimum       Maximum        Mean        Std. Deviation     Variance
KT1                      30           2            3             5       3,73                   ,521       ,271
KT2                      30           2            3             5       4,00                   ,587       ,345
KT3                      30           2            3             5       3,93                   ,640       ,409
KT4                      30           3            2             5       3,70                   ,794       ,631
KT5                      30           2            3             5       3,97                   ,615       ,378
KT6                      30           2            3             5       3,53                   ,681       ,464
KT7                      30           3            2             5       3,53                   ,776       ,602
Valid N (listwise)       30
Sumber: Data Yang Telah Diolah



        Pada analisa deskriptif indikator kualitas tampilan hal yang cukup baik dapat

dilihat pada hasil analisa ini. Kecenderungan mahasiswa menjawab pada skala baik

(4). Dapat dilihat dari rata-rata yang didapat 3,53 hingga 4.00 yang berarti

kecenderungan mahasiswa menjawab baik.

            Tabel 4.37 Distribusi Frekuensi Indikator C (Penyajian Materi)

            Tidak Baik       Kurang Baik        Netral           Baik           Sangat Baik            TOTAL
        F      % Valid       F   % Valid    F    % Valid    F      % Valid      F     % Valid      F    % Valid
 PM1                                        5      16,7%    23       76,7%      2        6,7%     30      100%
 PM2                         1     3,3%     8      26,7%    20       66,7%      1        3,3%     30      100%
 PM3                                        7      23,3%    20       66,7%      3       10,0%     30      100%
 PM4                                        5      16,7%    23       76,7%      2        6,7%     30      100%
 PM5                                        6      20,0%    22       73,3%      2        6,7%     30      100%
 PM6                                        7      23,3%    17       56,7%      6       20,0%     30      100%
 PM7                                       13      43,3%    14       46,7%      3       10,0%     30      100%
 PM8                                        3      10,0%    18       60,0%      9       30,0%     30      100%
Sumber: Data Yang Telah Diolah
                                                                                          301




        Hasil dari tabel distribusi frekuensi menunjukkan menunjukkan 46,7% hingga

76,7% responden menjawab baik pada setiap variabel dari indikator penyajian materi.

Dengan sebagian besar sisa responden 10,0% hingga 43,3% menjawab netral, hal ini

menunjukkan bahwa kinerja situs dalam hal penyajian materi sudah baik. Variabel

dengan kinerja paling baik adalah variabel PM1 (kejelasan tujuan pembelajaran) dan

PM4 (kemudahan pemahaman materi) sebesar 76,7%. Dari hasil ini maka situs telah

berhasil mendapatkan respon yang baik dalam segi penyajian materi dibanding situs

sebelumnya yang juga termasuk sudah baik.

           Tabel 4.38 Analisa Deskriptif Indikator C (Penyajian Materi)

                       N    Range   Minimum    Maximum    Mean    Std. Deviation   Variance
  PM1                  30       2          3          5    3,90             ,481        ,231
  PM2                  30       3         2           5    3,70            ,596        ,355
  PM3                  30       2         3           5    3,87            ,571        ,326
  PM4                  30       2         3           5    3,90            ,481        ,231
  PM5                  30       2         3           5    3,87            ,507        ,257
  PM6                  30       2         3           5    3,97            ,669        ,447
  PM7                  30       2         3           5    3,67            ,661        ,437
  PM8                  30       2         3           5    4,20            ,610        ,372
  Valid N (listwise)   30
 Sumber: Data Yang Telah Diolah



        Hasil analisa deskriptif pada indikator penyajian materi menunjukkan bahwa

kecenderungan para responden menjawab netral (3) dan baik (4), dengan

kecenderungan lebih banyak pada jawaban baik. Hal digambarkan oleh rata-rata

jawaban responden pada setiap variabel di dalam indikator penyajian materi berkisar

antara 3,67 hingga 4,20. Dapat disimpulkan sesuai dengan data analisa deskriptif dan
                                                                                                 302




distribusi frekuensi bahwa materi yang terdapat pada situs sudah memiliki kinerja

yang baik dalam aspek penyajian materi.

            Tabel 4.39 Distribusi Frekuensi Indikator D (Interaksi Pemakai)

            Tidak Baik   Kurang Baik        Netral          Baik      Sangat Baik        TOTAL
        F      % Valid   F   % Valid   F     % Valid   F    % Valid   F   % Valid   F     % Valid
 IP1                     1     3,3%    9       30,0%   15     50,0%   5    16,7%    30      100%
 IP2                                   7       23,3%   20     66,7%   3    10,0%    30      100%
 IP3                     1     3,3%    2        6,7%   18     60,0%   9    30,0%    30      100%
 IP4                                   10      33,3%   13     43,3%   7    23,3%    30      100%
 IP5                     1     3,3%    8       26,7%   16     53,3%   5    16,7%    30      100%
 IP6                     1     3,3%    12      40,0%   12     40,0%   5    16,7%    30      100%
 IP7                     1     3,3%    10      33,3%   18     60,0%   1     3,3%    30      100%
 IP8                     2     6,7%    10      33,3%   13     43,3%   5    16,7%    30      100%
 IP9                     1     3,3%    9       30,0%   16     53,3%   4    13,3%    30      100%
 IP10                    1     3,3%    11      36,7%   16     53,3%   2     6,7%    30      100%
 IP11                                  12      40,0%   13     43,3%   5    16,7%    30      100%
 IP12                    1     3,3%    9       30,0%   16     53,3%   4    13,3%    30      100%
Sumber: Data Yang Telah Diolah



        Tabel distribusi frekuensi untuk indikator interaksi pemakai menunjukkan

40,0% hingga 66,7% responden berpendapat baik pada variabel yang terdapat pada

indikator interaksi pemakai dengan sisanya 6,7% hingga 40% berpendapat netral.

Pada variabel seperti variabel IP2 (tingkat keaktifan) dan IP3 (urutan tampilan)

sebanyak 66,7% dan 60% responden berpendapat bahwa urutan tampilan dan

keaktifan pengguna sudah dapat tersajikan dengan baik. Begitu juga dengan variabel

IP7 (panduan cerdas) sebanyak 60% responden berpendapat situs telah memiliki

panduan pengguna yang baik.
                                                                                       303




           Tabel 4.40 Analisa Deskriptif Indikator D (Interaksi Pemakai)


                       N    Range   Minimum   Maximum   Mean    Std. Deviation   Variance
  IP1                  30       3         2         5    3,80             ,761       ,579
  IP2                  30       2         3         5    3,87             ,571       ,326
  IP3                  30       3         2         5    4,17             ,699       ,489
  IP4                  30       2         3         5    3,90             ,759       ,576
  IP5                  30       3         2         5    3,83             ,747       ,557
  IP6                  30       3         2         5    3,70             ,794       ,631
  IP7                  30       3         2         5    3,63             ,615       ,378
  IP8                  30       3         2         5    3,70             ,837       ,700
  IP9                  30       3         2         5    3,77             ,728       ,530
  IP10                 30       3         2         5    3,63             ,669       ,447
  IP11                 30       2         3         5    3,77             ,728       ,530
  IP12                 30       3         2         5    3,77             ,728       ,530
  Valid N (listwise)   30
 Sumber: Data Yang Telah Diolah



         Hasil analisa deskriptif pada indikator interaksi pemakai menunjukkan bahwa

kecenderungan para responden menjawab netral (3) dan baik (4), dengan

kecenderungan lebih banyak pada jawaban baik. Hal digambarkan oleh rata-rata

jawaban responden pada setiap variabel di dalam indikator penyajian materi berkisar

antara 3,63 hingga 4,17. Dapat disimpulkan sesuai dengan data analisa deskriptif dan

distribusi frekuensi bahwa situs telah memiliki tampilan yang dapat berinteraksi

dengan pemakai yang cukup baik.



4.12.2 Kesimpulan Penelitian Akhir

         Dari hasil analisa deskriptif yang telah dilakukan pada data yang diperoleh

dari kuesioner dapat ditarik suatu kesimpulan yang berkenaan dengan kinerja dari
                                                                                 304




situs. Secara keseluruhan kinerja situs sudah dapat memberikan kinerja yang

diharapkan dan mempunyai fungsi sesuai yang diharapkan. Dengan semua indikator

yang diujikan medapatkan nilai baik meskipun belum sempurna.

       Pada indikator kualitas dan kompatibilitas serta penyajian materi memberikan

kinerja yang memuaskan, hal tersebut dapat dilihat dengan kecenderungan responden

berpendapat baik pada beberapa variabel di dalam indikator kualitas dan

kompatibilitas serta berpendapat baik pada hampir semua variabel di dalam indikator

penyajian materi. Serta pada indikator kualitas tampilan dan interaksi pemakai, situs

menunjukkan kinerja yang lebih baik dari situs sebelumnya, dengan sebagian besar

responden memilih untuk berpendapat baik pada hampir semua variabel yang

terdapat pada kedua indikator tersebut.

       Dengan hasil tersebut dapat diasumsikan bahwa situs telah berhasil

memberikan pengguna dalam hal ini mahasiswa suatu metode dan media

pembelajaran yang baru. Didukung dengan tingkat interaktifitas pengguna yang

tinggi sehingga dapat membantu mahasiswa dalam memahami mater yang diajarkan.

				
DOCUMENT INFO
Shared By:
Categories:
Tags:
Stats:
views:104
posted:11/6/2011
language:Indonesian
pages:193