E LEARNING TUTORIAL ADOBE FLASH CS3 BER

(1)

i SKRIPSI

Diajukan Untuk Memenuhi Salah Satu Syarat Kelulusan Pada Jenjang Strata Program TI Universitas Surakarta

Disusun Oleh : Nama : Ade Oktarino

NIM : J.041R0016 Program Studi : Teknik Informatika

FAKULTAS TEKNOLOGI INFORMATIKA

UNIVERSITAS SURAKARTA

(2)

ii

Judul : E-elearning Tutorial Adobe Flash CS3 Berbasis Web Nama : Ade Oktarino

NIM : J.041R0016

Fakultas : Teknologi Informatika Program Studi : Teknik Informatika Jenjang : S1

Naskah Skripsi ini disetujui Untuk Di Ajukan Surakarta, Agustus 2010

Mengetahui, Pembimbing Utama

Sukoco. M.Si, M.Kom

Pembimbing Pembantu

(3)

iii

PENGESAHAN SKRIPSI

JUDUL : E-elearning Tutorial Adobe Flash CS3 Berbasis Web NAMA : Ade Oktarino

NIM : J.041R0016

Naskah ini telah diujikan didepan dewan penguji Pada Hari / tanggal :

Dosen Penguji : 1. ( )

2. ( )

3. ( )

Mengetahui, Dekan

Ir.F.A Luky Primantari,M.T

Ketua Program Studi

(4)

iv ABSTRAKSI

Banyaknya buku, e-book, artikel maupun video pembahasan pembelajaran tentang tutorial Adobe Flash CS3 untuk memudahkan pengguna mempelajarinya serta adanya lembaga pendidikan yang membuka jurusan pembuatan animasi dengan menggunaka Adobe Flash CS3 dengan sistem pengajaran yang cepat, akan tetapi masih juga mendapatkan kendala atau permasalahan bagi pengguna untuk mempelajarinya dikarenakan tebalnya buku menyebabkan kebosanan bagi pengguna dan tidak adanya diskusi tanya jawab jika pengguna mangalami kesulitan dalam mempelajarinya serta mahalnya biaya pendidikan yang membuat penghambatan proses pembelajaran.

Tujuan dari penelitian ini adalah web e-learning yang dimana didalamnya terdapat berbagai tutorial pembuatan animasi menggunakan Adobe Flash CS3 yang berbentuk video maupun teks tutorial dan juga tanya jawab ataupun mengomentari video tutorial yang bisa diakses dimanapun dengan menggunakan ponsel, PDA maupun web.

Manfaat yang didapatkan bagi pengguna, mudah diakses secara cepat dan cermat melalui internet dengan menggunakan Web, PDA maupun Ponsel serta bisa diakses dimana – mana tanpa memikirkan tempat dan waktu. Adanya pembimbing jarak jauh dan diskusi memberikan kemudahan dan pemahaman yang cepat untuk pengguna jika mengalami kesulitan dalam pembelajaran tersebut. Dengan sasaran yang ditujukan kepada semua pengguna yang akan mempelajari tutorial tersebut.

Hasil yang telah diharapkan dari penelitian ini terdapat beberapa kesimpulan yaitu, pengguna terbantu dengan adanya web e-elearning ini untuk mempelajari pembuatan animasi Flash dengan menggunakan software Adobe Flash CS3, yang dimana terdapat beberapa kategori pengenalan pembelajaran serta adanya fasilitas tanya jawab untuk pengguna dengan tujuan berkonsultasi kepada admin dan para pengguna juga bisa mengakses web e-learning ini dengan menggunakan web browser mobile.

Kata kunci : Web E-learning Adobe Flash CS3 xxi + 21 lembar

(5)

v

Flash Macromedia is a powerful tool created by Macromedia to cope with the expectations of the creator of animation. Macromedia Flash was originally created in an effort to build animated color - colors for the web and to create animated GIFs. Designers, web professionals and beginners have chosen the Macromedia Flash CS3, for various reasons such as convenience and availability of the script so easy to create an interactive animation.

The problem is how the presentation of tutorials that are easy and can be learned and understood quickly by the beginners who want to learn how making an animation, using Macromedia Flash CS3. A presentation using E-learning method based animation and multimedia.

This research also will be described in the planning tutorials, animation creation, and implementation at the end of the drafting process. Hopefully with this research is expected Macromedia Flash CS3 tutorials can be learned and understood quickly and easily by beginners who want to study the making of animation.

Keyword : Web E-learning Tutorial Adobe Flash CS3 xxi + 21 pages

(6)

vi

Hanya pada cuaca cukup gelaplah kita bisa melihat bintang

Janganlah berhenti berharap,

Karena harapan dapat melihat yang tak terlihat mata,

Dapat merasakan yang tak teraba,

(7)

vii

Karya kecil ini bukanlah persembahan yang terindah

Tapi ini adalah persembahan untuk yang terindah

Papa dan Mama

Kasih sayang dan cintamu tak akan pernah lekang oleh waktu

Pancaran kasih sayang buat kakak

–

kakaku, Ayang dan Ria

Seseorang, moga esok selalu terjaga dalam kebahagian

(8)

viii

Allhamdulillah, segala puji dan syukur hanyalah milik Allah semata. Dialah yang sesungguhnya Maha Memberi Petunjuk, Karena petunjuk-Nya skripsi ini dapat diselesaikan, walau masih banyak kekurangan, segala rasa syukur dan sujudku ke hadiratmu-Mu Illahi robbi dan ridhomu, dan sholawat serta salam yang tiada akhir untuk tauladanku Rasulullah Muhammad SAW yang telah mengajarkan kepada umatnya arti rahmat dan mengenalkan kepada Sang Kholik.

Penulis skripsi ini bukanlah semata-mata merupakan jerih payah dan usaha Penulis sendiri, akan tetapi banyak pihak yang memberikan bantuan, baik langsung maupun tidak langsung, yang berupa petunjuk atau saran maupun dorongan moril. Oleh karena itu dengan segala kerendahan hati Penulis mengucapkan terima kasih kepada :

1. Dr. Margono. SE. M.M, Selaku Rektor Universitas Surakarta.

2. Ir. F. A Luky Primantari, M.T Selaku Dekan Fakultas Teknologi Informatika.

3. Bambang Eka Purnama, M.Kom Selaku Ketua Program Studi Teknik Informatika.

4. Sukoco. M.Si, M.Kom Selaku Dosen Pembimbing 1 yang memberikan arahan serta membimbing dalam pelaksanaan dan penyusunan skripsi. 5. Tri Irianto.T.J. M.T selaku dosen pembimbing 2 yang telah membantu

(9)

ix

8. Teman-teman mahasiswa Teknik Informatika Universitas Surakarta pada umumnya dan khususnya angkatan 2004, serta smua pihak yang tak bisa disebutkan satu persatu, hanya Allah SWT yang dapat membalas segalnya.

Penulis menyadari bahwa dalam Penulisan skripsi ini masih terdapat banyak kekurangan dan masih jauh dari sempurna, untuk itu Penulis mengharapkan kritik dan saran yang membangun. Semoga sebuah karya sederhana ini bisa menjadi bagian dari perkembangan ilmu Informatika dan bermanfaat bagi sesama. Amin

Wassalamu’alaikum Wr. Wb.

(10)

x

HALAMAN JUDUL ... i

HALAMAN PERSETUJUAN ... ii

HALAMAN PENGESAHAN ... iii

ABSTRACT ... iv

ABSTRAK ... v

MOTTO ... vi

PERSEMBAHAN ... vii

KATA PENGANTAR ... viii

DAFTAR ISI ... x

DAFTAR GAMBAR ... xv

DAFTAR TABEL ... xxii

DAFTAR ISTILAH ... xxiii

BAB I PENDAHULUAN ... 1

1.1. Latar Belakang Masalah ... 1

1.2. Rumusan Masalah ... 2

1.3. Batasan Masalah ... 3

1.4. Tujuan Penelitian ... 3

1.5. Manfaat Penelititan ... 3

(11)

xi

2.2. Macromedia Dreamweaver ... 7

2.3.Adobe Flash ... 8

2.4. Multimedia ... 9

2.4.1. Unsur Multimedia ... 9

2.5. Internet ... 12

2.6. Web ... 12

2.7. Apache Web Server ... 13

2.8. Openwave Simulator ... 14

2.9. Basis Data ... 14

2.10. Php ... 15

2.11. Database MySQL ... 16

BAB III ANALISIS, PERANCANGAN DAN PEMROGRAMAN ... 18

3.1. Analisis Pengguna ... 18

3.1.1. Analisis Kebutuhan Pengguna ... 18

3.1.2. Sasaran Pembuatan E-learning Tutorial Adobe Flash ... 18

3.2. Spesifikasi Sofware dan Hardware ... 19

3.3. Konsep Pengembangan Web E-elearning ... 19

3.4. Strukture Link ... 20

3.5. Analisis dan Rancangan Aplikasi Database ... 22

(12)

xii

3.5.3.2. Halaman Client (Mobile) ... 34

3.5.3.3. Halaman Administrator ... 37

3.6. Pembuatan Website E-learning Versi Desktop ... 44

3.6.1. Penginstalan Web Server ... 44

3.6.2. Pendefinisian Situs Pada Dreamweaver ... 49

3.6.3. Koneksi Database ... 54

3.6.4. Pembuatan Layout Awal ... 54

3.6.4.1. Pembuatan CSS ... 55

3.6.4.2. Pembuatan Layout Header ... 60

3.6.4.3. Pembuatan Sub Menu ... 64

3.6.4.4. Pembuatan Layout Isi ... 65

3.6.5. Menggambungkan Layout ... 68

3.6.6. Pembuatan Isi Halaman ... 70

3.6.6.1. Pembuatan Halaman Home ... 70

3.6.6.2. Pembuatan Halaman Tutorial ... 71

3.6.6.2.1. Pembuatan Kategori Tutorial ... 71

3.6.6.2.2. Pembuatan Halaman Daftar Tutorial ... 72

3.6.6.2.3. Pembuatan Halaman detail Tutorial ... 75

(13)

xiii

3.6.6.4. Pembuatan Halaman Forum ... 88

3.6.6.5. Pembuatan Halaman About ... 93

3.6.6.6. Pembuatan Halaman Contact ... 94

3.7. Pembuatan Website E-elearning Versi Mobile ... 95

3.7.1. Penginstalan Openwave Simulator ... 95

3.7.2. Pembuatan Layout Awal ... 97

3.7.2.2. Pembuatan Layout Isi ... 98

3.7.2.3. Pembuatan Layout Footer ... 99

3.7.3. Menggambungkan Layout ... 100

3.7.4. Pembuatan Isi Halaman ... 101

3.7.4.1. Pembuatan Halaman Home ... 102

3.7.4.2. Pembuatan Halaman Tutorial ... 102

3.7.4.2.1. Pembuatan Kategori Tutorial ... 102

3.7.4.2.2. Pembuatan Halaman Daftar Tutorial ... 104

3.7.4.2.3. Pembuatan Halaman Detail Tutorial .... 107

3.8. Pembuatan Administrator ... 109

3.8.1. Pembuatan Halaman Login ... 111

3.8.2. Pembuatan Halaman Logut ... 112

(14)

xiv

4.1.2. Menjalankan Program Website Secara Online ... 116

4.1.2.1. Uploud File ... 116

4.1.2.2. Meng-Uploud MySQL Database ... 118

4.2. Tahap Keluaran ... 125

4.2.1. Halaman Client (Desktop) ... 125

4.2.2. Halaman Client (Moblie) ... 130

4.2.3. Halaman Administrator ... 133

4.3. Uji Coba ... 139

4.3.1. Kesimpulan ... 142

4.4. Kelebihan Dan Kekurangan ... 147

BAB V KESIMPULAN DAN SARAN ... 147

5.1. Kesimpulan ... 147

5.2. Saran ... 147

DAFTAR PUSTAKA ... 151

(15)

xv

Gambar 3.1 Struktur Link Pada Pengguna ... 20

Gambar 3.2 Struktur Link Pada Admin ... 20

Gambar 3.3 Struktur Link Pengguna Versi Mobile ... 21

Gambar 3.4 Entitiy Relationship Diagram ... 23

Gambar 3.5 Desain rancangan halaman utama ... 24

Gambar 3.6 Desain rancangan halaman kategoti ... 25

Gambar 3.7 Desain rancangan halaman tutorial ... 26

Gambar 3.8 Desain rancang detail tutorial ... 27

Gambar 3.9 Desain rancangan Halaman Kategori ... 28

Gambar 3.10 Desain rancangan halaman video ... 29

Gambar 3.11 Desain rancangan halaman detail video ... 30

Gambar 3.12 Desain rancangan halaman about ... 31

Gambar 3 13 Desain rancangan halaman forum ... 32

Gambar 3.14 Desain rancangan halaman contact ... 32

Gambar 3.15 Desain rancangan halaman utama versi mobile ... 33

Gambar 3.16 Desain rancangan halaman kategori versi mobile ... 34

Gambar 3.17 Desain rancangan halaman daftar tutorial versi mobile .. 34

Gambar 3.18 Desain rancangan halaman detail tutorial versi mobile ... 35

Gambar 3.19 Desain rancangan halaman contact versi mobile ... 35

(16)

xvi

Gambar 3.24 Desain rancangan detail tutorial ... 38

Gambar 3.25 Desain rancangan edit tutorial ... 39

Gambar 3.26 Desain rancangan tambah video tutorial ... 40

Gambar 3.27 Desain rancangan detail video tutorial ... 41

Gambar 3.28 Desain rancangan halaman setting ... 42

Gambar 3.29 Desain rancangan pengguna administration ... 42

Gambar 3.30 Desain rancangan edit pengguna ... 43

Gambar 3.31 Tampilan penginstalan Apache server ... 44

Gambar 3.39 Tampilan awal Dreamweaver ... 48

Gambar 3.40 Tampilan awal Site Definition Dreamweaver ... 49

Gambar 3.41 Tampilan Site Definition Dreamweaver ... 50

Gambar 3.42 Tampilan Site Definition Dreamweaver ... 51

(17)

xvii

Gambar 3.47 Tampilan halaman menyimpan CSS pada Dreamweaver 59

Gambar 3.48 Tampilan editor PHP ... 60

Gambar 3.49 Tampilan kode editor PHP pada Dreamweaver ... 60

Gambar 3.50 Tampilan Attach External Style Sheet ... 61

Gambar 3.51 Tampilan Attach External Style Sheet ... 61

Gambar 3.52 Tampilan background header pada kode editor HTML .. 62

Gambar 3.53 Tampilan menu header pada kode editor HTML ... 62

Gambar 3.54 Tampilan menu header pada kode editor HTML ... 63

Gambar 3.55 Tampilan pembuatan Table ... 63

Gambar 3.58 Tampilan script layout isi pada Dreamweaver ... 66

Gambar 3.59 Tampilan script layout Footer pada Dreamweaver ... 66

Gambar 3.60 Tampilan hasil penggabungan layout pada Dreamweaver 68 Gambar 3.61 Tampilan isi home pada Dreamweaver ... 70

Gambar 3.62 Tampilan script halaman kategori pada Dreamweaver ... 71

Gambar 3.63 Tampilan script daftar tutorial pada Dreamweaver ... 74

Gambar 3.64 Tampilan script detail tutorial pada Dreamweaver ... 78

Gambar 3.65 Tampilan script video categori pada Dreamweaver ... 80

(18)

xviii

Gambar 3.70 Halaman pengecekan kompabilitas dan konfigurasi server 88 Gambar 3.71 Halaman pengecekan kompabilitas dan konfigurasi server 88

Gambar 3.72 Halaman pengaturan database server ... 89

Gambar 3.73 Halaman pengaturan database berhasil ... 89

Gambar 3.74 Halaman pengaturan administrator ... 90

Gambar 3.75 Halaman pengaturan administrator berhasil ... 90

Gambar 3.76 Halaman download file pengaturan ( Config.php) ... 90

Gambar 3.77 Halaman file config.php telah ada di server ... 91

Gambar 3.78 Halaman pengaturan email ... 91

Gambar 3.79 Halaman pembuatan database ... 91

Gambar 3.80 PhpBB selesai diinstall ... 92

Gambar 3.81 Halaman papan pengaturan administrator ... 92

Gambar 3.82 Tampilan script detail video tutorial pada Dreamweaver 93

Gambar 3.83 Tampilan script contact pada Dreamweaver ... 93

Gambar 3.84 Tampilan setup Openwave Simulator ... 94

Gambar 3.88 Tampilan layout header pada Dreamweaver ... 97

(19)

xix

Gambar 3.93 Tampilan script tutorial pada Dreamweaver ... 103

Gambar 3.94 Tampilan script daftar tutorial pada Dreamweaver ... 105

Gambar 3.95 Tampilan script detail tutorial pada Dreamweaver ... 108

Gambar 3.96 Tampilan admin pada Dreamweaver ... 110

Gambar 3.97 Tampilan script login pada Dreamweaver ... 111

Gambar 3.98 Tampilan script setting pada Dreamweaver ... 113

Gambar 4.1 Icon File Manager ... 117

Gambar 4.2 PHPMyAdmin pada komputer local ... 118

Gambar 4.3 Database pada phpMyadmin ... 118

Gambar 4.4 Tabel dalam Database ... 119

Gambar 4.5 Menu Export Database 1 ... 119

Gambar 4.6 Menu Export Database 2 ... 120

Gambar 4.7 Option pada export database ... 120

Gambar 4.8 Memilih option untuk mengexport database ... 121

Gambar 4.9 Save as file database ... 121

Gambar 4.10 Kotak dialog penyimpanan ... 121

Gambar 4.11 Hasil dump dari database ... 122

Gambar 4.12 Memilih menu MySQL pada File Manager ... 122

Gambar 4.13 Membuat user database baru ... 123

(20)

xx

Gambar 4.18 Lokasi database hasil dump ... 124

Gambar 4.19 Halaman pembuka pada desktop ... 125

Gambar 4.20 Halaman kategori tutorial pada desktop ... 126

Gambar 4.21 Halaman daftar tutorial pada desktop ... 126

Gambar 4.22 Halaman detail tutorial pada desktop ... 127

Gambar 4.23 Halaman kategori video tutorial pada desktop ... 126

Gambar 4.24 Halaman daftar video tutorial pada desktop ... 128

Gambar 4.25 Halaman detail video tutorial pada Desktop ... 128

Gambar 4.26 Halaman Forum pada Desktop ... 129

Gambar 4.27 Halaman about pada Desktop ... 129

Gambar 4.28 Halaman contact pada desktop ... 130

Gambar 4.29 Halaman pembuka pada mobile ... 131

Gambar 4.30 Halaman kategori tutorial pada mobile ... 131

Gambar 4.31 Halaman daftar tutorial pada mobile ... 132

Gambar 4.32 Halaman detail tutorial pada mobile ... 132

Gambar 4.33 Halaman contact pada mobile ... 133

Gambar 4.34 Halaman login admin pada desktop ... 134

Gambar 4.35 Halaman pembuka admin pada desktop ... 134

Gambar 4.36 Halaman edit tutorial pada desktop ... 135

(21)

xxi

Gambar 4.41 Halaman detail video tutorial pada desktop ... 137

Gambar 4.42 Halaman setting pada desktop ... 138

Gambar 4.43 Halaman pengguna administrator pada desktop ... 138

Gambar 4.44 Halaman edit pengguna administrator pada desktop ... 139

Gambar 4.45 Grafik Responden (p1) ... 142

(22)

xxii

(23)

xxiii ActionScript

Asynchronous Backdrop Drag and drop E-learning

Game

Hyperpicture Interface Movie

Pocket Digital Assistance Storyboard

(24)

1

PENDAHULUAN

1.1. Latar Belakang Masalah

Perkembangan teknologi informasi beberapa tahun belakangan ini

berkembang dengan kecepatan yang sangat tinggi, sehingga dengan perkembangan

ini telah mengubah paradigma masyarakat dalam mencari dan mendapatkan

informasi, yang tidak lagi terbatas pada informasi surat kabar, audio visual dan

elektronik, tetapi juga sumber - sumber informasi lainnya yang salah satu diantaranya

melalui jaringan Internet. Salah satu bidang yang mendapatkan dampak yang cukup

berarti dengan perkembangan teknologi ini adalah e-learning yang dimana sebagai

kegiatan belajar asynchronous melalui perangkat elektronik komputer yang memperoleh bahan belajar yang sesuai dengan kebutuhannya. Rosenberg (2001) menekankan bahwa e-learning merujuk pada penggunaan teknologi internet untuk mengirimkan serangkaian solusi yang dapat meningkatkan pengetahuan dan keterampilan (Rosenberg, 2001)

Saat ini banyak beredarnya buku, e-book, artikel maupun video

pembahasan tutorial Adobe Flash CS3 di toko buku ataupun melalui internet, akan

tetapi semua itu mempunyai kelemahan bagi penggunanya dikarenakan ketebalan

buku serta tidak adanya diskusi jika pengguna mengalami kesulitan maupun

Lembaga pendidikan yang membuka jurusan tentang pembuatan animasi pun juga

(25)

dikarenakan minimnya keuangan.

Maka dari itulah Penulis membuat e-learning Tutorial Adobe Flash CS3 Berbasis Web bertujuan memberikan kemudahan bagi pengguna yang hendak mempelajari cara pembuatan animasi tersebut, dengan mudah dan efektif waktu melalui media internet, yang bisa diakses dimanapun dengan menggunakan Telepon Seluler (Ponsel), Pocket Digital Assistance (PDA) maupun Website (Web). Yang dimana pengguna menemui kesulitan dalam mempelajari tutorial tersebut, bisa berdiskusi ataupun tanya jawab secara on-line dimanapun atau kapanpun pengguna membutuhkannya.

1.2. Perumusan Masalah

Berdasarkan latar belakang di atas dapat diambil rumusan masalah sebagai berikut :

a. Untuk mempelajari cara penggunaan Tutorial Adobe Flash CS3 secara interaktif cepat dan gampang dibutuhkan media pembelajaran dengan internet yang mudah diakses oleh pengguna melalui PDA (Pocket Digital Assistance), Ponsel (Telepon Seluler)maupun Web (Website). b. Buku Tutorial Adobe Flash CS3 yang tebal serta lembaga pendidikan

(26)

Dalam penelitian ini penulis perlu untuk melakukan batasan masalah guna mempersempit masalah yang dibahas agar sasaran yang dipakai lebih terfokus. Maka dibatasi masalah dengan meliputi :

a. Pengenalan Interface Flash. b. Pengenalan dan penggunaan Tool. c. Mendesain gambar.

d. Menganimasikan gambar.

e. Pengenalan dan penggunaan ActionScript.

1.4. Tujuan Penelitian

Tujuan dari penelitian ini menghasilkan web e-learning yang dimana didalamnya terdapat berbagai tutorial pembuatan animasi menggunakan Adobe Flash CS3 dan juga tanya jawab mengenai tutorial yang bisa diakses dimanapun dengan menggunakan ponsel, PDA maupun web. Dalam e-learning tutorial Adobe Flash CS3 terdapat perbedaan Fitur antara Web dan Mobile, yang dimana pada versi Web nya terdapat tutorial video dan tutorial teks sedangkan untuk versi Mobile hanya terdapat tutorial yang berupa teks.

1.5. Manfaat Penelitian

Adapun manfaat dari pembuatan penelitian ini adalah :

(27)

tutorial Adobe Flash CS3 dapat di akses ke dalam Ponsel, PDA maupunWeb tanpa memikirkan waktu dan tempat.

1.6. Metode Penelitian

Metode penelitian sangat diperlukan untuk mendapatkan hasil yang baik, juga bukti kebenaran suatu konsep dan teori yang diperoleh maka digunakan beberapa metode penelitian sebagai berikut :

a. Observasi

Dengan melihat tutorial yang berbentuk buku maupun video serta mengamati orang sekitar yang mempelajari pembuatan animasi serta referensi orang lain tentang tutorial Adobe Flash CS3 yang sudah ada sebelumnya untuk dijadikan referensi.

b. Kepustakaan

Merupakan pengumpulan data dengan cara pengambilan data-data dari catatan kuliah serta buku-buku maupun video dan juga melakukan browsing internet yang ada kaitannya dengan bidang animasi Adobe Flash CS3, untuk mendapatkan hal yang ada kaitannya dengan tutorial Adobe Flash CS3 serta perancangan dan pembuatan.

c. Wawancara

(28)

diperlukan. d. Analisis

Menganalisis bagaimana membuat tutorial Adobe Flash CS3 secara baik.

e. Perancangan Tutorial

Membuat rancangan Tutorial yang meliputi pembuatan Tutorial dasar – dasar bagi pengguna, storyboard, anggaran biaya yang digunakan. f. Implementasi

Mengimplementasikan hasil dari pembuatan Tutorial yang telah dibuat dalam bentuk web dengan bahasa HTML dan PHP.

1.7. Sistematika Penulisan BAB I PENDAHULUAN

Bab ini membahas tentang Latar Belakang masalah, Perumusan Masalah, Batasan Masalah, Tujuan Penelitian, Manfaat Penelitian, Metode Penelitian, Sistematika Penulisan.

BAB II GAMBARAN UMUM DAN LANDASAN TEORI

Bab ini membahas tentang gambaran umum dan landasan teori yang digunakan dalam pembuatan E-Learning Tutorial Adobe Flash CS3 Berbasis Web.

(29)

desain sistem dan penyusunan atau penataan tutorial tersebut didalam E-Learning tersebut serta hasil akhir.

BAB IV IMPLEMENTASI TUTORIAL

Bab ini membahas tentang implementasi program, berisi pembuatan E-Learning dengan Web dengan menggunakan bahasa HTML dan PHP serta hasil akhir.

BAB V PENUTUP

Bab ini membahas tentang Kesimpulan dan Saran dari Pembuatan E-Learning Tutorial Adobe CS3 Berbasis Web yang telah dibuat. DAFTAR PUSTAKA

(30)

7 BAB II

LANDASAN TEORI

2.1. Electronic Learning (e-learning)

Banyak para ahli yang mendefinisikan e-learning sesuai sudut pandangnya mendefinisikan e-learning sebagai kegiatan belajar asynchronous melalui perangkat elektronik komputer yang memperoleh bahan belajar yang sesuai dengan kebutuhannya. Rosenberg menekankan bahwa e-learning merujuk pada penggunaan teknologi internet untuk mengirimkan serangkaian solusi yang dapat meningkatkan pengetahuan dan keterampilan. Secara lebih rinci Rosenberg mengkatagorikan tiga kriteria dasar yang ada dalam e-learning, yaitu:

a. E-learning bersifat jaringan, yang membuatnya mampu memperbaiki secara cepat, menyimpan atau memunculkan kembali, mendistribusikan, dan sharing pembelajaran dan informasi. Persyaratan ini sangatlah penting dalam e-learning, sehingga Rosenberg menyebutnya sebagai persyaratan absolut.

b. E-learning dikirimkan kepada pengguna melalui komputer dengan menggunakan standar teknologi internet. CD ROM, Web TV, Web Cell Phones, pagers, dan alat bantu digital personal lainnya walaupun bisa menyiapkan pesan pembelajaran tetapi tidak bisa digolongkan sebagai e-learning.

(31)

pelatihan. Uraian di atas menunjukan bahwa sebagai dasar dari e-learning adalah pemanfaatan teknologi internet. Jadi e-e-learning merupakan bentuk pembelajaran konvensional yang dituangkan dalam format digital melalui teknologi internet. Oleh karena itu e-learning dapat digunakan dalam sistem pendidikan jarak jauh dan juga sistem pendidikan konvensional. Dalam pendidikan konvensional fungsi e-learning bukan untuk mengganti, melainkan memperkuat model pembelajaran konvensional. (Rosenberg, 2001).

2.2. Macromedia Dreamweaver

Bahasa Pemrograman dalam pembuatan Website e-elearning tutorial Flash menggunakan Macromedia Dreamweaver MX . Macromedia Dreamweaver MX adalah Software profesional untuk desain, pemrograman dan manajemen situs web dengan tingkat fleksibilitas yang sangat tinggi. Tingkat fleksibilitas dimaksud memungkinkan pengguna dengan keahlian tingkat lanjut(Advance) untuk membuat situs web dengan cara menuliskan langsung kode HTML pada tools pemrograman yang terintegrasi pada software ini memungkinkan pengguna (beginner) membuat situs web dengan menggunakan lingkungan visual editing pada menu-menu yang sudah disediakan seperti drag and drop semua elemen atau asset pada dokumen situs web.

Kelebihan dari Dreamweaver MX dari versi sebelumnya seperti :

(32)

Macromedia sendiri seperti Macromedia Flash dan Macromedia Fireworks, atau software lainnya seperti Adobe Ilustrator dan Adobe Photoshop

b. Dreamweaver Mx memberikan tingkat fleksibilitas yang tinggi bagi pengguna tingkat lanjut (advance) maupun untuk pengguna tingkat dasar (beginner).

c. Dreamweaver mendukung lima jenis teknologi server terbaru yaitu ASP.Net, ASP, JSP, ColdFusion dan PHP. (Irawan Sardi, 2004)

2.3. Adobe Flash

Bahasa pemrograman yang digunakan dalam pembuatan aplikasi ini

adalah Adobe Flash CS3 adalah sebuah software animasi yang sekarang menjadi

software favorit para web designer untuk membuat webnya terlihat dinamis dan

lebih atraktif. Bahkan sekarang Flash digunakan untuk berbagai keperluan,

diantaranya untuk pembuatan media pembelajaran presentasi, proposal modern,

e-card, game dan lain-lain. Tutorial ini ditujukan untuk para designer yang sudah mengenal flash dan ingin mengeksplorasi kehebatan flash, bagi yang masih

pemula.

Adobe Flash CS3 sering digunakan oleh animator untuk pembuatan

animasi interaktif maupun noninteraktif, seperti animasi pada halaman web,

animasi kartun, presentasi, portfolio sebuah perusahaan dan game.

Keunggulan dari program Adobe Flash CS3 dibanding program lain yang

(33)

lain, membuat perubahan transparansi warna dalam movie, membuat perubahan animasi dari satu bentuk ke bentuk yang lain, membuat gerakan animasi dengan

mengikuti alur yang telah ditetapkan serta dapat dikonversi dan dipublikasikan ke

dalam beberapa tipe seperti .swf, .gif, .jpg, .png, .exe dan .mov (Dimas Arno Prasetyo, 2006).

2.4. Multimedia

Sistem adalah sesuatu yang terdiri atas obyek-obyek, unsur-unsur atau

komponen yang bertata hubungan satu sama lain sedemikian rupa sehingga unsur

-unsur yang ada merupakan satu kesatuan pemrosesan dan pengolahan. Sistem

adalah kumpulan elemen-elemen yang terpisah atau saling berkaitan dan berfungsi

memproses masukan dan menghasilkan keluaran yang diinginkan. Sistem

komputer multimedia adalah suatu integritas atau gabungan dari teks, gambar,

audio, video dan animasi.

Komputer multimedia merupakan standar sistem komputer yang

menyediakan fasilitas multimedia. Sistem komputer tersebut harus mampu

mengontrol pemakaian dari beberapa media sehingga memenuhi kriteria

penyajian tampilan gambar dan suara yang cukup memadai. (Bambang E P, 2002)

2.4.1. Unsur-unsur Multimedia

Unsur – unsur pendukung dalam multimedia antara lain :

a. Teks

Bentuk data multimedia yang paling mudah disimpan dan

(34)

paling banyak dilihat. Teks dapat membentuk kata, surat atau narasi

dalam multimedia yang menyajikan bahasa. Kebutuhan teks tergantung

pada kegunaan aplikasi multimedia. Secara umum ada empat macam

teks yaitu teks cetak, teks hasil scan, teks elektronis dan hyperteks

(Wahana Komputer, 2003).

b. Grafik

Alasan untuk menggunakan gambar dalam presentasi atau

publikasi multimedia adalah karena lebih menarik perhatian dan dapat

mengurangi kebosanan dibandingkan dengan teks. Gambar dapat

meringkas dan menyajikan data kompleks dengan cara yang baru dan

lebih berguna. Sering dikatakan bahwa sebuah gambar mampu

menyajikan seribu kata. Tapi ini berlaku hanya ketika pengguna biasa

menampilkan gambar yang diinginkan saat memerlukannya.

Multimedia membantu melakukan hal ini, yakni ketika gambar grafis

menjadi objek suatu link. Grafis sering kali muncul sebagai backdrop (latar belakang) suatu teks untuk menghadirkan kerangka yang

mempermanis teks. Secara umum ada lima macam gambar atau grafik

yaitu gambar vektor (vector image), gambar bitmap (bitmap image), clip art, digitized picture dan hyperpicture (Wahana Komputer, 2003). c. Bunyi atau Sound

Bunyi atau sound dalam komputer multimedia, khususnya pada

(35)

Bunyi atau sound dapat tambahkan dalam produksi multimedia melalui

suara, musik dan efek-efek suara. Seperti halnya pada grafik, semuanya

dapat membeli koleksi sound disamping juga menciptakan sendiri.

Beberapa jenis objek bunyi yang biasa digunakan dalam produksi

multimedia yakni format waveform audio, compact disk audio, MIDI sound track dan mp3 (Wahana Komputer, 2003).

d. Video

Video adalah rekaman gambar hidup atau gambar bergerak yang

saling berurutan. Terdapat dua macam video yaitu video analog dan

video digital. Video analog dibentuk dari deretan sinyal elektrik

(gelombang analog) yang direkam oleh kamera dan dipancarluaskan

melalui gelombang udara. Sedangkan video digital dibentuk dari

sederetan sinyal digital yang berbentuk yang menggambarkan titik

sebagai rangkaian nilai minimum atau maksimum, nilai minimum

berarti 0 dan nilai maksimum berarti 1. Terdapat tiga komponen utama

yang membentuk video digital yaitu frame rate, frame size dan data type. Frame rate menggambarkan berapa kali bingkai gambar muncul setiap detiknya, sementara frame size merupakan ukuran fisik sebenarnya dari setiap bingkai gambar dan data type menentukan seberapa banyak perbedaan warna yang dapat muncul pada saat

(36)

2.5. Internet

Internet, singkatan dari Interconnected Networking, adalah jaringan informasi global. Yang dimaksud internet adalah jaringan komunikasi global yang terbuka dan menghubungkan rbuan jaringan komputer, melalui sambungan telepon umum maupun pribadi (pemerintah maupun swasta). Internet muncul dari jarak jauh yang dikembangkan oleh ARPAnet (US Government’s Advanced Research Projects AgencyNetwork atau Agen Proyek Riset lanjutan dari Pemerintah Amerika Serikat) di akhir tahun 60-an. Sambungan telepon cepat yang bervolume tinggi ternyata dapat diandalkan, sehingga jaringan ini kemudian diperluas selama 10 tahun berikutnya untuk menghubungkan 200 komputer di lembaga – lembaga riset maupun militer di AS dan di seluruh dunia. Ini secara jelas membuktikan bahwa hubungan antar jaringan (Internetworking) ternyata praktis dan sangat bermanfaat. Beberapa universitas di AS kemudian mengikutinya dengan membangun sistem mereka sendiri. Dalam pertengahan tahun 80-an, mereka bergabung dengan bagian riset dari ARPAnet, sehingga terbentuk internet. Hal yang penting untuk dicatat di sini adalah bahwa internet tidaklah dibangun untuk usaha komersial. Sehingga masih ada ketentuan Appropriate Use (Penggunaan Yang Semestinya). Yang membatasi pemanfaatan internet untuk kepentingan mencari untung. (Mac Bride, 1997)

2.6. Web

(37)

internet. Tetapi bagian ini mencangkup daerah luas, karena banyak bagian internet yang sebenarnya bukan bagian dari web tetap bisa dicapai melaluinya.

Jadi web, pada satu tingkat merupakan InterFace sebuah jendela ke internet atau sebuah sarana untuk mengantar ke tempat tujuan yang diinginkan. Daya tariknya diperoleh dari tiga hal berikut :

a. Web memudahkan penggunaan perintah dan alamat di internet yang sebelumnya berbelit-belit dan susah dipahami.

b. Web menggabungkan aspek-aspek internet yang berbeda menjadi sebuah InterFace yang mudah dipahami.

c. Selain untuk membaca, web memungkinkan untuk mengamati gambar dan bahkan mendengarkan suara. (Cristian Crumlish, 1997)

2.7. Apache Web Server

(38)

2.8. Openwave Simulator

Openwave Simulator 7.0 adalah sebuah aplikasi berbasis Windows yang dapat digunakan untuk menguji bagaimana aplikasi mobile bekerja dengan Openwave mobile browser yang tertanam pada ponsel asli.

Openwave Simulator 7.0 berisi tentang file konfigurasi, telepon dan dapat menampilkan content dan disampaikan kedalam beberapa format termasuk XHTML Mobile Profile 1.0 (XHTML-MP) dengan Casding Style Sheets (CSS) dan Wireless Markup Language (WML). (www.openwave.com)

2.9. Basis Data (Database)

Entity adalah orang, tempat, kejadian atau konsep yang informasinya direkam. Sebagai contoh pada bidang kesehatan, entity adalah pasien, dokter, obat, kamar, diet.

Atribute adalah sebutan untuk mewakili entity, atau disebut juga dengan data elemen, data field, data item. Pada dasarnya setiap entity memiliki mempunyai attribute atu sebutan untuk mewakili entity. Di dalam entity dan attribute memiliki data data actual atau informasi yang tersimpan di dalamnya dan disebut dengan data value.

(39)

Kumpulan record-record sejenis yang mempunyai panjang elemen yang sama, attribute yang sama, namun berbeda-beda data valuenya disebut dengan file. Jadi database dapat disimpulkan sebagai kumpulan file yang mempunyai kaitan antara satu file dengan file yang lain sehingga membentuk satu bangunan data untuk menginformasikan satu perusahaan, instansi dalam batasan tertentu. Bila terdapat file yang tidak dapat dipadukan atau dihubungkan dengan file lainnya berarti file tersebut bukanlah kelompok dari satu database, ia akan dapat membentuk database sendiri. (Kristanto, 2004)

2.10. PHP

Bahasa pemrograman PHP adalah bahasa pemrograman yang bekerja dalam sebuah web server. Script-script PHP yang dibuat harus tersimpan dalam web server dan dieksekusi atau diproses dalam server tersebut.

Beberapa keunggulan yang dimiliki program PHP : a. PHP bersifat free atau gratis.

b. Beberapa server seperti Apache, Microsoft IIS, PWS, AOLserver,phttpd, fhttpd, dan Xitami mampu menjalankan PHP.

c. Tingkat akses PHP lebih cepat serta memiliki tingkat keamanan yang tinggi.

(40)

e. PHP mampu berjalan di Linux sebagai platform sistem operasi utama bagi PHP, tetapi juga dapat berjalan di FreeBSD, Unix, Solaris, Windows, dan yang lainnya (MADCOMS, 2008).

2.11. Database MySQL

(41)

18 3.1. Analisis Pengguna

Dalam menyusun e-learning tutorial Adobe Flash berbasis web ini ataupun

sebagai media pembelajaran maka diperlukan beberapa tahapan.

Tahapan-tahapan tersebut diantaranya adalah perancangan desain.

perancangan halaman depan, perancangan teks, perancangan gambar, dan

perancangan video tutorial. Tujuan dari tahapan penyusunan pembuatan

e-learning berbasis web ini adalah menghasilkan web e-e-learning pembelajaran yang

baik dan berdaya guna serap bagi pengguna.

3.1.1. Analisis Kebutuhan Pengguna

Web e-learning ini disusun dan dirancang sebagai media pembelajaran

yang dikhususkan pada tata cara pembuatan Animasi dua dimensi dengan

menggunakan Software Adobe Flash untuk semua kalangan. Web ini dapat

diakses melalui ponsel, PDA maupun web.

3.1.2. Sasaran Pembuatan E-learning Tutorial Adobe Flash

Sasaran Pembuatan e-learning tutorial Adobe Flash berbasis web ini

(42)

3.2. Spesifikasi Sofware dan Hardware

Untuk pembuatan e-learning tutorial Adobe Flash berbasis web ini

diperlukan software dan hardware dengan spesifikasi minimal sebagai berikut :

a. Perangkat Lunak

1. Microsoft Windows XP Professional

2. Adobe Flash CS3

3. Macromedia Dreamweaver

4. Paket Application Server Appserv (Apache, PHP, Mysql Server)

5. Openwave V7 Simulator

6. Adobe Photoshop CS 2

7. Cool Edit Professional 2.0

b. Perangkat Keras

1. Processor Intel Pentium IV 2.00 Ghz

2. Hardisk SATA 40 Gb

3. RAM 512

4. Mainboard ASUS

5. Speaker/ Mouse/ Keyboard

6. Monitor 14”

7. DVD RW

3.3. Konsep Pengembangan Web E-learning

Langkah yang dipergunakan untuk menentukan konsep pengembangan

(43)

a. Konsep pembuatan desain Antar muka.

Web e-learning ini menggunakan konsep desain antar muka

yang berbeda, namun masih menggunakan unsur warna yang hampir

sama. Yang membedakan antara halaman satu dengan yang lain adalah

isi dari halaman tersebut.

b. Konsep pembuatan web e-elearning.

Konsep yang digunakan oleh web e-learning ini adalah

mengenalkan InterFace Flash, penggunaan tool, mendesain gambar, menganimasikan gambar dan pengenalan penggunaan ActionScript. Pada bagian halaman muka merupakan tampilan pemilihan beberapa

kategori pengenalan. Yang dimana terdapat materi pengenalan

berbentuk teks maupun video, untuk mempermudah pemahaman

pengguna. Serta dibagian forum terdapat tanya jawab seputar

pembuatan Flash.

3.4. Struktur Link

Untuk memudahkan dalam pencarian halaman tertentu dan memudahkan

pengguna untuk melihat menu-menu yang diinginkan maka dibuat struktur link.

Struktur link ini merupakan gambaran dari keseluruhan isi web e-learning yang

dibuat. Adapun hubungan antar link pengguna dan admin pada web e-elearning

serta hubungan antar link pengguna pada wap e-elearning ini dapat dilihat sebagai

(44)

Gambar 3.1 Struktur link pada pengguna

(45)

Gambar 3.3 Struktur Link pengguna versi mobile

3.5. Analisis dan Rancangan Aplikasi Database

Tahap perancangan struktur database adalah pembuatan table sesuai dengan kebutuhan yang berisi tentang perancangan database, Enitiy Relationship Diagram (ERD), desain antar muka (InterFase). Tabel berikut adalah tabel yang digunakan sebagai dasar pembuatan basis data yang merupakan salah satu komponen dalam pembuatan website e-learning.

3.5.1. Perancangan Database a. Pembuatan Tabel Tutorial

Nama tabel : tutorial

Fungsi : penyimpanan data tutorial berbentuk text Tabel 3.1 Tutorial

Nama fields Type Lebar Keterangan

id * Int 11 Id record

Judul Varchar 100 Judul tutorial

Kategori Varchar 25 Nama kategori

Content Text Isi tutorial

Tanggal Varchar 30 Tanggal

posting

(46)

Fungsi : penyimpanan data tutorial berbentuk video Tabel 3.2 Video

Nama fields Type Lebar Keterangan

Judul varchar 100 Judul tutorial

Kategori varchar 25 Nama kategori

Content Text Isi tutorial

berupa nama file video

Deskripsi Text Deskripsi

video tutorial

Tanggal varchar 30 Tanggal

posting

c. Tabel Komentar Video

Nama tabel : video_comment

Fungsi : penyimpanan data komentar video Tabel 3.3 Komentar

id* Int 11 Id record

Comment Text Isi komentar

d. Tabel Pengguna

Nama tabel : Pengguna

(47)

Tabel 3.4 Pengguna

Nama varchar 50 Nama

pengguna

Pengguna varchar 50 Login

pengguna

Password varchar 50 Password

3.5.2. Entity Relationship Diagram (ERD)

ERD Merupakan suatu model untuk menjelaskan hubungan antar data dalam basis data berdasarkan objek-objek dasar data yang mempunyai hubungan antar relasi. Berikut ini adalah bentuk relasi tabel dalam website :

Gambar 3.4 Entity Relationship Diagram 3.5.3. Desain Rancangan Antarmuka (Interface)

Adapun isi dari tampilan halaman beserta strukturnya menjadi pedoman

dalam mendesain. Dalam mendesain suatu tampilan halaman harus mempunyai

format dan isi yang sesuai dengan materi yang akan ditampilkan dan kesesuaian

(48)

Dalam pembuatan desain halaman web e-elearning ini menggunakan

aplikasi Dreaweaver karena program aplikasi ini merupakan aplikasi pengolah

web dengan menggunakan database berfungsi sebagai mediator dan mampu

memanipulasi suatu gambar atau foto yang dilengkapi menu-menu untuk

menghasilkan efek-efek.

3.5.3.1. Halaman Client (desktop)

Pada tampilan website e-learning ini akan muncul teks atau tulisan dan

video serta forum pada website e-learning tutorial Adobe Flash CS3. Desain

halaman dalam website e-learning adalah sebagai berikut :

a. Rancangan halaman pembuka.

Halaman Pembuka yaitu halaman dimana pertama kali ataupun secara otomatis pada saat pengguna mengakses website e-learning ini.

Gambar logo

Gambar 3.5 Desain rancangan halaman utama b. Rancangan halaman kategori tutorial.

(49)

Kategori

Tutorial

Basic Design Animation ActionScript

Game Other

Pilih Kategori Flash - Basic Flash - Design Flash - Animation Flash - ActionScript

Flash - Game Flash – Other

Gambar 3.6 Desain rancangan halaman kategori c. Rancangan halaman daftar tutorial.

(50)

Kategori

Tutorial

Game Other

Pencarian Judul :

Cari Reset

Judul Tutorial 1

Ringkasan Tutorial

Judul Tutorial 2

Ringkasan Tutorial

Gambar 3.7 Desain Rancangan halaman tutorial d. Rancangan halaman detail tutorial.

(51)

Nama Kategori Print View

Judul Tutorial

Isi Tutorial

Navigasi Halaman

Tutorial Lain :

Judul Tutorial 1

Ringkasan Tutorial

Judul Tutorial 2

Ringkasan Tutorial

Gambar 3.8 Desain rancangan detail tutorial e. Rancangan halaman kategori video.

(52)

Kategori

Video Tutorial

Game Other

Pilih Kategori Flash - Basic Flash - Design Flash - Animation Flash - ActionScript

Flash - Game Flash – Other

Gambar 3.9 Desain rancangan halaman kategori video f. Rancangan halaman daftar video tutorial.

(53)

Kategori

Video Tutorial

Game Other

Pencarian Judul :

Cari Reset

Judul Tutorial 1

Deskripsi Video

Judul Tutorial 2

Deskripsi Video

Gambar 3.10 Desain rancangan halaman video g. Rancangan halaman detail video.

(54)

Kategori

Video Tutorial

Basic

Judul Tutorial

Video

Deskripsi Video Komentar :

Nama Pengirim (Email Pengirim)

#Nomor Komentar Tanggal Komentar

Isi Komentar

#Nomor

Tutorial Lain :

Judul Tutorial 1

Ringkasan Tutorial

Judul Tutorial 2

Ringkasan Tutorial

(55)

h. Rancangan halaman about.

Halaman about ini berisi tentang visi dan misi web e-elearning tutorial Adobe Flash.

Isi About Basic

Design Animation ActionScript

Game Other

Gambar 3.12 Desain rancangan halaman about i. Rancangan halaman forum.

(56)

Masuk Daftar

Isi Forum

Gambar 3.13 Desain rancangan halaman forum j. Rancangan halaman contact.

Kategori

Isi contact Basic

Design Animation ActionScript

Game Other

(57)

3.5.3.2. Halaman Client (mobile)

Pada tampilan pembuka wapsite e-learning ini akan muncul teks atau

tulisan tentang e-learning tutorial adobe flash CS3. Desain halaman dalam wapsite

e-learning adalah sebagai berikut :

a. Rancangan halaman pembuka.

Halaman Pembuka yaitu halaman dimana pertama kali ataupun secara otomatis pada saat pengguna mengakses wapsite e-learning ini.

Gambar logo Home | Tutorial | Contact

Isi Home

Home | Tutorial | Contact View Desktop Version

Gambar 3.15 Desain rancangan halaman utama versi mobile b. Rancangan halaman kategori tutorial.

(58)

Tutorial

Pilih Kategori

Flash - Basic Flash - Design Flash - Animation Flash - ActionScript

Flash - Game Flash – Other Home | Tutorial | Contact

View Desktop Version

Gambar 3.16 Desain rancangan halaman kategori versi mobile c. Rancangan halaman daftar tutorial.

Halaman daftar tutorial yang berfungsi untuk daftar tutorial dan serta dapat mencari judul tutorial berbentuk text yang diinginkan pengguna.

Tutorial

Pencarian Judul :

Cari Reset

Judul Tutorial 1

Ringkasan Tutorial

Judul Tutorial 2

Ringkasan Tutorial

Navigasi Halaman Home | Tutorial | Contact

(59)

d. Rancangan halaman detail tutorial.

Halaman detail tutorial ini berfungsi untuk menampilkan seluruh isi tutorial berbentuk text yang dipilih pengguna.

Tutorial

Judul Tutorial

Isi Tutorial

Navigasi Halaman

Tutorial Lain :

Judul Tutorial 1

Ringkasan Tutorial

Judul Tutorial 2

Ringkasan Tutorial

Navigasi Halaman Home | Tutorial | Contact

Gambar 3.18 Desain rancangan detail tutorial versi mobile e. Rancangan halaman contact.

Halaman ini berisi tentang alamat yang bisa dihubungi pengguna. Gambar logo

Home | Tutorial | Contact

Isi contact

Home | Tutorial | Contact View Desktop Version

(60)

3.5.3.3. Halaman Administrator

Pada tampilan pembuka administrator pada website e-learning ini akan

pengaturan tentang e-learning tutorial Adobe Flash CS3 sehingga isi dalam

pembahasan bisa diubah-ubah. Desain halaman administrator dalam website

e-learning adalah sebagai berikut :

a. Rancangan halaman login administrator.

Halaman ini untuk mengakses halaman admin bagi pengguna yang terdaftar sebagai admin.

Gambar logo Home | Edit Tutorial | Edit Video | Forum | Setting

Administrator Menu Login

Home Edit Tutorial Edit Video Tutorial Setting

Forum

Username :

Password :

Login

Gambar 3.20 Desain rancangan halaman login admin b. Rancangan Halaman Administrator.

(61)

Administrator Menu Administrator

Forum LogOut

Selamat datang di halaman administrator. Anda bisa menambah atau mengedit content.

Silahkan pilih menu yang berada di atas atau disamping layar!

Gambar 3.21 Desain rancangan halaman admin c. Rancangan halaman edit tutorial.

Halaman ini berfungsi untuk melihat dan mengatur daftar tutorial text yang sudah ada.

Administrator Menu Edit Tutorial

Judul Tanggal Post Detail Operasi Judul Tutorial 1 Tanggal Tutorial 1 Detail Edit | Hapus Judul Tutorial 2 Tanggal Tutorial 2 Detail Edit | Hapus Navigasi Halaman

Gambar 3.22 Desain rancangan halaman admin d. Rancangan halaman tambah tutorial.

Halaman ini berfungsi untuk menambah tutorial berbentuk text. Tambah

(62)

Administrator Menu Tambah Tutorial

Forum LogOut

Judul :

Kategori :

Gambar 3.23 Desain rancangan halaman tambah tutorial

e. Rancangan halaman detail tutorial.

Halaman ini berfungsi untuk melihat isi keseluruhan tutorial berbentuk text yang dipilih.

Administrator Menu Detail Tutorial

Forum LogOut

Judul Tutorial

Isi Tutorial

Navigasi Halaman

Gambar 3.24 Desain rancang detail tutorial Kembali

Post

(63)

f. Rancangan halaman edit video tutorial.

Halaman ini berfungsi untuk melihat dan mengatur daftar tutorial video yang sudah ada.

Administrator Menu Edit Video

Judul Tanggal Post Detail Operasi Judul Video 1 Tanggal Video 1 Detail Edit | Hapus Judul Video 2 Tanggal Video 2 Detail Edit | Hapus Navigasi Halaman

Gambar 3.25 Desain rancangan edit video tutorial

g. Rancangan halaman tambah video.

Halaman ini berfungsi untuk menambah tutorial berbentuk video. Tambah

(64)

Administrator Menu Tambah Video

Forum LogOut

Judul :

Kategori :

Video :

Browse Deskripsi :

Gambar 3.26 Desain rancangan tambah video tutorial h. Rancangan halaman detail video tutorial.

Halaman ini berfungsi untuk melihat isi keseluruhan tutorial berbentuk video yang dipilih.

Kembali

(65)

Administrator Menu Detail Video

Forum LogOut

Judul Tutorial

Video

Deskripsi Video Komentar :

#Nomor Komentar

Hapus Tanggal Komentar

Isi Komentar

#Nomor

Tutorial Lain :

Judul Tutorial 1

Ringkasan Tutorial

Judul Tutorial 2

Ringkasan Tutorial

Gambar 3.27 Desain rancangan detail video tutorial

(66)

i. Rancangan halaman setting.

Halaman ini yaitu halaman awal pada halaman pengaturan.

Administrator Menu Setting

Gambar 3.28 Desain rancangan halaman setting j. Rancangan halaman pengguna administration.

Halaman ini berfungsi sebagai pengatur pengguna admin.

Forum LogOut

Pengguna Administration

Nama Penggunaname Operation

admin Admin edit

admin2 admin2 edit

(67)

k. Rancangan halaman edit pengguna.

Halaman ini berfungsi sebagai halaman pengaturan pengguna pada admin.

Forum LogOut

Nama :

Penggunaname :

Old Password :

Password :

Confirm Password :

Gambar 3.30 Desain rancangan edit pengguna 3.6. Pembuatan Website e-learning Versi Desktop

Di dalam pembuatan website e-learning in menggunakan Dreamweaver

dan web server. Adapun langkah-langka dalam pembuatan website e-learning

meliputi beberapa proses :

3.6.1. Penginstalan Web Server

(68)

a. Menginstall Apache Server.

Gambar 3.31 Tampilan penginstalan Apache Server

(69)

(70)

Gambar 3.35 Tampilan penginstalan Apache Server d. Memasukan pasword server.

(71)

(72)

3.6.2. Pendefinisian Situs Pada Dreamweaver

Sebelum membuat situs web agar lebih mudah langkah pertama yaitu mendefenisikan situs kedalam Dreamweaver. Berikut ini langkah-langkah untuk melakukan pendefinisian situs pada Dreamweaver :

Gambar 3.39 Tampilan Awal Dreamweaver

(73)

Gambar 3.40 Tampilan Site Definition Dreamweaver

b. Pada jendela pertama “Site Definition” akan meminta Pengguna memasukan nama situs web yang akan dibangun.

(74)

(75)

(76)

(77)

3.6.3. Koneksi Database

Untuk menghubungkan website dengan database dibutuhkan sebuah

koneksi database, yang script nya dapat diketik pada aplikasi Notepad dan termenyimpan dalam file “sqlconfig.php“ yang terdapat pada folder “include“. Adapun penjelasan listing sebagai berikut :

sqlconfig.php

<?

$hostname = 'localhost'; //nama dari host $database = 'eflash'; //nama database

$penggunaname = 'root'; //penggunaname dari webserver $pass = 'admin'; //password dari webserver

$sqlconfig = mysql_connect($hostname, $penggunaname, $pass)

or trigger_error(mysql_error(),E_PENGGUNA_ERROR); //koneksi ke database

mysql_select_db($database); memilih database ?>

3.6.4. Pembuatan Layout Awal

Pada proses pembuatan desain untuk keperluan halaman pembuka,

terdapat berbagai macam cara pembuatannya. Pembuatan desain suatu gambar

dapat berbagai program misalnya Adobe photoshop yang merupakan software pengolah gambar raster. Dengan semakin banyaknya pilihan aplikasi yang telah tersedia akan lebih memudahkan pemakai pengguna untuk membuat gambar

desain serta memanipulasi sesuai dengan kemampuan yang dimiliki. Dalam hal

(78)

3.6.4.1. Pembuatan CSS

Dasar awal pembuatan layout terlebih dahulu memasukan kode CSS agar pengaturan tampilan lebih menarik dan memudahkan dalam pengaturan layout web ini.

a. Membuat File CSS baru.

File>New>Basic page>CSS

Gambar 3.45 Tampilan editor CSS b. Menuliskan Script kedalam kode editor Dreamweaver.

Dan berikut ini adalah kode CSS yang secara garis besar digunakan dalam web e-elarning ini :

body {

margin: 0; padding: 0;

line-height: 1.5em;

font-family: Arial, Helvetica, sans-serif; font-size: 12px;

(79)

color: #B14038; text-decoration: none; font-weight: normal;} a:active, a:hover {

color: #FF0000;}

(80)

list-style-image: url(../images/list_icon_01.jpg);}

background: url(../images/banner.jpg) no-repeat;} #banner #site_title {

float: left; padding: 0 10px;} #menu ul.nav {

overflow: hidden; padding: 35px 0 0 0; margin: 0px auto; list-style: none;} margin: 0px 5px; padding: 10px;

#menu ul.nav li a:hover, #menu ul.nav li .current { color: #ffffff;

background: #770000;} #menu ul.nav li ul.nav_hover{

margin: 0px; padding: 0px; top: 72px;

position: absolute; display: none;

(81)

border: 1px solid #000000; height: 25px;}

#menu ul.nav li ul.nav_hover li, #menu ul.nav li.active ul.nav_hover li { margin: 0px; padding: 0px;}

#menu ul.nav li ul.nav_hover li a, #menu ul.nav li.active ul.nav_hover li a { padding: 0px 1px;

margin-top:2px;

font: 12px/20px arial, arial, sans-serif; height:20px;}

#menu ul.nav li ul.nav_hover li a:hover, #menu ul.nav li.active ul.nav_hover li a:hover {

padding: 30px 30px 0 20px;

background: url(../images/content_top.jpg) top center no-repeat;} #side_column { .side_column_box .bottom {

position: absolute;

.side_column_box h2 {

background: url(../images/h2_right.jpg) right top no-repeat;} .side_column_box h2 span {

background: url(../images/h2_left.jpg) no-repeat;} .side_column_box .side_column_box_content {

padding: 30px;} .side_column_box form {

(82)

height: 16px; width: 180px; padding: 2px 5px; margin: 0 0 10px 0; .main_column_section .bottom {

position: absolute; .main_column_section h2 {

background: url(../images/h2_right_02.jpg) right top no-repeat;} .main_column_section h2 span {

background: url(../images/h2_left_02.jpg) no-repeat;} .main_column_section .main_column_section_content {

padding: 30px;}

.main_column_section_content p { margin-bottom: 10px;}

padding: 30px 90px 0 90px; text-align: center;

color: #3b3838;

background: url(../images/footer.jpg) no-repeat;} #footer a {

font-weight: bold; color: #000000;} #footer .footer_menu {

margin: 0 0 5px 0; padding: 0px; list-style: none;} .footer_menu li {

(83)

border-right: 1px solid #000000;} .footer_menu .last_menu {

border: none;} .logo {

padding: 20px 0 0 20px;}

Gambar 3.46 Tampilan kode editor CSS pada Dreamweaver c. Kemudian Menyimpan dengan nama file style.css

Gambar 3.47 Tampilan halaman menyimpan CSS pada Dreamweaver

3.6.4.2. Pembuatan Layout Header

Dalam pembuatan Header langkah pertama adalah sebagai berikut :

(84)

File>New>Dynamic page>PHP

Gambar 3.48 Tampilan editor PHP

Gambar 3.49 Tampilan kode editor PHP pada Dreamweaver

b. Menghubungkan script CSS yang telah dibuat sebelumnya dengan tujuan melihat tampilan sementara dengan cara menekan tombol attach style sheet

(85)

Gambar 3.50 Tampilan Attach External Style Sheet pada Tool Dreamweavear c. Memilih file yang terdapat pada lokasi file CSS yang telah dibuat sebelumnya

yang telah simpan ke dalam file folder server.

Gambar 3.51 Tampilan Attach External Style Sheet pada Tool Dreamweavear d. Kemudian memasukan kode HTML ke dalam kode editor Dreamweaver untuk

(86)

Gambar 3.52 Tampilan background header pada kode editor HTML

Gambar 3.53 Tampilan menu header pada kode editor HTML e. Memasukan Logo ke dalam Header

(87)

Gambar 3.54 Tampilan menu header pada kode editor HTML f. Kemudian menyimpan dengan nama file header.php.

3.6.4.3. Pembuatan Sub Menu

Dalam pembuatan sub menu terdapat tabel sebagai dasar layout. Adapaun

langkah-langkahnya sebagai berikut :

a. Membuat File PHP baru.

Insert>Table

(88)

Gambar 3.56 Tampilan pembuatan Table

c. Kemudian masukan menu beserta linknya menggunakan kode HTML.

Gambar 3.57 Tampilan pembuatan Table d. Kemudian menyimpan dengan nama file side.php.

3.6.4.4. Pembuatan Layout Isi

Pada layout ini terdapat script PHP yang berfungsi untuk memanggil script PHP yang diinginkan. Adapun langkah-langkah pembuatan layout isi sebagai berikut :

a. Membuat File PHP baru.