bab 3 e-learning (irwan)
Post on 05-Jul-2015
642 Views
Preview:
TRANSCRIPT
BAB 3 ANALIS DAN PERANCANGAN SISTEM
3.1
Analisis Sistem Analisis sistem yang sedang berjalan merupakan penguraian dari suatu
informasi yang utuh ke dalam bagian-bagian komponennya yang dimaksudkan untuk mengidentifikasi dan mengevaluasi permasalahan-permasalahan, hambatanhambatan yang terjadi dan kebutuhan-kebutuhan yang diharapkan sehingga dapat diusulkan perbaikannya. Untuk memahami alur dari informasi dalam sistem, diperlukan pendokumentasian dalam merancang suatu mulimedia pembelajaran bahasa Inggris menggunakan konsep jejaring sosial sehingga akan mempermudah tahap pengembangan sistem. Sistem yang dibangun dalam aplikasi ini adalah sebuah sistem pembelajaran yang dapat berkolaborasi, berkomunikasi dan belajar tentang bahasa Inggris. Sistem tersebut menggunakan metode collaborative learning dan multimedia sebagai bahan ajarnnya dan jejaring sosial sebagai sarana berkomunikasi dan bersosialisasi. Gambaran umum dari sistem yang akan dibangun adalah sebagai berikut : 1. Aplikasi ini berbentuk social web menggunakan bahasa server scripting PHP 2. Untuk memudahkan pengerjaan dan perawatan maka apikasi ini dibagun menggunakan framework Codeigniter dengan metode MVC.
3. Dalam aplikasi ini pengguna pertama-tama harus mendaftar sebagai anggota dari website ini. Setelah itu pengguna dapat langsung mengakses materi baik tulisan ataupun multimedia, pengguna dapat mencoba latihanlatihan yang telah diberikan, setiap latihan yang diselesaikan pengguna mendapat score. Pengguna dapat berinteraksi dengan pengguna lainnya memberi komentar, menyumbangkan tulisan, mengikuti forum dan chat room. 4. Penggunaan multimedia sebagai bahan ajar yang dapat membantu peroses pemahaman materi. 5. Pengguna dalam aplikasi ini dibagi menjadi tiga yaitu Student, Administratoristrator, dan Moderator. Student adalah pengguna biasa yang memanfaat website tersebut sebagai sarana pembelajaran bahasa Inggris. Aministrator adalah seseorang yang bertugas mengatur website dan mempunyai hak penuh pada website. Sedangkan Moderator bertanggung jawab memberikan dan mengatur materi serta melakukasn pengawasan bahasa yang dipakai pada user. 6. Konten dalam aplikasi ini adalah comment writing practice,
Administratoristrator access controls, moderator access conrols, user profiles, forum, collaborative community blogs, create 'friends', seccoring, multimedia, and chat. 3.1.1 Analisis Masalah Beberapa analisis yang dilakukan ditempat penelitian dapat dirumuskan beberapa permasalahan yaitu :
1. Bagaimana menangani adanya keterbatasan ruang, jarak, dan waktu karena pembelajaran hanya terpaku dalam kegiatan belajar mengajar disekolah atau ditempat les yang memerlukan biaya yang biasanya relatif mahal. 2. Bagaimana membuat suatu sistem pembelajaran bahasa Inggris sebagai sarana belajar, berkomunikasi, dan berbagi pengetahuan sehingga tercipta peroses belajar mengajar yang menyenangkan. 3. Bagaimana meningkatkan kemampuan belajar bahasa Inggris baik secara akademik maupun diluar akademik. 3.1.2 Analisis perbandingan sebuah website Analisis ini bertujuan untuk membandingan website yang serupa dengan website yang akan dibuat dilakukan berdasarkan lima komponen usability yang dikemukakan oleh Jacob Neilsen, tujuh belas prinsip user interface yang dikemukakan oleh Deborah J.Mayhew dalam General Principle of UI Design. Dalam analisis perbandingan ini website yang diambil untuk dianalisis adalah livemocha. Dengan adanya analisis perbandingan ini diharapkan akan menghasilkan suatu konsep yang lebih baik. 3.1.2.1 Analisis website serupa (www.livemocha.com) Livemocha adalah salah satu situs pembelajaran bahasa online gratis dan terbesar di seluruh dunia. Livemocha memiliki lebih dari Sembilan juta pengguna dari 195 negara dan menawarkan kursus bahasa dasar gratis dalam 38 bahasa dan program. Livemocha menawarkan berbagai penjelasan tata bahasa, latihan
reading comprehension, interactive role playing, interaksi live dan asynchronous dengan penutur asli lainya dalam komunitas livemocha. Brikut ini adalah gambaran dari analisis website tersebut : 1. Analisis desain
Gambar 3.1 Halaman Utama Livemocha Beberapa hal yang akan dibahas berkitan dengan analisis desain pada website livemocha, yaitu : a. Pada saat website di akses livemocha sudah mencerminkan sebuah website komunitas jejaring social dengan selogan welcome to the worlds largest language learning community ditambah dengan banner beberapa wajah orang yang saling berhubungan. b. Desain halaman yang konsisten dengan tema mocha diambil dari varietas kopi di yaman memberberi kesan bahwa website tersebut didesain untuk kalangan remaja keatas.
c. Form pendaftaran yang disajikan pada saat website pertamakali diakses. dibuat seminimal mungkin agar pengunjung tertarik untuk mendaftar d. Desain pada halaman user sesuai dengan product compatibility, dimana terlihat jelas fungsionalitas penggabungan e-learning dan social
networking. Menu-menu yang digunakan juga konsisten dengan fungsionalistas yang berjalan ditambah icon yang familiar memudahkan user untuk berinteraksi terhadap sistem website tersebut.
Gambar 3.2 Halaman Pengguna Livemocha f. Desain teknologi website livemocha sudah memenuhi syarat dalam hal invisible technology misalnya pada saat scoring, user tidak perlu tahu detail bagaimana sistem melakukan proses perhitungan penilaian, menampilkan score hingga menyimpanya data score pada basis data user. System juga handal dalam mengkordinir kesalahan misalnya pada saat pendaftaran atau transaksi pada halaman store.
2. Analisis sistem pembelajaran a. Livemocha menawarkan berbagai penjelasan tata bahasa, latihan reading comprehension, interactive role playing, interaksi live dan asynchronous dengan penutur asli lainya. b. Untuk basic Engish livemocha menyajikan pembelajaran secara interaktif yang disajikan dengan cara drag and drop, menulis pesan singakat yang akan di koreksi para native speakers, dan perekam suara dalam bahasa Inggris yang nanti akan diberikan umpan balik dalam komunitas.
Gambar 3.3 Halaman Pembelajaran Livemocha c. Dynamic lesson content : rencana pembelajaran yang mencakup lebih dari 160 jam untuk pemula dan konten pembelajaran bahasa percakapan sehari-hari lengkap dengan peraktik membaca, mendengar, menulis, dan latihan berbicara dengan tingkat menengah
d. Global community : Anggota-anggota Livemoca diseluruh dunia dapat memanfaatkan kemahiran bahasa asli mereka untuk mengajar dan belajar dari anggota-anggota lain dari komunitas tersebut. Para pengguna memiliki pilihan unuk berlatih percakapan tersetruktur dengan para penutur asli atau menyampaikan tulisan atau audio pada penutur asli untuk kemudian diperiksa atau diedit.
Gambar 3.4 Halaman Interaksi Livemocha e. Motivational System : Livemocha menyadari bahwa belajar bahasa bagi kebanyakan orang yang mempunyai sediki waktu luang mungkin akan mengganggu kehidupan mereka yang sibuk. Untuk itu website ini menyediakan alat-alat untuk menjaga pelajar berkomunikasi saling memberikan dorongan semangat untuk membuat kemajuan yang baik
3. Analisis sistem jejaring social a. Seperti website-wibsite jejaring social lainya pertemanan berupakan hal yang harus terjadi sebagai syarat terjadinya jejaring social. Pengguna dapat mengirim pesan kepada pengguna lainya melalui sebuah fasilitas kirim pesan, atau memberikan sebuah hadiah virtual.
Gambar 3.5 Halaman Pertemanan Livemocha b. Livemocha juga menawarkan fasilias berbagi budaya. Mereka dapat mengundah sebuah foto mengenai alam atau budaya mereka sebagai ajang berbagi pengetahuan kepada pengguna lainya, pegguna juga dapat berkomentar mengenai gambar-gambar tersebut. c. Untuk berkomunikasi secara langsng Livemocha menawarkan sebuah fasilitas chat. Fasilitas ini dapat membantu pengguna melatih kecakapan komunikasi yang dimilikinya
Gambar 3.6 Halaman komunikasi Chat Livemocha 4. Tabel lima komponen usability Berikut adalah hasil penilaian terhadap website livemocha berdasarkan lima komponen usability yang dikemukakan oleh Jakob Nelsen. Tabel 3.1 Lima Komponen UsabilityNama komponen Hal yang dinilai Laernabilty untuk website ini mudah button dan link sudah pada fungsinya, apalagi didukung dengan icon yang sesuai pada content didalamnya sehingga penggunjung dapat mengerti tanpa diajarkan terlebihbahulu Pengguna dapat menyelesaikan tugas-tugas dengan baik setelah mereka mempelajari hasil rancanganya Memorability dalam website ini bagus namun masih butuh perbaikan karena banyaknya tugas dan fungsi yang ada sehingga pengguna harus mengingat kembali kegunaan tugas dan fungsi website ini apa bila lama tidak digunakan Penangannan kesalahan pada website ini baik sekali, pengguna tidak menemukan kesulitan apabila melakukan kesalahan. Misalnya pada pembelian token. Dengan mengambil dari penilaian-penilaian sebelumnya kepuasan dalam rancangan website sudah cukup bagus. Penilaian
Learnability
Eficciency
Memorability
Error
Statisfaction
Keterangan nilai : Bagus sesuai : Bagus butuh perbaikan : Buruk
5. Tabel tujuh belas komponen user interface Berikut adalah hasil penilaian terhadap website livemocha berdasarkan lima komponen yang usability yang dikemukakan oleh Deborah J.Mayhew.
Tabel 3.2 Tujuh belas Komponen UsabilityNama komponen Hal yang dinilai Sistem harus paham benar tentang pengetahuan, cara berfikir dan cara menerima informasi dari user sehingga sistem yang nantinya digunakan oleh user dapat membuat user lebih produktif Penilaian ini memperhatikan dan mempertahankan kompatibilitas antar produk, misalkan mampu mengorbankan user interface yang memungkinkan sistem lebih kompatibilitas Rancanglah interface sistem sesuai dengan tugas dari user, jangan samapi user kesulitan untuk menggunakannya, karena hal ini dapat menyebabkan aplikasi yang kita buat tidak akan terpakai dan akhirnya tidak dapat membantu pekerjaan / tugas user. Selalu mengorganisasikan setiap fungsinya sesuai dengan kategori fungsinya sehingga dapat memfasilitasi segala perubahan tugas user. sistem harus konsisten terhadap fungsionalitas / kegunaan dari sistem tersebut. Contoh sederhananya adalah ketika user menekan tombol save maka proses yang terjadi adalah penyimpanan bukan hapus data. penggunaan konsep, terminologi dan pengaturannya yang mudah dipahami oleh user. Seperti ikon atau gambar review pada fungsi latihan, ini membuktikan bahwa fokus user terhadap gambar tersebut sebagai latihan setelah memahami teori Kompleksitas suatu aplikasi akan menimbulkan frustasi pada user itu sendiri, maka dari itu gunakan system default pada aplikasi yang dirancang. Maksudnya adalah sediakan dan utamakanlah fungsi fungsi yang benarbenar sesuai dengan tugas dari user. user dapat langsung menyaksikan aksi sistem pada suatu objek. Contoh sederhana, pada saat kita menekan mengetikkan huruf A maka di layar akan langsung muncul huruf A. Sistem yang digunakan oleh user jangan sampai membuat user merasa frustasi dan dikontrol oleh user. Seperti memberikan komentar pada saat user melakukan kesalahan dengan bahasa yang tidak membuat user merasa dikontrol oleh sistem tersebut. WYSIWYG (What You See Is What You Get), artinya adanya korespondensi satu ke satu antara informasi di layar dengan informasi di printed-output atau file. mengijinkan banyak kontrol dari user yang mendukung untuk menggunakan aplikasi yang kita rancang dan mampu mengakomodir kemampuan user yang lain. Sistem harus selalu merespon dengan cepat apa yang di inputkan oleh user. Seperti menampilkan Progress Bar. Menyembunyikan detail teknis dari suatu sitem merupakan hal yang sangat direkomendasikan dalam membuat User Interface. Sistem harus mampu mentolerir kesalahan manusia baik disengaja maupun tidak disengaja dan yang umunya tidak dapat dihindari. Prinsip ini berbeda dengan prinsip Robustness, karena pada prinsip ini sistem seharusnya memproteksi kesalahan-kesalahan umum manusia. Seperti pada saat kita menutup lembar kerja Microsoft Office yang belum kita simpan sebelumnya, maka Office akan secara otomatis memberikan konfirmasi untuk menyimpannya atau tidak. sistem yang mudah dipelajari bagi user novice (awam). Hal ini akan memberikan motivasi kepada user tersebut untuk menggunakannya. sistem yang mudah digunakan untuk expert user. Sehingga sistem yang kita bangun tidak hanya dipakai untuk novice user tetapi bisa juga dipakai untuk user yang sudah ahli (berpengalaman). Penilaian
User Compatibility
Product Compatibility
Task Compatibility
Work Flow Compatibility
Consistency
Familiarity
Simplicity
Direct Manipulation
Control
WYSIWYG
Flexibility
Responsiveness Invisible Technology
Robustness
Protection
Ease of Learning
Ease of Use
Keterangan nilai : Bagus sesuai : Bagus butuh perbaikan : Buruk
3.1.2.2 Kesimpulan analisis website Dari hasil paparan analisis diatas maka dapat diambil beberapa kesimpulan mengenai hal apa saja yang dapat diambil dan dijadikan sebagai bahan acuan terbentuknya suatu multimedia pemembelajaran bahasa Inggris menggunakan konsep jejaring social berbasis web. Berikut ini adalah tabel kesimpulan bahan yang diambil dari hasil analisis. Tabel 3.3 kesimpulan analisis website Livemocha Media pembelajaran reading comprehension, interactive role playing, review, writing practice. Video, audio Media komunikasi Pertemanan, live chat, sharing culture, live interaction. Aspek bisnis Menyediakan versi gratis dan berbayar Seluruh pembelajaran bebas biaya. Pertemanan, Live chat, blog, form diskusi Hasil perbandingan Text material, audio lerning, video learning, review, writing practice
3.1.3
Analisis Kebutuhan Sistem Non Fungsional Analisis kebutuhan dilakukan untuk mengetahui spesifikasi kebutuhan
untuk sistem. Spesifikasi kebutuhan melibatkan analisis user, analisis perangkat keras, dan analisis perangkat lunak. 3.1.3.1 Analisis Pengguna (user) Pengguna dalam website ini dibagi menjadi tiga yang peratama adalah pengguna umum atau bisa disebut Student. Karakteristik dari Student yang ada
saat ini tidak ditentukan karena dalam proses pembelajaran kolaboratif setiap orang bisa belajar dan mengajar tetapi dalam target Student yang dipilih adalah pelajar para siswa atau mahasiswa dengan umur diatas 15 tahun. Pengguna kedua adalah Administratoristrator yang mengatur system dalam website ini, Administratoristrator memiliki jenjang pendidikan sarjana ilmu komputer. Administratoristrator bertugas mengatur, dan mengamankan website. Pengguna yang ketiga adalah Moderator seorang sarjana sastra Inggris yang bertugas memberikan materi dalam website tersebut dan memberikan mengawasi penggunaan bahasa pada student. Pengalaman student berbeda-beda sesuai dengan bidang pendidikan yang ingin diikuti di situs ini tetapi secara umum student bisa menggunakan komputer dan menjalankan internet dengan baik. Untuk melihat lebih jelas tentang karak teristik pengguna dapat dilihat pada tabel dibawah ini :
Tabel 3.4 Karakterisik Pengguna
Pengguna Student
Tanggung Jawab 1. Aktif dan terlibat dalam kegiatan belajar 2. Mengikuti latihan yang telah diberikan 3. Membantu temannya dalam penguasaan materi yang diberikan
Hak Akses 1. Melakukan kegiatan Pembelajaran 2. berpartisipasi dalam blog 3.berkomunikasi dalam jejaring sosial 4. berdiskusi dalam forum
Tingkat Pendidikan
Tingkat Keterampilan Bisa mengikuti petunjuk yang ada pada sistem
Pengalaman Min. mampu mengoprasikan komputer dan menggunakan internet
Min. SD
Moderator
1. Aktif dan terlibat dalam kegiatan belaja.
1. mengolah pembelajaran menambah, mnegedit materi, 2. Menguasai materi menghapus materi yang ada dalam system 2. berpartisipasi dalam blog 3. Mengawasi penggunaan bahasa 3. membuat kategori, dan topik diskusi
Min. S1 Sastra Inggris
1. Bisa mengikuti petunjuk yang ada pada sistem 2. Aktif menguasai bahasa Inggris
1. Min. mampu mengoprasikan komputer dan menggunakan internet 2. Pernah membuat tulisan bahasa Inggris dalam Blog
Administrator
Mengecek kevalidan 1. mengolah user data dan sistem 2. mengolaj pembelajaran 3. mengolah blog 4. mengolah forum 5. mengolah data statistik
Min. S1 Min. S1
Bisa menguasai bahasa pemrograman web dan menguasai tentang internet.
Min. sarjana Informatika atau manajemen Informatika mempunyai portpolio dibidang web
Dari penjelasan diatas, dapat diambil kesimpulan bahwa karakteristik user yang telah ada saat ini sudah memenuhi kriteria untuk dapat menggunakan program aplikasi yang akan dibangun karena sebagian besar user sudah dapat menggunakan internet dengan baik.
3.1.3.2 Fakta Pengguna Komputer Dan Internet Dari hasil data penelitian yang dilaksanakan pada tahun 2007 dengan metode survey yang dikemukakan oleh Hanif Hoesin dan Baso Saleh dalam jurnalnya Penggunaan Komputer dan Internet di Indonesia. Dari total responden (2.500 orang) yang terdistribusu secara purposive random sampling di 16 kota di Indonesia hanya 1168 orang atau 46,70% yang sempat menggunakan computer dan 27,3% penggunaan internet (682 orang) dalam enam bulan terakhir. Berikut adalah tabel presentase tingkat pengguna komputer dan tinggkat pengguna internet. Tabel 3.1 Tingkat pengguna komputer Pertanyaan Jawaban responden
Seberapa penting 15 komputer penting Lebih dari 90% responden menyatakan bagi kehidupan penting Pemanfaatan computer bagi kehidupan Penggunakan untuk menggetik Mengolah data Sarana multimedia Mendengarkan musik 91,5% 49,2% 20,6% 6,5%s Tabel 3.1 tingkat pengguna Internet Pengalaman menggunakan internet Kurang dari 6 bulan Antara 6-12 bulan Antara 1-3 tahun 4-6 tahun Lebih dari 6 tahun 6,2% 5,1% 9,5% 4% 2,5%
Intensitas responden dalam menggunakan internet dalam seminggu 1-5 jam 6-10 jam Lebih dari 5 jam 12,8% 4,6% Kurang dari 2%
Dari hasil survei tabel diatas dapat diambil kesimpulan bahwa pada tahun 2007 penggunaan fasiltas komputer dan internet pada masyarakat masih rendah hal ini bisa karena akses terhadap sarana tidak terjangkau , ketersediaan sarana TIK (Teknologi Informasi dan Komunikasi) yang belum merata diseluruh wilayah penelitian, dan daya beli masyarakat relative lebih rendah berbanding mahalnya akses terhadap sarana TIK. 3.1.3.3 Kebutuhan Perangkat Lunak Analisis perangkat keras dimaksudkan untuk mengetahui minimum spesifikasi perangkat keras yang digunakan untuk mengakses website
pembelajaran bahasa Inggris ini. Berikut ini adalah spesifikasinya : 1. Sistem oprasi Windows 7 Untimate. 2. PHP sebagai bahasa pemerograman yang digunakan. 3. XAMPP sebagai web server. 4. MySQL sebagai media penyimpanan basis data . Adapun minimum spesifikasi kebutuhan perangkat lunak dari client untuk menjalankan aplikasi ini adalah sebagai berikut : 1. Browser : Mozilla Firefox versi 3.0.1 keatas, Google Chrome, Savari versi 4. 2. Sistem oprasi : Windows XP SP2, Windows vista, Windows 7.
Minimum spesifikasi kebutuhan perangkat lunak pada server adalah sebagai berikut: 1. PHP Versi 5.2.14 2. MySql databases Versi 5.0 Keatas 3. Framework Codeigniter versi 2.0 3.1.3.4 Analisis Perangkat Keras Analisis perangkat keras dimaksudkan untuk mengetahui spesifikasi
perangkat keras yang digunakan pada website Englishku.com dan perangkat keras client serta server yang mampu menjalankan aplikasi elearning yang sedang dibangun. Berkut adalah minimal spesifikasi Perangkat keras client, server dan website Englishku.com : Tabel 3.2 Minimal Spesifikasi perangkat keras Client dan Server No 1. 2. 3. 4. 5. 6. 7. Processor Hard disk RAM VGA Card Monitor Keyboard Mouse Client 1 GHz 80 GHz 512 Mb 128 Mb 1024x768 Terpasang Terpasang Server 2.7 GHz 120 GB 512 Mb 512 Mb 1024x768 Terpasang Terpasang
4. Analisis Basis Data Untuk menggambarkan data dan menggambarkan hubungan antara data yang ada, digunakan alat bantu yaitu diagram E-R. Usulan untuk perancangan diagram E-R yaitu dapat dibedakan dengan atribut lainnya sehingga table tersebut dapat dijadikan referensi table lain. Adapun diagram E-R tentang proses akses informasi ini ditujukan pada gambar dibawah ini:
id_akun_login id_shootbox id_level_pengguna1 1 N
blogN
terdapat
blog_komentarN
id_blog
shootbox
N
id_blog
id_blog_komentar memiliki id_level_pengguna memiliki membuatN
memberikan
id_forum_komentarN
shootbox_ komentar level_pengguna1
N
mengomentari
forum_komentarN
id_forum_topik id_akun_login
id_akun_login id_shootbox_komentar1 1 1 1 1 N
mempunyai1
id_forum_topik id_forum_ketegori id_akun_login
memiliki
1 1 1
akun_login1 1
membuat
forum_topikN
id_profile_pengguna1
id_level_pengguna
memiliki1
profile_pengguna1
memiliki Id_akun_login
id_kategori
melakukanN
N
forum_kategory
Id_chat id_latihan_soal Id_materi id_pilihan_ganda id_hasil review id_hasil_latihanN
memiliki Id_negaraN
mengirim
chat
1
id_detail_hasil_latihan
mengerjakanN
latihan_soal1
1
menampilkan
N
abjad_pilihan_ ganda
negara
pesan
id_hasil_latihan
id_pesan id_akun_login id_soal_pilihan
detail_Hasil_ latihan
1
1
menghasilkan
memiliki
1
menghasilkan
id_latihan_soal id_materi id_bab_pelajaran
materiN
terdapat pada id_pelajaran id_bab_pelajaran id_pelajaran1 N 1
bab_pelajaran
mengacu
pelajaran
Gambar 3.7 ERD (Entity Relation Diagram)
Entitas dan Atribut : Tabel 3.4 Entitas dan Atribut Entitas profile_pengguna Atribut {id_profile_pengguna, id_akun_login, nama_depan, nama_belakang, namadile_foto, jenis_kelamin, tempat_lahir, tgl_lahir, id_negara, nama_kota, email, telepon, alamat, kode_pos, tentang saya} akun_login {id_akun_login, id_level_pengguna, akun_pengguna, sandi_pengguna, login_terakhir, aktif} level_pengguna negara pesan {id_level_pengguna, namalevel} {id_negara, nama Negara} {id_pesan, id_akun_pengguna, isi_pesan, tgl_pesan} shootbox {id_shootbox, id_akun_pengguna, isi_shootbox, tgl_shootbox} shootbox_komentar {id_shootbox_komentar, id_shootbox, isi_komentar, tgl_shootbox_komentar} pelajaran bab_pelajaran materi {id_pelajaran, nama_melajaran} {id_bab_pelajaran, id_pelajaran, judul_bab} {id_materi, id_bab_pelajaran, judul_materi,
text_materi, namafile_materi_audio, namafile_materi_video} latihan_soal {id_latihan_soal, id_materi, soal, tipe_soal, aktif} abjad_pilihan_ganda detail_hasil_latihan {id_abjad_pilihan_ganda, abjad} {id_detail_hasil_latihan, id_hasil_latihan, id_latihan_soal, id_soal_pilihan_ganda, nilai_persoal} hasil_review {id_hasil_review, id_latihan_soal, id_akun_pengguna, jawaban, nilai_review} hasil_latihan {id_hasil_latihan, id_akun_login, tgl_latihan, total_nilai} blog {id_blog, id_akun_login, judul_blog, artikel_blog, tgl_posting, banyak_dilihat} blog_komentar {id_blog_komentar, id_blog, id_login_akun, komentar, tgl_komentar} forum_kategori forum_topik {id_forum_kategori, kategori_forum} {id_forum_topik, id_forum_kategori, id_akun_login, tgl_posting, topik_forum, pesan_forum} forum_komentar {id_forum_komentar, id_forum_topik, id_akun_login, tgl_komentar, komentar_forum}
3.1.4 3.1.1
Analisis Kebutuhan Fungsional Perancangan Diagram Konteks Diagram konteks merupakan alat untuk struktur analisis. Pendekatan
struktur ini untuk menggambaarkan system secara gatis besar atau secara keseluruhan. Pada diagram konteks ini system informasi yang dibuat akan menghasilkan sumber informasi yang dibutuhkan dan tujuan yang ingin dihasilkan. Diagram konteks dalam wesite pembelajaran ini dapat dilihat pada gambar dibawah ini :Webmail Data email dan kode aktifasi Info data email dan kode aktifasi
Info user Info course Info blog Info forum User Data user Data course Data blog Data forum Multimedia pembelajaran bahasa Inggris
Info moderator Info course Info blog Info forum Moderator Data moderator Data course Data blog Data forum
Data admin Data course Data blog Data forum
Info admin Info course Info blog Info forum
Administrator
Gambar 3.8 Diagram Konteks
3.1.2
Data Flow Diagram (DFD) Data Flow Diagram (DFD) merupakan suatu media yang digunakan untuk
menggambarkan aliran data yang mengalir pada suatu system informasi. DFD sistem pembelajaran bahasa Inggris yang di usulkan ini terdiri dari beberapa bagian, berikut data flow diagram selengkapnya :
Data negara Data sign up Info sing up Data akun Data akun Data negara
1.0 Sign up
Data pengguna Negara
10.0 Info statistik
Data statistik
Pelajar
Data sign in Info sign in Data sign in Data pengguna
Profile_pengguna Data pengguna Data pengguna
data_statistik
Data statistik
Info pengguna
Data lupa password
Akun_login Data sign in Data lupa password
2.0 Sign inData lupa password
Data sign in Info sign in
Info lupa password Data lupa password Data akun Info akun Data hasil latihan detail hasil latihan Data hasil latihan Info kursus Data kurus
3.0 Lupa password
Data lupa password Info lupa password data lupa password Info lupa password
Admin
4.0 Pengaturan akunInfo akun
Info akun Data akun Data akun
Moderatorinfo kusus
Data pelajaran Data pelajaran pelajaran Data bab pelajaran bab_pelajaran Data bab pelajaran Data materi materi
5.0 Kursus
Data kursus Data abjad pilihan ganda Data abjad pilihan ganda
Info jajaring sosial
abjad_pilihan_ganda Data hasil review Data hasil review hasil_review Data hasil latihan hasil_latihan Data hasil latihan Data chat chat Data chat Data jejaring sosial
Data materi
Data jejaring sosial Info jejaring sosial
Data pertemanan
6.0 Jejaring sosial
Info jejaring sosial Data pesan
pertemanan
Data pertemanan
Pesan Data pesan Data blog
Data blog
Info blog Data blog komentar
Info blog
7.0 Blog
Data blog Data pesan Info blog
Data forum
Data jejaring sosial
blog_komentar
Data blog komentar
Data forum Info forum
8.0 ForumData forum komentarData forum kategori
Forum_kategori
Data forum topik
Forum_topik
Data forum topik
Forum_komentar
Gambar 3.9 DFD Level 1 Multimedia Pembelajaran Bahasa Inggris Menggunakan Konsep Jejaring Sosial
Data forum komentar
Data forum kategori
Info forum
Data pesan
blog
Data forum
Info forum
Info statistik
9.0 Olah pengguna
Data statistik Data pengguna
3.1.3
DFD Level 2 Proses Sign Up Proses sign up adalah proses pendaftaran untuk pengguna yang belum
menjadi anggota pada sistem pembelajaran website ini, proses tersebut dapat terlihat pada gambar 3.10
Data pendaftaran
Info pendaftaran
1.1 Daftar member
Pelajar
akun_login
profile pengguna
Data aktivasi
Info aktivasi
1.2 Aktifasi akun
Gambar 3.10 DFD Level 2 Proses 1 Sign up 3.1.4 DFD Level 2 Proses Sign In Proses Sign in adalah pintu masuk untuk halaman-halaman berikutnya. Proses sign in ini memastikan bahwa pengguna sudah menjadi member pada website tersebut.
Data sign in pelajar Info sign in pelajar valid
info sign in moderator valid
Data sign in
2.1 Input data sign inData sign in valid
ModeratorData sign in moderator
Data sign in
Data sign in administrator
Pelajar
akun_login
Administratorinfo sign in administrator valid info sign in administrator invalid
Info sign in pelajar invalid
2.2 Verifikasi data sign inData sign in vaid
info sign in moderator invalid
Gambar 3.10 DFD Level 2 Proses 2 Sign up 3.1.5 DFD Level 2 Proses Lupa Password Proses lupa password bertujuan untuk mengirim password yang terlupa pada email pengguna. Proses tersebut dapat erlihat pada gambar 3.11Info email invalid Data email Info email invalid
3.1 verifikasi emailData email
Data email Data email Info email invalid
Data email valid
Moderator
Pelajarakun_login
Email valid
Admin
Data password
Data password
3.2 Kirim password
Web mail
Data email
Gambar 3.11 DFD level 2 Proses 3 Lupa password
3.1.6
DFD Level 2 Proses Pengaturan Akun Pada proses pengaturan akun ini pengguna dapat mengatur profile
pengguna atau mengganti password lama pengguna dengan password baru pengguana. Proses tersebut dapat dilihat pada gambar 3.12
n Sig in lid va
Data Edit profile Info edit profile Data profile pengguna
Data edit profile
4.1 Edit profile
Data edit profile Info edit profile
info edit profile
Pelajar
Data profile pengguna profil pengguna
Moderator
n Sig in lid va
AdminData ganti password admin Info password admin Data ganti password Info ganti password
akun_login
Data ganti password Data ganti password Data ganti password Info ganti password
4.2 Ganti password
Gambar 3.12 DFD Level 2 Proses 4 pengaturan 3.1.7 DFD Level 2 Proses Kursus Pada proses kursus ini menunjukan dimana pengguna dapat melakukan proses apa saja yang dapat dilakukan pada sistem pembelajaran elearning bahasa inggris ini. Proses tersebut dapat dilihat pada gambar 3.13
Info review Info pelajaran
data latihan menulis
Pelajaran
n Sig in lid va
Data materi
Info score
5.6 Review activityData hasil latihan
Data hasil review Data hasil review
Data score
Data hasil latihan
Data latihan
sh o o5.4 Laihan menulis
tbox
Data hasil latihan
n Sig in lid va
n Sig in lid va
hasil_review
5.1 Lihat pelajaranData pelajaran Data pelajaran
n Sig in lid va n Sig in lid va
hasil_latihanData latihan soal Data latihan soal
Data bab pelajaran
Data bab pelajaran
5.2 Pelajari materiData soal pilihan ganda
5.3 Ikut latihan
latihan_soalData abjad pilihan ganda
Data materi
pelajaran
Data materi
Data abjad pilihan ganda Data soal pilihan ganda
Sig n in
Data abjad pilihan ganda
Data abjad pilihan ganda
Data latihan soal
Data olah pelajaran
Data olah pelajaran
bab_pelajaranData bab pelajaran Data bab pelajaran
Soal_pilihan_ganda
materi
Data soal pilihan ganda Data soal pilihan ganda
Data materi
5.7 Olah Pelajaran
Data materiSig n in Sig n in
Data olah pelajaran
val id
val id
5.8 Olah review
Sig n in
val id
Data olah review
5.9 Olah write Info olah review Info olah write Moderaor Data olah write
Info olah pelajaran Admin
Olah pelajaran Data olah pelajaran
Gambar 3.13 DFD Level 2 Proses 5 kursus 3.1.8 DFD Level 2 Proses jejaring sosial Proses jejaring social ini adalah proses yang digunakan pengguna untuk besosialisasi sesama pengguna lainya dalam website pembelajaran bahasa inggris ini. Proses tersebut dapat dilihat pada gambar 3.14
Data latihan soal
Data latihan soal
Data latihan soal
val id
5.5 score
abjad_pilihan_ganda
Info shootbox Data shootbox Info chat Data chat Data notification Info notification Pelajar PelajarData shootbox Info shootbox Data massege Info massege
Data notification Info notification Moderator ModeratorData friends Info friends
Info friends Info massage Data review Data massage
6.1 6.1 Shootbox ShootboxData shootbox
Data chat
w rit e
Data chat
6.2 6.2 pessan pessan 6.3 6.3 pemberit pemberit ahuan ahuanData notification Data notification
Data shootbox
Data chat
6.4 6.4 pertema pertema nan nanData pertemana
6.5 6.5 Chat Chatn Sig
Info chat
an
Ja w ab
Data massage
Data pertemana
Data massage
3.1.9
berbagi pengetahuan berupa artikel yang dapat dililhat pengunajung lainya, sedangkan Administratoristrator bertugas mengatur jalanya proses tersebut. Proses tersebut dapat dilihat pada gambit 3.15
n Sig in id va
komentar komentar
DFD Level 2 Proses blog Proses blog adalah proses yang digunakan student dan moderator untuk
n Sig in id va
n Sig in id va
in lid va
n Sig in id va
chat chat
pesan pesan
pertemaan pertemaan
notification notification
Gambar 3.14 DFD Level 2 Proses 6 Jearing Sosial
Data view blog Info view blog Info comment blog Data comment blog Data edit blog Info edit blog Pelajar Data edit blog Info edit blog Moderator Data comment blog
Data view blog
Data create blog
Info view blog
Info create blog
Info delete blog Info create blog Data delete blog Data create blog
7.1 View blog
Data comment blog7.5 7.4 Delete blogComment blog
3.1.10
dilakuakan dalam kegiatan forum pada sistem pembelajaran bahasa Inggris ini. Proses forum tersebut dapat dilihat pada gambar 3.16
n Sig in lid va
View data blog
DFD Level 2 Proses Forum Proses forum adalah menggambarkan proses apa saja yang dapat
n SigView data blog Blog
in lid va7.2 Create blog 7.3 Edit blog
n Sig inBlog_komentar
lid va
n Sig
Edit data blog Edit data blog Delete Data blog Delete Data blog Delete data blog Delete data blog
n Sig in lid va
in lid va
View data blog Info view blog
Administrator
Gambar 3.15 DFD Level 2 Proses 7 blog
info komentar Data komentar Forum_komentar
Data komentar Data buat kategori Info buat kategori Info edit topik data edit topik Data cari topik Info cari topik Pelajar Data cari topik Info cari topik Moderator
Data komentar
8.8 komentar Topik
Info komentar
Data edit topik
Info edit topik
Info edit topik
Info edit blog
Data edit blog
Data edit kategori
Data buat topik
Data buat topik
Data buat kategori
Data edit kategori
forum_ kategori
Sig ni nv ali d
8.3 Cari topik
Data cari forum Data cari forum
Data hapus kategori
Data hapus kategori
forum_ topik
8.6 hapus Kategori
Info cari forum
Data cari forum
8.7 Hapus topik
in
va lid
Data hapus topik Info hapus topik
Administrator
Info hapus topik
Gambar 3.16 DFD Level 2 Proses 8 forum 3.1.11 DFD Level 2 Proses Olah Pengguna Proses olah pengguna adalah proses yang memungkinkan
Administratoristrator menggelolah pengguna. Peroses tersebut dapat dilihat pada gambar 3.17
Sig ni nv ali d
Sig n
Data hapus topik
Data edit blog
Sig ni nv ali d
8.2 Edit kategori
8.4 Buat topik
Data edit blog
8.1 buat kategori
Sig ni nv ali d
8.5 Edit Topik
Sig n
Data edit topik
in
va lid
n Sig in lid va
Info lihat pengguna Data lihat pengguna
Data set sebagai moderator
Administrator
Info atur data sebagai moderator
Data blokir pengguna
Info blokir pengguna
9.1 Lihat Penggunan Sig in
Info hapus pengguna
Info hapus penggguna
Data Luhat pengguna
Data lihat pengguna
Data hapus pengguna
Data hapus pengguna Data hapus pengguna profile pengguna
Data blokir pengguna
akun_login Data atur sebagai moderator
Gambar 3.17 DFD Level 2 Proses 9 Olah Pengguna 3.1.12 DFD Level 2 Proses statistik Proses statistik adalah proses yang memebrerikan informasi kepada Administratoristrator mengenai statistik isi dalam sistem pembelajaran. Peroses tersebut dapat dilihat pada gambar 3.18
Data blokir pengguna
n Sig in lid va lid va n Sig in lid va
9.4 Atur sebagai moderator
9.3 Hapus penggunaData hapus pengguna
9.2 Blokir pengguna
Data atur sebagai moderator
n Sig in lid va
Info data tratistik pengguna
Info statistik forum
Sig n
Administratorin
Data statistik kursus
Info statistik kursus
va lid
Data statistik pengguna
Data statistik forum
Data statistik blog
Info statistik blog
Sig n
in
va lid
10.1 Statistik pengguna
Sig n
in
va lid
Sig n
in
10.4 Statistik forum
va lid
Data statistik Data statistik
Data statistik Data statistik
Data statistik
Data statistik
10.2 Statistik kursus
10.3 Statistik Blog
Data statistik Data statistik
Data_statisltik
Gambar 3.18 DFD Level 2 Proses 10 statistik 3.1.13 DFD Level 3 Proses Olah pelajaran Proses olah pelajaran adalah proses yang menunjukan hal apa saja yang bisa dilakukan moderator dan Administratoristrator mengenai pengolahan pembelajaran. Proses tersebut dapat dilihat pada gambar 3.19
Sig n
in
va lid
Data tambah pelajaran Info data tambah pelajaranin va lid Sig n
5.7.4 Tambah pelajaran
Data tambah pelajaran Data tambah pelajaran
Sig n
in
Data edit pelajaranva lid
Data tambah kursus Data tambah kursus
5.7.1 Tambah kursus
Data tambah kursus Data edit pelajaran Info tambah kursus Info edit pelajaran
5.7.5 Edit pelajaran
bab_pelajaranData edit pelajaran
Sig n
in
Data hapus kursusva lid Sig n in va lid
Data hapus kursus
pelajaran
5.7.2 Hapus Kursus
AdministratorData hapus pelajaran
ModeratorData hapus pelajaran Info hapus pelajaran
5.7.6 Hapus pelajaran
Data hapus pelajaran Data hapus pelajaran
Sig n
Info hapus kursusin va lid
Info hapus pelajaranSig n in va lid
Data edit kursus 6.7.3 Edit Kursus Data edit kursus
Info edit kursus
Data tambah materi info tambah materi
Data edit kursus
5.7.7 Tambah Materi
Data tambah materi Data tambah materi
Sig n
in
va lid
Data edit materi
Data edit materi Info edit materi
5.7.8 Edit materi
Materi
Data edit materiSig n in va lid
Data hapus materi Info hapus materi 5.7.9 Hapus materi
Data hapus materi Data hapus materi
Gambar 3.19 DFD Level 3 Proses 5.7 Olah Pembelajaran
3.1.14
DFD Level 3 Proses Review Review adalah sebuah proses mengenali latihan pembelajaran. Proses
tersebut dapat dilihat pada gambar 3.20Data buat latihan soalin va lid
Sig n
Data buat latihan soal Data buat soal Data buat soal Data edit soal Data edit soal
Data buat soal Data info soal
5.8.1 Buat soal
Sign
Data edit soal
in va
Soal_pilihan_gandalid
Data edit soal
Data info soal
5.8.2 Edit soal
Data edit soal
latihan_soalSign in va
Data hapus soal Info hapus soal
lid
Hapus soal
5.8.3 Hapus soalHapus soal
ModeratorData hapus soal dan pilihan gandaSign in va lid
Info hapus pilihan ganda Data hapus pilihan ganda
5.8.4 Hapus pilihan ganda
Data hapus pilihan ganda
Data hapus pilihan ganda
abjad_pilihan_gandaSign in va lid
Info buat pilihan ganda Data buat pilihan gandaSign in va lid
5.8.5 Buat pilihan ganda
Data buat pilihan ganda
Data buat pilihan ganda
Info kunci jawaban Data kunci jawaban
5.8.6 Kunci jawaban dan solusi
Data kunci jawaban dan solusi Data kunci jawaban dan solusi
Gambar 3.19 DFD Level 3 Proses 5.8 Review
3.1.15
DFD Level 3 Proses Write Review adalah sebuah proses mengenali latihan yang berupa tulisan.
Proses tersebut dapat dilihat pada gambar 3.20
Sig n
in
va lid
Data tambah write 5.9.1 Buat pertanyaan write
Data buat pertanyaan
Info tambah write
Data pertanyaan
Info data write Data edit perannyaanSig n in va lid
Moderator
5.9.2 Edit pertanyaan Write
latihan_soal
Si Data edit write gn in
Data edit pertanyaanva lid
Data hapus write
Info hapus write
5.9.3 hapus pertanyaan Write
Data hapus pertanyaan
Data hapus pertannyaan
Gambar 3.19 DFD Level 3 Proses 5.9 write 3.1.5 Spesifikasi Proses Spesifikasi proses digunakan untuk menggambar proses model aliran yang terdapat pada DFD (Data Flow Diagram). Speifikasi proses dari gambaran DFD diatas akan dijelaskan pada table dibawah ini.
Tabel 3.5 Spesifikasi Proses NO Proses No. Proses Nama Proses Source Input Output Destination 1 Logika 1.1 Daftar member pengunjung Data pendaftaran Info pendaftaran Pengunjung Pengunjung memilih menu sign up Sistem menampilkan form pendaftaran Pengunjung mengisi data pendaftaran Sistem melakukan validasi data pendaftaran yang telah diisi oleh pengunjung Jika data pendaftaran valid maka sistem akan menyimpan data pendaftaran dan mengirim link aktifasi ke email pengunjung untuk melakukan aktifasi No. Proses Nama Proses Source Input Output 2 Destination Logika 1.2 Aktifasi akun Pengunjung Data link aktifasi Info link aktifasi valid Pengunjung Pengunjung membuka email yang didaftarkan pengunjung melakukan klik link aktivasi yang disediakan Sistem meng-update status pendaftaran member menjadi aktif. No. Proses 3 Nama Proses Source 2.1 Input data sign in Pengguna (pelajar, moderator, Administratoristrator) Keterangan
Input Output Destination Logika
data sign in Info sign in Pengguna (pelajar, moderator, Administratoristrator) Input email dan password Apa bila format email salah maka akan menampilkan pesan kesalahan
No. Proses Nama Proses Source Input Output 4 Destination Logika
2.2 Verifikasi data sign in pelajar, moderator, Administratoristrator Data email, password Info pesan kesalahan pelajar, moderator, Administratoristrator Sistem memeriksa data kedalam table akun pengguna Jika sistem menemukan kesesuaian data maka sistem akan membawa kehalaman pengguna Jika data tidak ditemukan dalam database table akun pengguna maka akan menamapilkan pesan kesalahan
No. Proses Nama Proses Source Input Output 5 Destination Logika
3.1 Verifikasi email pelajar, moderator, Administratoristrator Data email Email valid pelajar, moderator, Administratoristrator Sistem akan memeriksa email dalam database table akun pengguna Jika data ditemukan maka sistem akan melanjutkan ke proses kirim password Jika data email yang dimasukan tidak ditemukan dalam database maka akan menampilkan pesan email invalid
6
No. Proses
3.2
Nama Proses Source Input Output Destination Logika No. Proses Nama Proses Source Input Output Destination 7 Logika
Kirim password pelajar, moderator, Administratoristrator Data email valid Kirim password ke email pengguna pelajar, moderator, Administratoristrator Sistem mengirim data password kepada email pengguna 4.1 Edit profile Pengguna (pelajar, moderator, Administratoristrator) Data edit profile Info edit prodile Pengguna (pelajar, moderator, Administratoristrator) Pelajar memilih menu edit profile Sistem menampilkan form edit profile Pengguna merubah profile yang sebelumnya Jika data yang dirubah benar maka sistem akan mengupdate data pengguna Jika data yang dirubah salah, maka sistem akan menampilkan pesan kesalahan
No. Proses Nama Proses Source Input Output 8 Destination Logika
5.1 Lihat pelajaran Pelajar Data pelajaran yang dipilih Info pelajaran yang dipilih pelajar Pelajar memilih kategori kursus Sistem menampilkan pelajaran yang ada pada kategori tersebut Pelajar memilih pelajaran Sistem menampilkan judul materi-materi yang ada pada
pelajarang tersebut No. Proses Nama Proses Source Input 9 Output Destination Logika 5.2 Pelajari materi Pelajar Data materi yang dipilih Info materi yang dipilih Pelajar Pelajar memilih materi yang akan dipelajarinnya Sistem menampilkan materi teks, materi audio , dan materi video sesuai dengan judul materi yang dipilihnya No. Proses Nama Proses Source Input Output Destination 10 Logika 5.3 Ikut latihan Pelajar Data latihan Info latihan Pelajar Pelajar memlilih menu review Sistem menampilkan soal dan pilihan ganda Pelajar menjawab pertanyaan dengan memilih pilihn ganda Sistem memeriksa jawaban dan memberikan kunci jawaban pada setiap pertanyaan yang dijawab pelajar. Jika pertanyaan sudah habis diberikan maka sistem akan melanjutkan ke proses 5.5 No. Proses Nama Proses 11 Source Input Output Destination 5.4 Laihan menulis pelajar Data latihan menulis Info latihan menulis pelajar
Logika
Pelajar memilih menu write Sistem menampilkan pertanyaan latihan menulis sesuai dengan materi sebelumnya Pelajar menjawab pertanyaan Sistem melanjutkan ke proses 6.1
No. Proses Nama Proses Source Input Output 12 Destination Logika
5.5 score Pelajar Data score Info score Pelajar pelajar mengklik finish setelah selesai menjawab semua soal yang diberikan sistem sistem memeriksa jawaban dari setiap soal yang diberikan setelah mendapat hasilnya sistem melanjutkan ke proses 5.6
No. Proses Nama Proses Source Input 13 Output Destination Logika
5.6 Review activity Pelajar Data review Info review Pelajar Pelajar memasukan data review ke sistem Sistem memeroses dan menampilkan kembali kapada pelajar
No. Proses 14 Nama Proses Source Input
5.7 Olah pelajaran Pengguna (moderator, Administratoristrator) Data olah pembelajaran
Output Destination Logika
Info data olah pelajaran Pengguna (moderator, Administratoristrator) Pengguna memilih menu olah pelajara Sistem menampilkan peruses apa saja yang bisa dilakukan sesuai level pengguna
No. Proses Nama Proses Source Input 15 Output Destination Logika
5.8 Olah review Moderator Data olah review Info olah review Moderator Moderator memilih menu olah review Sistem menampilkan beberapa menu yang dapat digunakan untuk mengelolah review
No. Proses Nama Proses Source Input 16 Output Destination Logika
5.9 Olah write Moderator Data write Info data write Moderator Moderator memilih menu olah write Sistem menampilkan beberapa menu yang dapat digunakan untuk mengelolah write
No. Proses Nama Proses Source 17 Input Output Destination Logika
6.1 shootbox pelajar Data shootbox Info shootbox pelajar Pelajar member komentar pada menu shootbox
Sistem menampilkan komentar pada shootbox Pelajar menghapus komentarnya Sistem menghapus komentar dari shootbox No. Proses Nama Proses Source Input 18 Output Destination Logika 6.2 Pesan Pengguna (Pelajar, moderator) Data pesan Info data pesan Pengguna (pelajar, moderator) Pengguna mengirim pesan Sistem mengirim pesan pada alamat yang dituju Pengguna megnhapus pesan Sistem menghapus pesan dalam database table pesan No. Proses Nama Proses Source Input 19 Output Destination Logika 6.3 Pemberitahuan Pengguna (pelajar moderator) Data pemberitahuan Info pemberitahuan Pengguna (pelajar, moderator) Pengguna menglihat pemberitahuan Sistem menampilkan pemberitahuan Pengguna mengklik salah satu link pemberitahuan Sistem menampilkan halaman yang diklik No. Proses Nama Proses Source 20 Input Output Destination Logika 6.4 Pertemanan Pengguna (pelajar, moderator) Data pertemanan Info pertemanan Pengguna (pelajar, moderator) Pengguna memilih teman yang akan menjadi temannya
Sistem menyampaikan data pertemanan ke pengguna lain Pengguna menyetujui pertemanan Sistem menampilkan info data pertemanan No. Proses Nama Proses Source Input 21 Output Destination Logika 6.5 Chat Pelajar, Modorator Data chat Info chat Pelajar, Moderator Pengguna mengklik pengguna lainya untuk mengajak berbincang Pengguna lainnya menyetujui permintaan temanya Sistem menampilkan pasilitas chat No. Proses Nama Proses Source 22 Input Output Destination Logika 7.1 View blog Pengguna(Pelajar, Modorator) Data view blog Info view blog Pengguna (Pelajar, Modorator) pengguna memilih blog mana yang ingin dilihatnya sistem menampilkan blog yang dipilih pengguna No. Proses Nama Proses Source 23 Input Output Destination Logika 7.2 Create blog Pengguna (pelajar, moderator) Data artikel blog Info artikel blog Pengguna (pelajar, moderator) Pengguna mengklik create blog Sistem menampilkan form untuk membuat blog
No. Proses Nama Proses Source 24 Input Output Destination Logika
7.3 Edit blog Pengguna (pelajar, moderator) Data edit blog Info edit blog Pengguna (pelajar, moderator) Pengguna memilih blog mana yang mau diedit Sistem menampilkan form untuk mengedit blog
No. Proses Nama Proses Source Input 25 Output Destination Logika
7.4 Delete blog Pengguna (pelajar, moderator) Data delete blog Info delete blog Pengguna (pelajar, moderator) Pengguna memlilih blog mana yang mau dihapus Sistem menghapus data blog dalam database table blog Sistem menampilkan info database telah terhapus.
No. Proses Nama Proses Source Input 26 Output Destination Logika
7.5 comment blog Pengguna (pelajar, moderator) Data komentar blog Info komentar blog Pengguna (pelajar, moderator) Pengguna menulis komentar pada salah satu artikel blog Sistem menampilkan komentar pada artikel blog tersebut
No. Proses 27 Nama Proses Source
8.1 Buat kategori Pengguna (moderator, Administratoristrator)
Input Output Destination Logika
Data buat kategori Info buat kategori Pengguna (moderator, Administratoristrator) Pengguna memilih buat kategori Sistem menampilkan form buat kategori Pengguna mengisi data form Sistem menampilkan data form yang telah dibuat
No. Proses Nama Proses Source 28 Input Output Destination Logika
8.2 Edit kategori Pengguna (moderator, Administratoristrator) Data edit kategori Info edit Pengguna (moderator, Administratoristrator) Penguna melilih menu edit kategori Sistem menampilkan kategori yang akan diedit
No. Proses Nama Proses Source 29 Input Output Destination Logika
8.3 Cari topic Pengguna (pelajar, moderator) Data cari topik Topic yang dicari Pengguna (pelajar , moderator) Pengguna mamasukan kunci yang dicari Sistem menmpilkan data sesual kata kunci
No. Proses Nama Proses Source 30 Input Output Destination Logika
8.4 Buat topik Pengguna (pelajar, moderator) Data topik Info data topik Pengguna (pelajar, moderator) Pengguna memilih menu buat topic
Sistem menampilkan form untuk buat topik No. Proses Nama Proses Source Input Output 31 Destination Logika 8.5 Edit topik Pengguna (pelajar, moderator) Data edit topic Info edit topic Pengguna (pelajar, moderator) Penggguna memilih mengu edit topic Sistem menampilkan form edit topic Pengguna meng-update forum topic Sistem menyimpan perubahan dn menampilkanya dalam forum No. Proses Nama Proses Source Input Output Destination 32 Logika 8.6 Hapus ketegori Administratoristrator Data hapus kategori Info dat hapus kategori Administratoristrator Administratoristrator memilih untuk menghapus kategori Sistem member peringatan untuk memastikan apakah kategori yakin dihapus Administratoristator menjawab ya Sistem menghapus kategori beserta topik-topik yang ada didalamnya. No. Proses Nama Proses 33 Source Input Output 8.7 Hapus Topik Pengguna (moderator, pelajar) Data hapus topik Info hapus topik
Destination Logika
Pengguna (moderator, pelajar) Pengguna memilih untuk menghapus sebuah topic Sistem menghapus sebuah topik
No. Proses Nama Proses Source Input 34 Output Destination Logika
9.1 Lihat pengguna Administratoristrator Data olah pengguna Info olah pengguna Administratoristrator Administratoristrator melihat user yang akan ditampilkan Sistem menampilkan profile user
No. Proses Nama Proses Source Input 35 Output Destination Logika
9.2 Blokir pengguna Administratoristrator Data blokir pengguna Info blokir pengguna Administratoristrator Administratoristrator memilih pengguna mana yang ingin diblokirnya Sistem menonaktifkan user yang dipilih Administratoristrator untuk dibelokir
No. Proses Nama Proses Source 36 Input Output Destination Logika
9.3 Hapus Pengguna Administratoristrator Data hapus pengguna Info hapus pengguna Administratoristrator Moderator memilih data pengguna yang ingin dihapusnya
Sistem menghapus akun pengguna sesuai dengan data yang dihapusnya. No. Proses Nama Proses Source Input 37 Output Destination Logika 9.4 Atur sebagai moderator Administratoristrator Data atur sebagai moderator Info atur sebagai moderator Administratoristarot Administrator meilih pengguna mana yang ingin dijadikan moderator Sistem merubah hakakses pengguna menjadi moderator No. Proses Nama Proses Source Input 38 Output Destination Logika 10.1 Statistik pengguna Administratoristrator Data statistik pengguna Info statistik pengguna Administratoristrator Administrator memilih statistic pengguna Sistem menghitung data statistik pengguna dan menampilkannya pada halaman statistik No. Proses Nama Proses Source Input 39 Output Destination Logika 10.2 Statistik kursus Administratoristrator data statistic kursus Info data statistik kursus Administratoristrator Administrator memilih data statistik kursus Sistem menghitung data statistic kursus dan menampilkannya pada halaman statistik 40 No. Proses 10.3
Nama Proses Source Input Output Destination Logika
Statistik blog Administratoristrator Data statistik blog Info data statistic blog Administratoristrator Administrator memilih data statistik blog Sistem menghitung data statistic blog dan menampilkannya pada halaman statistik
No. Proses Nama Proses Source Input 41 Output Destination Logika
10.4 Data statistik forum Administratoristrator Data statistik forum Info data statistik forum Administratoristrator Administrator memilih data statistik forum Sistem menghitung data statistik forum dan menampilkannya pada halaman statistik
No. Proses Nama Proses Source Input Output 42 Destination Logika
5.7.1 Tambah kursus Administratoristrator Data tambah kursus Info data tambah kursus Administratoristrator Administratoristrator memilih menu tambah kursus Sistem menampilkan form tambah kursus Administratoristrator mengisi data form yang telah disediakan Sistem menyimpan data kursus yang baru dibuat.
No. Proses Nama Proses Source Input 43 Output Destination Logika
5.7.2 Data hapus kursus Administratoristrator Data hapus Administratoristrator Info Administratoristarot Administratoristrator Administrator memlih data kursus mana yang ingin dihapusnya Sistem menghapus semua data yang berhubungan dengan data hapus kursus
No. Proses Nama Proses Source Input Output 44 Destination Logika
5.7.3 Edit kursus Administratoristrator Data edit kursus Info edit kursus Administratoristrator Administratoristrator memilih data kursus mana yang mau di edit Sistem menampilkan form data edit kursus Administratoristrator memperbaharui data kursus Sistem menyimpan perubahan pada data kursus
No. Proses Nama Proses Source 45 Input Output Destination
5.7.4 Tambah pelajaran Moderator Data tambah pelajaran Info tambah pelajaran Moderator
Logika
Moderator memilih menu tambah pelajaran Sistem menampilkan form tambah data pelajaran Moderator mengisi data tambah pelajaran Sistem menyimpan data tambah pelajaran
No. Proses Nama Proses Source Input Output 46 Destination Logika
5.7.5 Edit pelajaran Moderator Data edit pelajaran Info data edit pelajaran moderator Moderator memilih data edit pelajaran Sistem menampilkan form data edit pelajaran yang dipilih Moderator mengubah data pembelajaran Sistem menyimpan perubahan yang dilakukan moderator terhadap data pembelajaran
No. Proses Nama Proses Source Input 47 Output Destination Logika
5.7.6 Hapus pembelajaran Administratoristratr dan Moderator Data hapus pembelajaran Info hapus pembelajaran Administratoristrator dan Moderator Administrator atau moderator memilih data pelajaran yang ingin dihapus Sistem merespon dengan menghapus data pelajaran yang dipilih pengguna
No. Proses 48 Nama Proses
5.7.7 Tambah materi
Source Input Output Destination Logika
Moderator Data tambah materi Info tambah materi Moderator Moderator ingin menambah materi sesuai dengan tema pembelajaran sebelumnya Sistem menyimpan penambahan materi baru sesuai dengan id pembelajaranya.
No. Proses Nama Proses Source Input Output 49 Destination Logika
5.7.8 Edit materi Moderator Data edit maeri Info edit materi Moderator Moderator memilih data edit materi Sistem menampilkan form data edit materi yang dipilih Moderator mengubah data materi Sistem menyimpan perubahan yang dilakukan moderator terhadap data pembelajaran
No. Proses Nama Proses Source 50 Input Output Destination Logika
5.7.9 Hapus materi moderator Data hapus materi moderator Info hapus materi moderator moderator Moderator memilih data materi Sistem merespon dengan menghapus data materi.
51
No. Proses
5.8.1
Nama Proses Source Input Output Destination Logika
Buat soal Moderator Data buat soal Info boat soal Moderator Moderator memilih menu untuk membuat soal Sistem menampilkan form membuat soal Moderator mengisi data buat soal Sistem menyimpan data soal yang telah dibuat dan menampilkannya pada halaman olah pelajaran
No. Proses Nama Proses Source Input Output 52 Destination Logika
5.8.2 Edit soal Moderator Data edit soal Info edit soal Moderator Moderator memilih menu edit soal Sistem menampil form edit soal yang dipilihnya Moderator merubah soal Sistem menyimpan perubahan dan menampilkan pada halaman olah pelajaran
No. Proses Nama Proses Source 53 Input Output Destination
5.8.3 Hapus soal Moderator Data hapus soal Info hapus soal Moderator
Logika
Moderator memilih soal yang dihapus Sistem merespon dengan menghapus soal yang ada dalam tabel soal
No. Proses Nama Proses Source Input 54 Output Destination Logika
5.8.4 Hapus pilihan ganda Moderator Data hapus pilihan ganda Info hapus pilihan ganda Moderator Moderator menilih pilihan ganda yang ingin dihapus Sistem merespon dengan menghapus pilihan ganda pada database tabel abjad pilihan ganda
No. Proses Nama Proses Source Input Output 55 Destination Logika
5.8.5 Buat pilihan ganda Moderator Data pilihan ganda Info pilihan ganda Moderator Moderator memilih menu untuk membuat pilihn ganda Sistem menampilkan form untuk membuat pilhan ganda Moderator mengisi form yang telah disediakan untuk membuat pilihan ganda Sistem menyimpan data pilihan ganda yang baru dibuat
No. Proses Nama Proses 56 Source Input Output
5.8.6 Kunci jawaban dan solusi Moderator Data kunci jawaban dan solusi Info kunci jawaban dan solusi
Destination Logika
Moderator Moderator memilih menu untuk membuat kunci jawaban dan solusinya Sistem menampilkan form untuk membuat jawaban dan solusi jawaban Moderator mengisi form yang telah disediakan Sistem menyimpan jawaban dan solusi soal tersebut
No. Proses Nama Proses Source Input Output Destination 57 Logika
5.9.1 Buat pertanyaan write Moderator Data pertanyaan write Info pertanyaan write Moderator Moderator memilih menu untuk membuat pertanyaan write Sistem menampilkan data untuk membuat pertanyaan write Moderator mengisi data untuk membuat pertanyaan write Sistem menyimpan pertanyaan yang telah dibuat
No. Proses Nama Proses Source 58 Input Output Destination Logika
5.9.2 Edit pertannyaan write Moderator Data edit pertannyaan write Info edit pertannyaan write Moderator Moderator memilih menu edit pertanyaan write Sistem merespon dengan menampilkan form edit
pertannyaan write Moderator mengisi filed form untuk membua pertannyaan Sistem menyimpan data pertanyaan write yang dibuat No. Proses Nama Proses Source Input Output Destination Logika 5.9.3 Hapus pertanyaan write Moderator Data hapus pertanyaan write Info hapus data pertannyan write Moderator Moderator memilih data pertanyaan write yang ingin dihapus Sistem merespon dengan menghapus pertannyaan write. 3.1.6 Kamus Data Kamus data merupakan definisi formal mengenai selurus element yang tercakup dalam DFD. Kamus data diagram untuk diagram alir data pada aplikasi e-learning ini akan dijelaskan sebagai tabel 3.6 berikut : Tabel 3.6 Kamus Data Nama Aliran data Digunakan pada Deskripsi Strukur data Data Sign up Pelajar proses 1.0 Berisikan data profile pengguna id_akun_login + nama_depan + nama_belakang + namafile_foto + jenis_kelamin + tempat_lahir + tgl_lahir + id_negara + nama_kota + email + telepon+ alamat + kode_pos + tentang_saya + online + aktif id_akun_login [0-9]
nama_depan nama_belakang namafile_foto jenis_kelamin tempat_lahir tgl_lahir id_negara nama_kota email telepon alamat kode_pos tentang saya online aktif Nama Aliran data Digunakan pada Deskripsi Strukur data
[A-Z|a-z] [A-Z|a-z] [A-Z|a-z|0-9] [A-Z|a-z] [A-Z|a-z] [0-9] [0-9] [A-Z|a-z] [A-Z|a-z|0-9] [0-9] [A-Z|a-z|0-9] [0-9] [A-Z|a-z|0-9] [0-9] [0-9] Data Sign In Pelajar, Moderator, Administratoristrator Proses 2.0 Berisikan data informasi Sign in id_level_pengguna + akun_pengguna + sandi_pengguna + aktif
id_level_pengguna akun_pengguna sandi_pengguna aktif Nama Aliran data Digunakan pada Deskripsi Strukur data
[0-9] [A-Z|a-z|0-9] [A-Z|a-z|0-9] [0-9] Data Lupa Password Pelajar, Moderator, Administratoristrator Proses 3.0 Berisikan data emal untuk mengirimkan password id_level_pengguna + akun_pengguna + sandi_pengguna + aktif
[A-Z|a-z|0-9]
Nama Aliran data Digunakan pada Deskripsi Strukur data
Data Edit Profile Pelajar, Moderator, Administratoristrator Proses 4.1 Berisikan data untuk mengubah isi profile nama_depan + nama_belakang + namafile_foto + jenis_kelamin + tempat_lahir + tgl_lahir + id_negara + nama_kota + email + telepon+ alamat + kode_pos + tentang_saya
nama_depan nama_belakang namafile_foto jenis_kelamin tempat_lahir tgl_lahir id_negara nama_kota email telepon alamat kode_pos tentang saya Nama Aliran data Digunakan pada Deskripsi
[A-Z|a-z] [A-Z|a-z] [A-Z|a-z|0-9] [A-Z|a-z] [A-Z|a-z] [0-9] [0-9] [A-Z|a-z] [A-Z|a-z|0-9] [0-9] [A-Z|a-z|0-9] [0-9] [A-Z|a-z|0-9] Data Ganti Password Pelajar, Moderator, Administratoristrator Proses 3.2 Berisikan data password baru untuk menggantikan password yang lama
Strukur data Sandi_pengguna Nama Aliran data Digunakan pada
Sandi_pengguna [A-Z|a-z|0-9] Data Materi Pelajar proses 5.3 Moderator proses 5.7 Administrator proses 5.7
Deskripsi
Berisikan data pengolahan materi, dan bahan belajar untuk pelajar
Strukur data
id_materi + id_bab_pelajaran + judul_materi + teks_materi + namafile_materi_audio+ namafile_materi_video
id_materi id_bab_pelajaran judul_materi teks_materi namafile_materi_audio namafile_materi_video Nama Aliran data Digunakan pada
[0-9] [0-9] [A-Z|a-z|0-9] [A-Z|a-z|0-9] [A-Z|a-z|0-9] [A-Z|a-z|0-9] Data Bab Pelajaran Pelajar proses 5.1 Administrator, Moderator proses 5.7
Deskripsi Strukur data id_bab_pelajaran id_pelajaran judul_bab Nama Aliran data Digunakan pada
Berisi data mengenai bab pelajaran id_bab_pelajaran + id_pelajaran + judul_bab [0-9] [0-9] [A-Z|a-z] Data Soal Pilihan Ganda Pelajar proses 5.3 Moderator proses 5.8
Deskripsi
Berisi data mengenai tampilan dan pengolahan pilihan ganda
Strukur data
id_laihan_soal + id_abjad_pilihan_ganda + desc_pilihan_ganda + set_kunci_jawaban
id_laihan_soal
[0-9]
id_abjad_pilihan_ganda [0-9] desc_pilihan_ganda set_kunci_jawaban [A-Z|a-z] [A-Z|a-z]
Nama Aliran data Digunakan pada
Data Abjad Pilihan Ganda Pelajar proses 5.3 Moderator proses 5.8
Deskripsi Strukur data abjad Nama Aliran data Digunakan pada
Berisi data mengenai abjad pilihan ganda abjad [A-Z|a-z] Data Latihan soal Pelajar proses 5.4 Moderator proses 5.9
Deskripsi Strukur data id_latihan_soal id_materi soal tipe_soal aktif Nama Aliran data Digunakan pada Deskripsi Strukur data
Berisi data latihan soal id_latihan_soal + id_materi + soal + tipe_soal + aktif [0-9] [0-9] [A-Z|a-z|0-9] [A-Z|a-z] [0-9] Data Hasil Latihan Pelajar proses 5.6 Berisi data hasil latihan id_hasil_latihan + id_akun_login + tgl_latihan + total_nilai
id_hasil_latihan id_akun_login tgl_latihan total_nilai Nama Aliran data Digunakan pada Deskripsi Strukur data
[0-9] [0-9] date [0-9] Data Hasil Review Pelajar proses 5.6 Berisi data hasil review id_hasil_review + id_hasil_latihan_soal + id_akun_login + jawaban + nilai_review
id_hasil_review id_hasil_latihan_soal id_akun_login jawaban nilai_review Nama Aliran data Digunakan pada
[0-9] [0-9] [0-9] [A-Z|a-z] [0-9] Data Kategori Forum Administrator, Moderator proses 8.1 Moderator proses 8.2 Administrator proses 8.3
Deskripsi
Berisi data kategori forum yang dapat digunakan untuk membuat, mengubah dan menghapus kategori forum
Strukur data Id_forum_kategori Kategori_forum Nama Aliran data Digunakan pada
Id_forum_kategori + Kategori_forum [0-9] [A-Z|a-z|0-9] Data Topik Forum Pelajar, Moderator proses 8.4 Pelajar, Moderator proses 8.5 Administrator proses 8.6
Deskripsi
Berisi data topik forum yang dapat digunakan untuk membuat, mengubah dan menghapus topik forum
Strukur data
id_forum_topik + id_forum_kategori + id_akun_login + tgl_posting + topic_forum + pesan_forum
id_forum_topik id_forum_kategori id_akun_login tgl_posting topic_forum pesan_forum Nama Aliran data Digunakan pada
[0-9] [0-9] [0-9] Date and time [A-Z|a-z|0-9] [A-Z|a-z|0-9] Data Cari Topik Pelajar, Moderator, Administrator proses 8.3
Deskripsi Strukur data topik_forum Nama Aliran data Digunakan pada Deskripsi Strukur data
Berisi data kata kunci pencarian topik forum topik_forum [A-Z|a-z] Data Komentar Topik Moderator, Pelajar proses 8.8 Berisi data komuntar topik id_forum_komentar + id_forum_topik + id_akun_login + tgl_komentar + komentar_forum
id_forum_komentar id_forum_topik id_akun_login tgl_komentar komentar_forum Nama Aliran data Digunakan pada
[0-9] [0-9] [0-9] Date and time [A-Z|a-z|0-9] Data Blog Moderator, Pelajar, Administrator proses 7.1 Pelajar, Moderator proses 7.2 Pelajar, Moderator proses 7.3 Pelajar, Moderator, Administrator Proses 7.4
Deskripsi Strukur data
Berisi data blog id_blog + id_akun_login + judul_blog + tgl_posting + banyak_dilihat + aktif
id_blog id_akun_login judul_blog tgl_posting banyak_dilihat aktif Nama Aliran data Digunakan pada Deskripsi
[0-9] [0-9] [A-Z|a-z|0-9] Date and time [0-9] [0-9] Data Komentar blog Moderator, Pelajar proses 7.5 Berisi data komuntar blog
Strukur data
id_blog_komentar + id_blog + id_login + komentar + tgl_komentar
id_blog_komentar id_blog id_login komentar tgl_komentar Nama Aliran data Digunakan pada Deskripsi Strukur data Judul_blog
[0-9] [0-9] [0-9] [A-Z|a-z|0-9] Date and time Data Pencarian Blog Moderator, Pelajar, Administrator proses 7.6 Berisi data pencarian blog Judul_blog [A-Z|a-z|0-9]
3.2
Perancangan Sistem Pada tahap perancangan sistem akan dilakukan perancangan yang
diantaranya adalah sebagai berikut : perancangan basis data, dan perancangan antar muka. 3.2.1 Perancangan Basis Data Perancangan basis data adalah menciptakan atau merancang kumpulan data yang terhubungdan tersimpan secara bersama-sama. Perancangan basis data terdiri dari struktur tabel dan diagram relasi. 3.1 Diagram Relasi Diagram relasi menggambarkan hubungan antara data, arti data dan batasannya dijelaskan dengan baris dan kolom. Adapun keterkaitan tabel relasi
yang digunakan dalam multimedia pembelajaran bahasa Inggris digambarkan sebagai berikut:blog_komentar level_pengguna PK id_level_pengguna FK1 nama_level id_blog id_login komentar tgl_komentar PK id_blog_komentar
ini dapat
pertemanan PK FK1 id_pertemanan id_profile_pengguna id_profile_teman status_pertemanan
akun_login profile_pengguna PK FK1 id_profile_pengguna FK1 id_akun_login nama_depan nama_belakang namafile_foto jenis_kelamin tempat_lahir tgl_lahir id_negara nama_kota email_telepon alamat kode_pos tentang_saya online aktif pesan negara PK id_negara nama_negara PK FK1 id_pesan id_akun_login kepada isi_pesan tgl_kirim hasil_review hasil_latihan PK FK1 id_hasil_latihan id_akun_login tgl_latihan total_nilai PK FK2 FK1 id_hasil_review id_latihan_soal id_akun_login jawaban nilai_review PK latihan_soal detail_hasil_latihan PK FK1 FK2 FK3 id_detail_hasil_latihan id_hasil_latihan id_latihan_soal id_soal_pilihan_ganda nilai_persoal PK id_latihan_soal id_materi soal tipe_soal aktif FK1 id_level_pengguna akun_pengguna sandi_pengguna tgl_daftar login_terakhir online aktif PK id_akun_login PK FK1 Blog id_blog id_akun_login judul_blog artikel_blog tgl_posting banyak_dilihat aktif
FK2
forum_topik PK FK1 FK2 id_forum_topik id_forum_kategori id_akun_login tgl_posting topik_forum pesan_forum PK forum_kategori id_forum_kategori kategori_forum
Forum_komentar PK FK1 FK2 id_forum_komentar id_forum_topik id_akun_login tgl_komentar komentar_forum
materi id_materi id_bab_pelajaran judul_materi teks_materi namadile_materi_audio namafile_materi_video
soal_pilihan_ganda abjad_pilihan_ganda PK id_abjad_pilihan_ganda abjad FK1 FK2 id_latihan_soal id_abjad_pilihan_ganda desc_pilihan_ganda set_kunci_jawaban PK id_soal_pilihan_ganda PK FK1
bab-pelajaran id_bab_pelajaran PK id_pelajaran judul_bab pelajaran id_pelajaran bab-pelajaran id_akun_login
Gambar 3.20 Diagram Relasi
3.2
Struktur Tabel Tabel-tabel yang terdapat dalam basis data yang digunakan dalam sistem
ini adalah sebagai berikut: Tabel 3.7 Profile Pengguna Nama Field id_profile_pengguna id_akun_login nama_depan nama_belakang namafile_foto jenis_kelamin tempat_lahir tgl_lahir id_negara nama_kota email telepon alamat kode_pos tentang_saya online aktif Type int int varchar varchar varchar enum varchar date int varchar varchar varchar varchar int tinytext tinyint tinyint 2 2 11 100 225 20 225 14 FK 100 Length 11 11 40 40 225 Female, Male Key PK FK Keterangan Not null Not null, unique
Tabel 3.8 Akun Login Nama Field id_akun_login id_level_pengguna akun_pengguna Type int tinyint varchar Length 11 4 30 Key PK FK Keterangan Not null Not null Not null, unique
sandi_pengguna tgl_daftar login_terakhir online aktif
varchar datetime datetime tinyint tinyint
60
Not null
2 2
Tabel 3.9 level pengguna Nama Field id_level_pengguna nama_level Type tinyint varchar Length 4 100 Key PK Keterangan Not null
Tabel 3.10 Negara Nama Field id_negara nama_negara Type int varchar Length 11 100 Key PK Keterangan Not null
Tabel 3.11 Pertemanan Nama Field id_pertemanan id_profile_pengguna id_profile_teman status _pertemanan Type int int int tinyint Length 11 11 11 2 Key PK FK Keterangan Not null Not null
Tabel 3.12 Pelajaran Nama Field id_pelajaran bab_pelajaran Type int varchar Length 11 80 Key PK Keterangan Not null
Tabel 3.13 Bab Pelajaran Nama Field id_bab_pelajaran id_pelajaran judul_bab Type int int varchat Length 11 11 225 Key PK FK Keterangan Not null
Tabel 3.14 Materi Nama Field id_materi id_bab_pelajaran judul_materi teks_materi namafile_materi_audio namafile_materi_video Type int int varchar text varchar varchar 225 225 Length 11 11 225 Key PK FK Keterangan Not null
Tabel 3.15 Latihan Soal Nama Field id_latihan_soal id_materi soal tipe_soal Type int int tinytext Enum Multiple choose, write aktif tinyint 2 Length 11 11 Key PK FK Keterangan Not null
Tabel 3.16 Soal Pilihan Ganda Nama Field id_soal_pilihan_ganda id_latihan_soal Type int int Length 11 11 Key PK FK Keterangan Not null
id_abjad_pilihan_ganda desc_pilihan_ganda set_kunci_jawaban
int varchar tiny
11 225 2
FK
Tabel 3.17 Hasil Review Nama Field id_hasil_review id_latihan_soal id_akun_login jawaban nilai_review Type int int int varchar tiny Length 11 11 11 225 2 Key PK FK FK Keterangan Not null
Tabel 3.18 Abjad Pilihan Ganda Nama Field id_abjad_pilihan_ganda abjad Type int char Length 11 2 Key PK Keterangan Not null
Tabel 3.19 Detail Hasil Latihan Nama Field id_detail_hasil_latihan id_hasil_latihan id_latihan_soal id_soal_pilihan_ganda nilai_persoal Type int int int int float Length 11 11 11 11 2 Key PK FK FK FK Keterangan Not null
Tabel 3.20 Hasil Latihan Nama Field id_ hasil_latihan id_akun_login Type int int Length 11 11 Key PK FK Keterangan Not null
tgl_latihan total_nilai
datetime float
Tabel 3.21 Blog Nama Field id_ blog id_akun_login judul_blog tgl_posting banyak_dilihat aktif Type int int varchar datetime int tinyint 11 2 Length 11 11 225 Key PK FK Keterangan Not null
Tabel 3.22 Blog Komentar Nama Field id_ blog_komentar id_blog id_akun_login komentar tgl_komentar Type int int int tinytext datetime Length 11 11 11 Key PK FK FK Keterangan Not null
Tabel 3.23 Forum Kategori Nama Field id_ forum_kategori kategori_forum Type int varchar Length 11 100 Key PK Keterangan Not null
Tabel 3.24 Forum Topik
Nama Field id_ forum_topik id_forum_kategori id_akun_login tgl_posting topic_forum pesan_forum
Type int int int datetime varchar text
Length 11 11 11
Key PK FK FK
Keterangan Not null
225
Not null
Tabel 3.25 Forum Komentar Nama Field id_ forum_komentar id_forum_topik id_akun_login tgl_komentar komentar_forum Type int int int datetime varchar 225 Not null Length 11 11 11 Key PK FK FK Keterangan Not null
Tabel 3.26 Pesan Nama Field id_ pesan id_akun_login kepada isi_pesan tgl_kirim Type int int int varchat datetime Length 11 11 11 225 Key PK FK Keterangan Not null
3.3 3.3.1
Perancangan Arsitektur Perancangan Antar Muka Interface atau antarmuka merupakan tampilan dari suatu program aplikasi
yang berperan sebagai media komunikasi yang digunakan sebagai sarana
berdialog antara program dengan user. Sistem yang akan dibangun diharapkan menyediakan interface yang mudah dipahami dan digunakan oleh user. Perancangan interface untuk aplikasi pembelajaran bahasa Inggris menggunakan konsep jejaring social adalah sebagai berikut :1. Perancangan Antarmuka Index (pertama kali website di akses)Keterangan : Sign inEmail image PasswordSign in
Header
- Klik Sign in jika data valid maka akan menuju halaman H01 namun jika tidak valid maka akan menampilkan pesan M01 - Klik Sign up jika data invalid maka akan menampilkan pesan kesalahan namun jika data valid menampilkan pesan M02
Lupa password
Sign UpFirst name : Email : Last_name :
Password : Confirm password : I am : Birthday : Sign up
Footer
Nama Layar : I00 Ukuran Layar : 960 pixel X 600 pixel Font : Verdana, Arial, Helvatica, sans-serif Warna background : Puih
Gambar 3.21 Antarmuka Index i00
2. Perancangan Antarmuka HomeKeterangan :- Klik Nama Student menuju halaman P01 - Klik Edit Profile menuju halaman P02 - Klik Message menuju halaman H02 - Klik Friends Menuju halaman H03 - Klik Profile menuju ke halaman P01 - Klik Course Menuju ke halaman C01 - Klik Blog menuju ke halaman B01 - Klik Forum menuju ke halaman F01
Header Home | Profile | course | Blog | Forum | Account Nama studentphoto
photo
Nama student Isi status Isi status Isi status Isi status Isi status Isi status Isi status Isi status Date post Write commentphoto
Course information
Comment status
EDIT PROFILE MESSAGE FRIENDS
[2] [20]
photo
Comment status
Friends online [2]photo photo
photo
Nama student Isi status Isi status Isi status Isi status Isi status Isi status Isi status Isi status Date post Write commentphoto
Comment status
photo
Comment status
Footer
Nama Layar : H01 Ukuran Layar : 960 pixel X 600 pixel Font : Verdana, Arial, Helvatica, sans-serif Warna background : Puih
Gambar 3.22 Antarmuka Index H01
3. perancangan antarmuka pesanKeterangan :- Klik Message menuju halaman H02 - Klik Friends Menuju halaman H03 - Klik Profile menuju ke halaman P01 - Klik Course Menuju ke halaman C01 - Klik Blog menuju ke halaman B01 - Klik Forum menuju ke halaman F01
Header Home | Profile | course | Blog | Forum | Account MassagesNama user Judul pesan Nama user Judul pesan Nama user Judul pesan Nama user Judul pesan Course information
photo
photo
date
X X X X
photo
date
photo
date
EDIT PROFILE MESSAGE FRIENDS
[2] [20]
photo
date
Friends online [2]photo photo
Footer
Nama Layar : H02 Ukuran Layar : 960 pixel X 600 pixel Font : Verdana, Arial, Helvatica, sans-serif Warna background : Puih
Gambar 3.23 Pesan H02
4. Perancangan antarmuka pertemananKeterangan :- Klik Message menuju halaman H02 - Klik Friends menuju halaman H03 - Klik Profile menuju ke halaman P01 - Klik Edit Profile menuju ke halaman P02 - Klik Course menuju ke halaman C01 - Klik Blog menuju ke halaman B01 - Klik Forum menuju ke halaman F01
Header Home | Profile | course | Blog | Forum | Account FriendsphotoNama Teman Score [400] Nama Teman Score [400] Nama Teman Score [400] Nama Teman Score [400] View
X X X X
photophotoView
Course information
photoEDIT PROFILE MESSAGE FRIENDS [2] [20]
View
photo
View
Friends online [2]photo photo
Footer
Nama Layar : H03 Ukuran Layar : 960 pixel X 600 pixel Font : Verdana, Arial, Helvatica, sans-serif Warna background : Puih
Gambar 3.24 Antarmuka petemanan H03
5. Perancangan antarmuka profileKeterangan :- Klik Nama Student menuju halaman P01 - Klik Edit Profile menuju halaman P02 - Klik Message menuju halaman H02 - Klik Friends Menuju halaman H03 - Klik Profile menuju ke halaman P01 - Klik Course Menuju ke halaman C01 - Klik Blog menuju ke halaman B01 - Klik Forum menuju ke halaman F01
Header Home | Profile | course | Blog | Forum | Account Nama studentphotoNama student Isi status Isi status Isi status Isi status Isi status Isi status Isi status Isi status Date post Write comment Course information
photo
photo
Comment status
EDIT PROFILE MESSAGE FRIENDS
[2] [20]
photo
Comment status
Friends online [2]photo photo
photo
Nama student Isi status Isi status Isi status Isi status Isi status Isi status Isi status Isi status Date post Write comment
photo
Comment status
photo
Comment status
Footer
Nama Layar : P01 Ukuran Layar : 960 pixel X 600 pixel Font : Verdana, Arial, Helvatica, sans-serif Warna background : Puih
Gambar 3.25 Antarmuka Profile P01
6. Perancangan antarmuka courseKeterangan :Klik profile menuju P01 Klik Course menuju C01 Klik Blog menuju B01 Klik Forum menuju F01 Klik learn menuju C02 Klik review menuju C03 Klik write menuju C04 Klik Account->Sign out menuju H01
Header Home | Profile | course | Blog | Forum | Account Judul Course Judul lesson Judul lesson Review activity
Write activity learn review write
Judul Course Judul lesson Judul lesson
learn
review
write
Footer
Nama Layar : C01 Ukuran Layar : 960 pixel X 600 pixel Font : Verdana, Arial, Helvatica, sans-serif Warna background : Puih
Gambar 3.26 Antarmuka Course C01
7. Perancangn antarmuka learnKeterangan :Klik profile menuju P01 Klik Course menuju C01 Klik Blog menuju B01 Klik Forum menuju F01 Klik learn menuju C02 Klik review menuju C03 Klik write menuju C04 Klik Account->Sign out menuju H01
Header Home | Profile | course | Blog | Forum | AccountTEXT VIDEO AUDIO
Review activity
Judul materi
Write activity Isi materi
back
review
write
Footer
Nama Layar : C02 Ukuran Layar : 960 pixel X 600 pixel Font : Verdana, Arial, Helvatica, sans-serif Warna background : Puih
Gambar 3.27 Antarmuka Learn C02
8. Perancangan antarmuka review studentKeterangan :Klik profile menuju P01 Klik Course menuju C01 Klik Blog menuju B01 Klik Forum menuju F01 Klik learn menuju C02 Klik review menuju C03 Klik write menuju C04 Klik Account->Sign out menuju H01
Header Home | Profile | course | Blog | Forum | AccountTEXT VIDEO AUDIO
Review activity
Review Question : Number Pertanyaan pertanyaan pertanyaan __________ A. pilihan jawaban B. pilihan jawaban C. pilihan jawaban D. pilihan jawaban Write activity
Next
Footer
Nama Layar : C03 Ukuran Layar : 960 pixel X 600 pixel Font : Verdana, Arial, Helvatica, sans-serif Warna background : Puih
Gambar 3.28 Antarmuka Review C03
9. Perancangan antarmuka write studentKeterangan :Klik profile menuju P01 Klik Course menuju C01 Klik Blog menuju B01 Klik Forum menuju F01 Klik learn menuju C02 Klik review menuju C03 Klik write menuju C04 Klik Account->Sign out menuju H01
Header Home | Profile | course | Blog | Forum | AccountTEXT VIDEO AUDIO
Review activity
Write Question : Number Pertanyaan pertanyaan pertanyaan?... Write activity
Next
Footer
Nama Layar : C04 Ukuran Layar : 960 pixel X 600 pixel Font : Verdana, Arial, Helvatica, sans-serif Warna background : Puih
Gambar 3.29 Antarmuka Write Sudent
10. Perancangan antarmuka blog
Header Home | Profile | course | Blog | Forum | AccountSearch blog go View my blog | All user blog | create article | manage blogJudul Blog Thursday, 21 april 11 14:31 wib [87] comment By name user
Keterangan :-Klik judul Artikel menuju ke halaman B02 - Klik Edit Profile menuju halaman P02 - Klik Profile menuju ke halaman P01 - Klik Course Menuju ke halaman C01 - Klik Blog menuju ke halaman B01 - Klik Forum menuju ke halaman F01
Popula articles
Image blog
Judul ArtikelDeskeripsi blog Deskeripsi blog Deskeripsi blog Deskeripsi blog Deskeripsi blog Deskeripsi blog Deskeripsi blog Deskeripsi blog Deskeripsi blog Deskeripsi blog Deskeripsi blog Deskeripsi blog
Judul Blog Thursday, 21 april 11 14:31 wib [59] comment Judul Blog Thursday, 21 april 11 14:31 wib [47] comment [7] comment By name user By name user
Deskeripsi blog Deskeripsi blog Deskeripsi blog Deskeripsi blog Deskeripsi blog Deskeripsi blog Deskeripsi blog Deskeripsi blog Deskeripsi blog Deskeripsi blogoto Ph er us
User name | profile user | blog user Thursday, 21 april 11 14:31 wib
Image blog
Judul ArtikelDeskeripsi blog Deskeripsi blog Deskeripsi blog Deskeripsi blog Deskeripsi blog Deskeripsi blog Deskeripsi blog Deskeripsi blog Deskeripsi blog Deskeripsi blog Deskeripsi blog Deskeripsi blog
Recent commentJudul Blog Thursday, 21 april 11 14:31 wib [59] comment Judul Blog Thursday, 21 april 11 14:31 wib [7] comment [59] comment By name user By name user
Deskeripsi blog Deskeripsi blog Deskeripsi blog Deskeripsi blog Deskeripsi blog Deskeripsi blog Deskeripsi blog Deskeripsi blog Deskeripsi blog Deskeripsi blogoto Ph er us
User name | profile user | blog user Thursday, 21 april 11 14:31 wib
Footer
Nama Layar : B01 Ukuran Layar : 960 pixel X 600 pixel Font : Verdana, Arial, Helvatica, sans-serif Warna background : Puih
Gambar 3.30 Antarmuka Blog B01
11. Perancangan anarmuka content blogKeterangan :Header Home | Profile | course | Blog | Forum | AccountSearch blog go View my blog | All user blog | create article | manage blogJudul Article Thursday, 21 april 11 14:31 wib [87] comment By name user
Popula articles
Image blog
Judul artikelIsi blog Isi blog Isi blog Isi blog Isi blog Isi blog Isi blog Isi blog Isi blog Isi blog Isi blog Isi blog Isi blog Isi blog Isi blog Isi blog Isi blog Isi blog Isi blog Isi blog Isi blog Isi blog Isi blog Isi blog Isi
Judul Article Thursday, 21 april 11 14:31 wib [59] comment Judul Article Thursday, 21 april 11 14:31 wib [47] comment By name user By name user
-Klik judul Artikel menuju ke halaman B02 - Klik Edit Profile menuju halaman P02 - Klik Profile menuju ke halaman P01 - Klik Course Menuju ke halaman C01 - Klik Blog menuju ke halaman B01 - Klik Forum menuju ke halaman F01 - Klik Create article menuku ke halaman B03 -Klik manage blog menuju kehalaman B04
Isi blog Isi blog Isi blog Isi blog Isi blog Isi blog Isi blog Isi blog Isi blog Isi blog Isi blog Isi blog Isi blog Isi blog Isi blog Isi blog Isi blog Isi blog Isi blog Isi blog Isi blog Isi blog Isi blog Isi blog Isi blog Isi blog Isi blog Isi blog Isi blog Isi blog Isi blog Isi blog Isi blog Isi blog Isi blog Isi blog Isi blog Isi blog Isi blog Isi blog Isi blog Isi blog
[3] Comment Posted on Thursday, 21 april 11 14:31 wiboto Ph er us
Nama User komentar komentar komentar komentar komentar komentarkomentar komentar komentarkomentar komentar komentar Posted on Thursday, 21 april 11 14:31 wib
Recent commentJudul Article Thursday, 21 april 11 14:31 wib [59] comment Judul Article Thursday, 21 april 11 14:31 wib [59] comment By name user By name user
oto Ph er us
Nama User komentar komentar komentar komentar komentar komentarkomentar komentar komentarkomentar komentar komentar Posted on Thursday, 21 april 11 14:31 wib
Write comment ...
Footer
Nama Layar : B02 Ukuran Layar : 960 pixel X 600 pixel Font : Verdana, Arial, Helvatica, sans-serif Warna background : Puih
Gambar 3.31 Antarmuka Content Blog B02
12. Perancangan antarmuka buat blogKeterangan :-Klik judul Artikel menuju ke halaman B02 - Klik Edit Profile menuju halaman P02 - Klik Profile menuju ke halaman P01 - Klik Course Menuju ke halaman C01 - Klik Blog menuju ke halaman B01 - Klik Forum menuju ke halaman F01 - Klik Create article menuku ke halaman B03 -Klik Manage Blog Menuju kehalaman B04
Header Home | Profile | course | Blog | Forum | Account Popula articlesView my blog | All user blog | create article | manage blogJudul Blog Thursday, 21 april 11 14:31 wib [87] comment Judul Blog By name user
Title article
Key word Content article
Thursday, 21 april 11 14:31 wib [59] comment By name user
Wyswyg (small word editor)
Judul Blog Thursday, 21 april 11 14:31 wib [47] comment By name user
Recent commentImage article Active Save searchJudul Blog Thursday, 21 april 11 14:31 wib [59] comment Judul Blog Thursday, 21 april 11 14:31 wib [59] comment By name user By name user
Footer
Nama Layar : B03 Ukuran Layar : 960 pixel X 600 pixel Font : Verdana, Arial, Helvatica, sans-serif Warna background : Puih
Gambar 3.32 Antarmuka Membuat Blog B03
13. Perancangan antarmuka manage blog studentKeterangan :-Klik judul Artikel menuju ke halaman B02 - Klik Edit Profile menuju halaman P02 - Klik Profile menuju ke halaman P01 - Klik Course Menuju ke halaman C01 - Klik Blog menuju ke halaman B01 - Klik Forum menuju ke halaman F01 - Klik Create article menuku ke halaman B03 -Klik Manage Blog Menuju kehalaman B04
Header Home | Profile | course | Blog | Forum | Account
View my blog | All user blog | create article | manage blog
Send on Edit | view | remove Edit | view | remove Edit | view | remove date date date time time time
Title Article Title Title Title
Status Active Active Active < 1 2 3 Page 10 >
Footer
Nama Layar : B04 Ukuran Layar : 960 pixel X 600 pixel Font : Verdana, Arial, Helvatica, sans-serif Warna background : Puih
Gambar 3.33 Antarmuka Manage Blog B04
14. Perancangan antarmuka forum studentKeterangan :Header Home | Profile | course | Blog | Forum | Account - Klik Profile menuju ke halaman P01 - Klik Course Menuju ke halaman C01 - Klik Blog menuju ke halaman B01 - Klik Forum menuju ke halaman F01 - Klik Account->sign out menuju kehalaman I00 - Klik judul kategori menuju kehalaman F02 Posting
You can discuss anything here about your study or something interesting
Category discussion Judul kategoriThis category is talk about how to learn grammar correctly. People can help you to solve problem about grammarModerated by Irwan, saputra, novie, herry
Topik
20
170
Judul kategoriThis category is talk about conversation like travel, office and so on. People can help you to solve this problemModerated by Irwan, saputra, novie, herry
7
90
Footer
Nama Layar : F01 Ukuran Layar : 960 pixel X 600 pixel Font : Verdana, Arial, Helvatica, sans-serif Warna background : Puih
Gambar 3.34 Antarmuka Forum student F01
15. Perancangan antarmuka topik forum studentKeterangan:- Klik Profile menuju ke halaman P01 - Klik Course Menuju ke halaman C01 - Klik Blog menuju ke halaman B01 - Klik Forum menuju ke halaman F01 - Klik Account->sign out menuju kehalaman I00
Header Home | Profile | course | Blog | Forum | Account
back
Add topic / tread
Title categoryTitle / Thread Starter Replays / views Replies : 3 Views : 20 Replies : 3 Views : 20 Replies : 3 Views : 20 Replies : 3 Views : 20 Replies : 3 Views : 20 Last post By Last post by name user Date and time Last post by name user Date and time Last post by name user Date and time Last post by name user Date and time Last post by name user Date and time
Judul topikStart by name user, date and time
Judul topikStart by name user, date and time
Judul topikStart by name user, date and time
Judul topikStart by name user, date and time
Judul topikStart by name user, date and time
Footer
Nama Layar : F02 Ukuran Layar : 960 pixel X 600 pixel Font : Verdana, Ar
top related