Kajian Teori

III.2.6.3 Definisi Tugas Siswa

Merupakan Tugas yang harus dikerjakan oleh siswa dengan mandiri yang bertujuan agar siswa dapat mengulang materi yang telah disampaikan, dan memecahkan masalah-masalah yang ditemui selama proses pembelajaran. Dengan begitu siswa akan lebih mudah memahami materi karena tidak hanya dibaca tapi juga dilaksanakan (Yenrika Kurniati Rahayu, 2009:30).

III.2.7 Konsep Basis Data

Menurut Fathansyah (2012:2) Basis data terdiri atas 2 kata, yaitu basis dan data. Basis kurang lebih dapat diartikan sebagai markas atau gudang, tempat bersarang/berkumpul, sedangkan data adalah representasi fakta dunia nyata yang mewakili suatu objek seperti manusia (pegawai, siswa, pembeli, pelanggan), barang, hewan, peristiwa, konsep, keadaan, dan sebagainya yang diwujudkan dalam bentuk angka, huruf, gambar, bunyi, atau kombinasi.

Sebagai satu kesatuan istilah, basis data dapat didefinisikan dalam berbagai sudut pandang seperti berikut :

a. Himpunan kelompok data yang saling berhubungan yang diorganisasi sedemikian rupa sehingga kelak dapat dimanfaatkan dengan cepat dan mudah.

b. Kumpulan data yang saling berhubungan yang disimpan secara bersama sedemikian rupa tanpa pengulangan (redundancy) yang tidak perlu, untuk memenuhi kebutuhan.

c. Kumpulan file/tabel/arsip yang saling berhubungan yang disimpan dalam media penyimpanan elektronik.

III.2.8 Normalisasi

Menurut Yakub (2012:70), dalam bukunya yang berjudul Pengembangan Sistem Informasi, Normalisasi adalah suatu cara pendekatan atau teknik yang digunakan dalam membangun desain basis data relation dengan menerapkan sejumlah aturan dan dan kriteria standart dengan tujuan untuk menghasilkan stuktur tabel yang normal atau baik. Normalisasi berkaitan dengan suatu proses, sedangkan normal form berkaitan dengan output proses. Jika suatu relasi berada dalam bentuk normal, maka ia juga termasuk dalam bentuk normal tersebut di dalamnya atau di bawahnya. Suatu relasi dikatakan sudah berada pada bentuk normalisasi tertentu bila memenuhi beberapa yang lebih tinggi dianggap lebih baik dari tingkat dibawahnya. Normalisasi yang akan digunakan pada sistem ini hanya sampai dengan tingkat 3 NF ( Third Normal Form ). Tingkatan – tingkatan normalisasi :

a. First Normal Form ( 1 NF ) Suatu relasi dikatakan sudah memenuhi bentuk normal kesatu ( 1 NF ) bila setiap data bersifat atomic yaitu tiap atribut hanya mempunyai satu nilai dan tidak ada set atribut yang berulang – ulang.

b. Second Normal Form ( 2 NF ) Suatu relasi dikatakan sudah memenuhi bentuk normal kedua ( 2 NF ) bila relasi tersebut sudah memenuhi bentuk normal kesatu, dan atribut yang bukan key sudah tergantung penuh terhadap key-nya.

c. Third Normal Form ( 3 NF )

Suatu relasi dikatakan sudah memenuhi bentuk normak ketiga ( 3 NF ) bila relasi tersebut sudah memenuhi bentuk normal kedua dan atribut yang bukan key tidak tergantung transitif terhadap key-nya.

III.2.9 Entity Relationship Diagram (ERD)

III.2.9.1 Pengertian Entity Relationship Diagram (ERD)

Menurut Yakub (2012:60) “Entity Relationship Diagram (ERD) adalah model data untuk menggambarkan hubungan antara satu entitas dengan entitas lainya yang mempunyai relasi (hubungan) dengan batasan- batasan”. ERD merupakan model jaringan data yang menekankan pada struktur hubungan antar data.

Hubungan entitas (ER) model data dikembangkan untuk memfasilitasi desain database dengan memungkinkan spesifikasi skema perusahaan yang merupakan struktur logis keseluruhan database.

III.2.9.2 Komponen ERD

Berikut ini adalah elemen-elemen dari Entity Relationalship Diagram (ERD) atau Diagram Hubungan Entitas :

Tabel 3. 1. elemen- Entity Relationalship Diagram (ERD)

No Symbol Keterangan

Persegi panjang dibagi menjadi dua bagian

1. Entity mewakili set entitas. Bagian pertama, yang

dalam buku ini adalah berbayang biru, berisi nama dari himpunan entitas. Bagian kedua berisi nama-nama semua atribut dari himpunan entitas.

Relationship

Digunakan utk menghubungkan beberapa tabel

3. Attribute Merupakan hubungan mengidentifikasi set terkait dengan lemahnya set entitas.

Garis hubungan himpunan entitas dengan

4. relasi himpunannya.

Garis putus-putus menghubungkan atribut dari himpunan relasi ke himpunan garis

5. penghubung himpunan entitas ke himpunan relasi.

6. Garis ganda menunjukkan partisi total

entitas dalam satu set hubungan.

7. Jajar genjang merupakan input/output data yaitu proses dari input/output data, parameter, informasi.

III.2.9.3 Kardinalitas

Kardinalitas menjelaskan tentang batasan jumlah keterhubungan dari satu entity dengan entity lainnya. Terdapat tiga jenis kardinalitas yaitu :

a. Satu ke satu (one to one) Entity pertama hanya boleh berhubungan dengan satu entity kedua dan sebaliknya. Dengan kata lain yaitu hubungan antara dua entity adalah satu berbanding satu.

Gambar 3. 1. Relasi Satu ke Satu (one to one)

b. Satu Ke Banyak (one to many ) Entity pertama boleh banyak berhubungan dengan entity kedua, tetapi

entity kedua hanya boleh berhubungan dengan satu entity pertama. Dengan kata lain yaitu hubungan antara dua entity adalah satu berbanding banyak .

Gambar 3. 2. Relasi Satu Ke Banyak (one to many )

c. Banyak ke satu (Many to One) Banyak entity pertama boleh berhubungan dengan satu entity kedua, tetapi

entity kedua hanya boleh banyak berhubungan dengan satu entity pertama. Dengan kata lain yaitu hubungan antara dua entity adalah banyak berbanding satu.

Gambar 3. 3. Relasi Banyak ke satu (Many to One)

d. Banyak ke Banyak (Many to Many) Entity pertama boleh banyak berhubungan dengan Entity kedua dan

sebaliknya. Dengan kata lain yaitu hubungan antara dua entity adalah banyak berbanding banyak.

Gambar 3. 4. Relasi Banyak ke Banyak (Many to Many)

III.2.10 Diagram Alir Data (DAD)

DAD merupakan modeling tool yang memungkinkan sistem analis menggambarkan suatu sistem sebagai suatu jaringan kerja proses dan fungsi yang dihubungkan satu sama lain oleh penghubung yang disbut alur data.

III.2.10.1 Pengertian DAD

Menurut Yakub (2012:147) Diagram alir data (DAD) atau Data flow Diagram (DFD) adalah sebuah alat dokumentasi grafik yang menggunakan simbol-simbol untuk menjelaskan suatu proses.

Walaupun namanya menunjukan penekanan pada data, kenyataannya tidak demikian. Penekanan justru diberikan pada proses. Kata “data” dapat diartikan sebagai data yang mengalir. Dengan kata lain, diagram di atas sebenarnya menunjukan aliran proses. Diagram ini cocok untuk menggambarkan proses untuk dipresentasikan kepada manajemen/pemilik karena alat diagram alir data ini hanya menggunakan 4 macam simbol untuk menyatakan aliran proses seluruh sistem.

III.2.10.2 Simbol-Simbol Dalam DAD

Menurut Yakup (2012:51) DAD hanya menggunakan empat macam simbol. Simbol-simbol tersebut adalah :

a. Elemen Lingkungan Elemen ini terdapat di luar sistem. Elemen-elemen ini menyediakan input data dan menerima output informasi. Dalam DAD, tidak ada perbedaan antara data dan informasi. Semua aliran dianggap sebagai data yang digunakan untuk a. Elemen Lingkungan Elemen ini terdapat di luar sistem. Elemen-elemen ini menyediakan input data dan menerima output informasi. Dalam DAD, tidak ada perbedaan antara data dan informasi. Semua aliran dianggap sebagai data yang digunakan untuk

Gambar 3. 5. Terminator (External Entity)

b. Pemrosesan Pemrosesan adalah sesuatu yang mengubah input menjadi output. Proses dapat digambarkan dalam bentuk sebuah lingkaran, sebuah bujursangkar, atau sebuah bujursangkar dengan sudut yang dibulatkan.

Nama Proses

Gambar 3. 6. Pemrosesan

c. Aliran Data Sebuah aliran data berisi suatu data yang bergerak dari suatu posisi ke posisi lainnya. Jadi aliran data adalah data yang bergerak. Simbol anak panah digunakan untuk menggambarkan data flow dalam sebuah DAD. Anak panah dapat digambarkan dengan garis lurus atau garis melengkung.

Gambar 3. 7. Alur data (Data Flow) Gambar 3. 7. Alur data (Data Flow)

Gambar 3. 8. Data (Data Store)

III.2.11 Pretext Hyper-Processor (PHP)

PHP adalah kepanjangan dari Pretext Hyper-Processor yang dibagun oleh Rasmus Lerdorf pada tahun 1994. PHP merupakan produk open source sehingga kita dapat mengakses source code, menggunakan, dan mengubahnya tanpa harus membayar.

Menurut Pratama (2010:10) PHP adalah bahasa scripting yang menyatu dengan HTML dan dijalankan pada server side. Artinya semua sintaks yang kita berikan akan sepenuhnya dijalankan pada server sedangkan yang dikirimkan ke browser hanya hasilnya saja. PHP menyatu dengan bahasa HTML untuk membuat halaman web yang menarik. PHP mampu berjalan di atas beberapa platfrom seperti Windows, Unix serta varian Linux. Beberapa kelebihan PHP antara lain dapat membuat situs yang interaktif dengan forum diskusi, guestbook dan sebagainya, koneksitas yang baik dengan bermacam-macam database seperti Oracle, MySQL, PostgreSQL dan lain-lain.

III.2.12 MySQL

MySQL adalah sebuah perangkat lunak sistem manajemen basis data SQL (bahasa Inggris: database management system) atau DBMS yang multithread, multi-user , dengan sekitar 6 juta instalasi di seluruh dunia. MySQL AB membuat MySQL tersedia sebagai perangkat lunak gratis di bawah lisensi GNU General Public License (GPL), tetapi mereka juga menjual dibawah lisensi komersial untuk kasus-kasus dimana penggunaannya tidak cocok dengan penggunaan GPL. Tidak seperti PHP atau Apache yang merupakan software yang dikembangkan oleh komunitas umum, dan hak cipta untuk kode sumber dimiliki oleh penulisnya masing-masing, MySQL dimiliki dan disponsori oleh sebuah perusahaan komersial Swedia yaitu MySQL AB. MySQL AB memegang penuh hak cipta hampir atas semua kode sumbernya. Kedua orang Swedia dan satu orang Finlandia yang mendirikan MySQL AB adalah: David Axmark, Allan Larsson, dan Michael "Monty" Widenius (Achmad Solichin, 2010:12).

III.2.13 Adobe Dreamweaver CS6

Merupakan program penyunting halaman web keluaran Adobe Systems yang dulu dikenal sebagai Macromedia Dreamweaver keluaran Macromedia. Program ini banyak digunakan oleh pengembang web karena fitur-fiturnya yang menarik dan kemudahan penggunaannya. Versi terakhir Macromedia Dreamweaver sebelum Macromedia dibeli oleh Adobe Systems yaitu versi 8. Versi terakhir keluaran Adobe Systems adalah versi 12 yang ada dalam Adobe Creative Suite 6 (sering disingkat Adobe CS6).

Adobe Dreamweaver merupakan suatu software aplikasi yang digunakan sebagau HTML editor profesional untuk mendesain web secara visual. Aplikasi ini juga yang bisa dikenal istilah WYSIWYG (What You See Is What You Get), yang intinya anda tidak harus berurusan dengan tag-tag HTML untuk membuat situs. Selain itu, dreamweaver juga memberikan keleluasaan kepada anda untuk mengunakannya sebagai media penulisan bahasa pemograman.

Dengan kemampuan fasilitas yang optimal dalam jendela desain membuat program ini memberikan kemudahan untuk mendesain web meskipun untuk para web desain pemula sekalipun. Sedangkan kemampuan dreamweaver untuk berinteraksi dengan beberapa bahasa pemograman seperti PHP, ASP, JavaScript, dan yang lainnya.berikan fasilitas maksimal kepada para desain web yang menyertakan bahasa pemograman web didalamnya.

BAB IV ANALISIS DAN PERANCANGAN SISTEM

IV.1 Analisis Masalah

Kegiatan proses belajar mengajar yang selama ini ada di SMK Diponegoro terutama pada hal penyampaian materi pelajaran baru bisa dilakukan apabila pengajar/guru bertatap muka secara langsung, dimana pengajar harus datang untuk menyampaian materi pelajaran, apabila pengajar tidak datang berarti tidak ada aktifitas belajar mengajar dan siswa/siswi tidak dapat menerima materi pelajaran dan penjelasan dari pelajaran yang disampaikan oleh pengajar/guru.

Dalam sistem yang baru ini efisiensi dan efektifitas penyampaian informasi menjadi tujuan utama yang akan dicapai. Proses penyampaian materi ditransformasikan dalam bentuk web yang dibungkus dengan fitur yang interaktif dan dinamis, dimana melalui sistem ini akan memudahkan interaksi antara siswa dan guru. Melalui sistem ini juga memudahkan seorang pengajar/guru untuk memonitor aktifitas siswa dan melihat kemajuan siswanya. Sedangkan bagi siswa aktifitas untuk melihat materi, melihat atau mengirim tugas, dan berinteraksi dengan guru dan siswa lain akan lebih mudah dilakukan.

IV.2 Analisis Kebutuhan

IV.2.1 Analisis Kebutuhan Fungsional

Analisis kebutuhan fungsional dilakukan untuk memberikan gambaran mengenai permasalahan dan prosedur yang sedang berjalan saat ini di SMK Diponegoro Yogyakarta.

Berdasarkan hasil dari pengamatan yang telah dilakukan sebelumnya, maka penulis berpendapat bahwa sistem informasi e-learning portal tugas siswa sangatlah penting dalam proses belajar mengajar apalagi , maka dapat ditarik kesimpulan bahwa kebutuhan aplikasi yang dibutuhkan ialah aplikasi yang sederhana, mudah untuk digunakan oleh guru maupun siswa.

Desain sistem ini dilakukan dengan mengamati permasalahan pengguna. Langkah-langkah yang dilakukan sebagai berikut :

a. Pengguna mampu memahami cara kerja sistem.

b. Membangun aplikasi yang mempunyai tampilan menarik.

c. Proses download/upload tugas dan materi.

d. Proses pengumpulan tugas.

e. Proses penyampaian informasi seputar akademik.

Kemudian kecepatan, kemudahan akses serta akurasi informasi portal tugas setiap mata pelajaran yang disajikan oleh sistem merupakan hal yang sangat penting mengingat sistem baru ini bertujuan memberikan informasi portal tugas siswa secara cepat, mudah dan efisien. Fasilitas web yang konsisten, interaktif juga mendukung terpenuhinya tujuan di bangunnya sistem informasi e-learning portal tugas yang sesuai dengan kebutuhan seluruh pengguna.

IV.2.2 Analisis Kebutuhan non Fungsional

Analisis kebutuhan non fungsional dilakukan untuk mengetahui spesifikasi kebutuhan untuk sistem. Spesifikasi kebutuhan melibatkan analisis perangkat keras/hardware,analisis perangkat lunak/software.

IV.2.2.1 Perangkat keras (hardware)

Adapun analisis sistem perangkat keras (hardware) yang diperlukan untuk mengimplementasikan sistem ini ini adalah :

a. Processor Minimal Intel Atom.

b. Memori RAM 1 GB.

c. Hard Disk 320 GB.

d. Mouse

e. Keyboard

f. Monitor dengan resolusi minimum 1024x768

g. Koneksi internet/ modem

IV.2.2.2 Perangkat Lunak (software)

Perangkat lunak yang digunakan untuk membangun sistem ini adalah :

a. E-Draw Max 6.8 untuk penggambaran rancangan ERD dan DAD .

b. Macromedia Dreamweaver CS6 untuk implementasi aplikasi.

c. CorelDraw untuk desain konten.

d. Operating system Windows 7 Ultimate.

e. Mysql digunakan untuk membangun database

IV.3 Perancangan Sistem

Perancangan sistem dapat diartikan gambaran atau sketsa dari alur proses sistem pengolahan data. Dalam rancangan sistem informasi e-learning ini menggunakan Diagram Alur Data (DAD) dan Entity Relationship Diagram (ERD).

IV.3.1 Pembagian Hak Akses

Di dalam sistem ini e-learning terdapat pembagian hak akses pengguna (user) dibagi menjadi empat yaitu:

a. Hak Akses Siswa Adalah pengguna yang hanya mempunyai hak akses melihat atau mengambil informasi yang ada dalam sistem e-learning, sebagai contoh siswa dapat mengambil materi pelajaran yang tersedia, siswa dapat mengirimkan pertanyaan – pertanyaan ke guru yang bersangkutan, siswa dapat mengirim tugas, dan siswa dapat melihat iformasi umum lainnya.

b. Hak Akses Untuk Guru Adalah pengguna yang mempunyai hak akses melihat informasi yang ada dalam sistem e-learning. Selain hak akses tersebut guru juga mempunyai hak untuk menambah materi dari setiap mata pelajaran yang akan disampaikan pada siswa, menginputkan nilai, menginputkan tugas/soal, mengirim artikel dan melihat informasi umum.

c. Hak Akses Untuk Administrator Adalah pengguna yang mempunyai hak akses melihat informasi yang ada dalam sistem. Selain hak akses tersebut seorang administrator juga mempunyai hak untuk mengubah ataupun menambahkan data / update data, yaitu mengubah atau menambahkan data siswa, data guru, data mata pelajaran dan memanajemen

file.

IV.4 Perancangan Alur Sistem

IV.4.1 Diagram Alur Data

IV.4.1.1 Diagram Konteks

Untuk memperjelas gambaran sistem yang baru dalam hal perancangan sistem informasi e-learning , maka dapat dilihat dari diagram kontek pada gambar berikut :

Gambar 4. 1. Diagram Konteks Sistem E-learninng Smk Diponegoro

Dari diagram di atas dapat dilihat bahwa admin memegang penuh semua data yang ada. Siswa hanya dapat mengakses data-data tertentu seperti yang tertulis digambar, begitu juga halnya guru, dia hanya dapat mengakses data-data tertentu. Untuk pengunjung hanya dapat mengakses berita, profile, galery dan bukutamu dan tidak dapat melakukan login.

IV.4.1.2 Diagram Jenjang

Diagram jenjang berikut menggambarkan secara keseluruhan proses yang terjadi dalam sistem informasi e-learning SMK Diponegoro Yogyakarta, yaitu terdapat proses login (admin, siswa, guru), olah data, laporan, pengaturan dan lain-lain seperti terdapat pada gambar berikut:

Gambar 4. 2. Diagram Jenjang Sistem E-learninng SMK Diponegoro

IV.4.1.3 Diagram Alur Data Level 1

Diagram alus data level 1 menggambarkan hubungan seluruh proses yang terjadi pada sistem terhadap tabel-tabel penyimpanan data, beserta feedback dari hubungan tersebut secara menyeluruh. Untuk lebih jelasnya dapat dilihat pada gambar diagram alur data level 1 berikut :

Gambar 4. 3. Diagram Alur level 1

IV.4.1.4 Diagram Alur Data Level 2 Proses Admin

Diagram arus data level 2 proses admin menggambarkan lanjutan pada proses level 1 admin, untuk lebih jelasnya dapat dilihat pada gambar berikut :

Gambar 4. 4. Diagram Alur level 2 Proses Pengaturan Admin

IV.4.1.5 Diagram Alur Data Level 2 Proses Siswa

Diagram alir data level 2 proses siswa menggambarkan lanjutan dari level 1 siswa, untuk lebih jelasnya dapat dilihat pada gambar berikut :

Gambar 4. 5. Diagram Alur Level 2 Proses Siswa

IV.4.1.6 Diagram Alur Data Level 2 Proses Guru

Diagram alir data level 2 proses siswa & guru menggambarkan lanjutan dari level

1 guru, untuk lebih jelasnya dapat dilihat pada gambar berikut :

Gambar 4. 6. Diagram Alur level 2 Proses Guru dan Siswa

IV.4.1.7 Diagram Alur Data Level 2 Proses Pengunjung

Diagram arus data level 2 proses pengunjung menjelaskan lebih lanjut dari proses level 1 pengunjung, adapun rancanganya dapat dilihat pada gambar berikut:

Gambar 4. 7. Diagram Alur Level 2 Proses Pengunjung

IV.4.1.8 Diagram Alur Data Level 3 Proses Master

Diagram arus data level 3 proses master merupakan lanjutan proses level 2 proses master, untuk lebih jelasnya dapat dilihat pada gambar berikut :

Gambar 4. 8. Diagram Alur Level 3 Proses Master

IV.4.1.9 Diagram Arus Data Level 3 Proses Materi

Diagram arus data level 3 proses materi merupakan lanjutan proses level 2 materi, untuk lebih lanjut dapat dilihat pada gambar berikut:

Gambar 4. 9. Diagram Alur Level 3 Level Materi

IV.4.1.10 Diagram Alur Data Level 3 Proses Tugas

Diagram arus data level 3 proses tugas merupakan lanjutan proses pada level 2 tugas, untuk lebih jelasnya dapat dilihat pada gambar berikut :

Gambar 4. 10. Diagram alur level 3 proses tugas

IV.4.2 Perancangan Basis Data

Perancangan database merupakan tahapan yang penting dalam membangun sebuah sistem informasi, karena kualitas informasi yang akan dihasilkan oleh sistem informasi sangat dipengaruhi oleh database sistem tersebut.

IV.4.2.1 Entity Reletionship Diagram (ERD) IV.4.2.1.1 Identifikasi Entitas

Berikut adalah entitas yang digunakan di dalam system informasi e-learning portal tugas di SMK Diponegoro Yogyakarta :

a. Galery

b. Profile

c. User

d. Berita

e. Guru

f. Buku tamu

g. Mapel

h. Materi

i. Tugas j. Intruksi_tugas k. Siswa l. Detail_mapel

Untuk memperjelas gambaran database dalam hal perancangan sistem informasi e-learning yang akan dibangun, maka dapat dilihat dari entity relationsip diagram seperti gambar berikut :

Gambar 4. 11. Entity Reletionship Diagram

IV.4.2.2 Rancangan Tabel

Berikut ini adalah struktur tabel – tabel yang digunakan dalam database sistem e-learning di Smk diponegoro :

1. Tabel Siswa Primary key : Nis

Foreign key : -

Fungsi Tabel : Untuk menyimpan data Siswa

Tabel 4. 1. Struktur Tabel Siswa

No Nama Field

Tipe Data

30 Nomor induk siswa

2 Nama

Varchar

80 Nama siswa

3 Jurusan

enum

2 Jurusan siswa

4 Jk

enum

1 Jenis kelamin siswa

Alamat email

6 Agama

Varchar

15 Agama siswa

Alamat Siswa

8 Provinsi

Varchar

50 provinsi Siswa

9 Tpln

Varchar

15 No. telpn siswa

10 Id_admin

Varchar

20 Id_admin

Pada tabel siswa terdapat 10 field yang merupakan identitas dari siswa yang diperlukan di dalam kenutuhan sistem portal tugas di SMK Diponegoro Yogyakarta, dimana nis siswa sebagai primary key di dalam tabel.

2. Tabel Guru Primary key : Kd_guru Foreign key : Fungsi Tabel : Untuk menyimpan data Guru

Tabel 4. 2. Struktur Tabel Guru

No Nama Field

Tipe Data Ukuran

20 No. identitas guru

2 Nama

Varchar

80 Nama guru

3 Jk

enum

1 Jenis kelamin guru

4 Telp

Varchar

15 No. telepon guru

5 Agama

enum

5 Agama guru

E-mail guru

7 Alamat

Text

Alamat guru

8 Provinsi

Varchar

50 Nama provinsi

9 Id_admin

Varchar

20 Id_admin

Pada tabel siswa terdapat 9 field yang merupakan identitas dari guru yang diperlukan di dalam kebutuhan sistem portal tugas di SMK Diponegoro Yogyakarta.

3. Tabel Mata Pelajaran Primary key : Kd_mapel Foreign key : - Fungsi Tabel : Untuk menyimpan data mata pelajaran

Tabel 4. 3 Struktur Tabel mapel

No Nama Field Tipe Data Ukuran Keterangan

1 Kd Mapel

Varchar

10 Kode Mata Pelajaran

2 Nm Mapel

Varchar

30 Nama mata pelajaran

3 Id_admin

Varchar

20 Id_admin

Pada tabel siswa terdapat 2 field yang digunakan untuk menyimpan data mata pelajaran, kode mapel merupakan kode/identitas dari mata pelajaran yang diampu oleh guru.

4. Tabel Detail mapel Primary key : kd_detail Foreign key : kd_detail Fungsi Tabel : Untuk menyimpan data detail_mapel

Tabel 4. 4 Struktur Tabel detail_mapel

No Nama Field Tipe Data Ukuran Keterangan

1 Kd_detail

Int

11 Kode Mata Pelajaran

2 Nip

Varchar

30 Nama guru pengampu

3 Kd_mapel

Varcahar

10 Kode mata pelajaran

4 Jurusan

Varchar

30 Jurusan dari mapel

5 Kelas

Varchar

11 Kelas yang diampu guru

Pada tabel detail_mapel terdapat 5 field yang digunakan untuk menyimpan data detail_mapel, dimana pada tabel in merupakan kode/identitas dari mata pelajaran serta nama matapelaran yang diampu oleh guru.

5. Tabel intruksi Primary key : kd_intruksi

Foreign key : kd_mapel,Kd_guru Fungsi Tabel : Untuk membrikan intruksi tugas

Tabel 4. 5 Struktur Tabel intruksi_tugas

No Nama Field

Tipe Data Ukuran Keterangan

1 Kd_intruksi

varchar

10 kd intruksi tugas

2 subject

varchar

50 Judul intruksi

3 Tanggal

Varchar

30 Tanggal upload

4 jurusan

enum

2 Jurusan siswa

5 kelas

Varchar

30 Kelas siswa

Alamat file

7 Batas_waktu Int

5 Batas waktu Pengumpulan

8 Kd_mapel

Varchar

3 Kode matapelajaran

9 nip

varchar

30 No.identitas guru

Pada tabel intruksi terdapat 9 field yang merupakan tabel untuk guru memberikan intruksi kepada siswa dimana Kd intruksi sebagai primary key dan kdmapel serta nip sebagai foreigen key yang digunakan untuk menghubungkan anatar tabel yang dipelukan.

6. Tabel Materi Primary key : kd_materi Foreign key : kd_mapel,nip Fungsi Tabel : Untuk menyimpan data materi

Tabel 4. 6 Struktur tabel materi

No Nama Field Tipe Data Ukuran Keterangan

1 Kd_materi

Varchar

5 Id materi yang dibagikan ke siswa

2 Kd_mapel

Varchar

70 Nama mata pelajaran

3 Nm_materi Varchar

50 Nama materi

Tanggal upload materi

5 Jurusan

enum

2 Jurusan siswa

Alamat file

8 nip

varchar

20 Identitas guru

Pada tabel materi terdapat 8 field yang merupakan tabel untuk menyimpan data materi dan memberikan intruksi kepada siswa.

7. Tabel Tugas Siswa Primary key : kd_tugas Foreign key : kd_intruksi Fungsi Tabel : Untuk menyimpan data tugas siswa

Tabel 4. 7 Struktur tabel tugas Siswa

No Nama Field Tipe Data Ukuran Keterangan

1 Kd_tugas

Varchar

30 kd_tugas siswa

2 Kd_intruksi

Varchar

30 Kd_intruksi tugas

3 Nis

Varchar

30 Nama siswa

4 Tanggal

date

20 Tanggal pengumpulan

Alamat file

Pada tabel tugas siswa terdapat 5 field yang merupakan tabel untuk menyimpan data tugas siswa yang mengumpulkan tugas kepada guru.

8. Tabel User Primary key : id_user

Foreign key : - Fungsi Tabel : Untuk menyimpan data user/pengguna

Tabel 4. 8 Struktur tabel admin

No Nama Field Tipe Data

Ukuran

Keterangan

1 Id_user

Varchar

20 Rincian id pengguna

2 username

Varchar

30 Username login

3 password

Varchar

50 Password login

4 Level

Varchar

10 Level pengguna

Pada tabel admin terdapat 4 field yang merupakan tabel untuk menyimpan data user(pengguna sistem) yang memiliki hak akses yang berbeda.

9. Tabel Berita (berita) Primary key : kd_berita Foreign key : Fungsi Tabel : Untuk menyimpan data berita

Tabel 4. 9 Struktur tabel berita

No Nama Field Tipe Data Ukuran Keterangan

1 kd_berita

int

11 Nomor berita yang dituliskan

2 Judul_berita

Varchar

50 Tanggal penulisan berita

Tanggal berita

4 Sumber

Varchar

50 Sumber berita

5 konten

text

Rincian singkat tentang berita yang ditulis

6 Id_admin

Varchar

20 Id_admin

Pada tabel berita terdapat 6 field yang merupakan tabel untuk menyimpan data berita yang memberikan info kepada pengunjung maupun pengguna.

10. Tabel bukutamu Primary key : no_buktam Foreign key : id_user,Nis, Kd_guru Fungsi Tabel : Untuk menyimpan data berita

Tabel 4. 10 Struktur tabel buku_tamu

No Nama Field Tipe Data Ukuran Keterangan

1 no_buktam

Varchar

10 Nomor buku tamu

2 nama

Varchar

50 Nama pengunjung

Alamat email pengunjung

4 komentar

text

Komentar dari pengunjung

Pada tabel siswa terdapat 4 field yang merupakan tabel untuk menyimpan data buku tamu agar lebih efektif untuk berdiskusi memalui halaman utama.

11. Tabel Profil Primary key : id_profil Foreign key : -

Fungsi Tabel : Untuk menyimpan data profile

Tabel 4. 11 Struktur tabel profile

No Nama Field Tipe Data

Ukuran

Keterangan

1 kd_profil

Varchar

10 Id profil

2 judul

Varchar

20 Judul profil yang ditulis

3 tanggal

date

Tanggal upload

4 konten

text

Rincian/keterangan dari judul

5 Id_admin

Varchar

20 Id_admin

Pada tabel siswa terdapat 4 field yang merupakan tabel untuk menyimpan data profile SMK pada halaman web.

12. Tabel Galery Primary key : id_galery

Foreign key : -

Tabel 4. 12 Struktur tabel Galeri

No Nama Field Tipe Data

Ukuran

Keterangan

1 id_galey

int

11 Id profil

Judul profil yang ditulis

3 kategory

enum

2 Category gambar atau

Alamat url gambar yang ditulis

5 Id_admin

Varchar

20 Id_admin

IV.4.2.3 Relasi Antar Tabel

Setiap tabel dalam database dihubungkan atau direlasikan dengan tabel yang lain berdasarkan kunci field penghubung masing-masing tabel database. Diagram relasi tabel digambarkan sebagai berikut :

Tabel 4. 13 Relasi Antar Tabel

IV.5 Rencana Pengembangan Sistem

Rencana pengembangan sistem berisi tentang beberapa konsep dalam membuat sistem informasi e-learning yang terdiri dari rancangan skenario, rancangan isi, dan rancangan form.

IV.5.1. Merancang Skenario

Skenario adalah bagaimana langkah-langkah atau konsep dari sistem ini. Skenarionya adalah sebagai berikut :

1. Siswa dapat melihat informasi tentang pembelajaran.

2. Siswa dapat mengunduh materi yang tersedia.

3. Guru menyediakan informasi tentang pembelajaran.

4. Guru menyediakan materi bagi siswa.

IV.5.1.1 Rancangan Konten Sistem Informasi E-Learning

Dalam pembuatan sistem informasi e-learning, rancangan isi digunakan untuk mempermudah pembangun sistem dengan membagi isi yang ada menjadi beberapa halaman atau urutan sehingga informasi tentang sistem ini dapat tersaji dengan teratur dan dapat dimengerti oleh user. Pemilihan elemen yang akan dipakai sangat berpengaruh terhadap hasil akhir sistem ini, sehingga aplikasi yang akan ditampilkan mudah untuk digunakan. Beberapa elemen yang dianggap mampu menampilkan informasi diantaranya adalah teks dan gambar. Alasan pemilihan elemen ini adalah:

1. Teks

Teks digunakan untuk memberikan penjelasan yang lebih lanjut tentang obyek yang ditampilkan. Tipe font yang digunakan dalam pembuatan sistem ini disesuaikan dengan kebutuhan dan keserasian dengan obyek yang dijelaskan, sehingga mudah untuk dibaca serta nyaman di mata.

2. Gambar Gambar yang digunakan dalam merancang sistem informasi e-learning ini diambil dari data data instansi dan internet kemudian dimodifikasi dengan menggunakan perangkat lunak Corel Draw sehingga bisa menjadi suatu gambar yang lebih menarik dan sesuai dengan kebutuhan.

IV.5.2. Perancangan Antar Muka

1. Rancangan halaman utama Rancangan halaman utama adalah halaman yang muncul pertama kali ketika pengunjung mengakses website e-learning SMK Diponegoro Yogyakarta, adapun rancanganya adalah sebagai berikut :

Tabel 4. 14 Rancangan Halaman Utama

2. Rancangan halaman kontrol admin Rancangan halaman kontrol admin adalah halaman dimana admin melakukan proses tambah data, ubah data ataupun hapus data, adapun rancanganya adalah sebagai berikut:

Tabel 4. 15 Rancangan Halaman admin

3. Halaman login siswa,guru dan admin Halaman login siswa dan guru adalah halaman dimana siswa dan guru mengisikan id dan password untuk dapat masuk ke dalam halaman e- learning , adapun rancanganya adalah sebagai berikut:

Tabel 4. 16 Rancangan Halaman Login

4. Halaman e-learning guru Halaman e-learning guru adalah halaman dimana guru melakukan proses pembelajaran sesuai dengan fasilitas yang tersedia pada sistem, adapun rancanganya adalah sebagai berikut:

Tabel 4. 17 Rancangan Halaman guru

5. Halaman e-learning siswa Halaman e-learning guru adalah halaman dimana guru melakukan proses pembelajaran sesuai dengan fasilitas yang tersedia pada sistem, adapun rancanganya adalah sebagai berikut:

Tabel 4. 18 Rancangan Halaman siswa

BAB V IMPLEMENTASI SISTEM

V.1 Pembahasan Sistem

Sistem Informasi e-learning Portal Tugas Siswa adalah program pengolah data sekolah yang bekaitan dengan kegiatan pengumpulan tugas siswa yang mempunyai cara kerja sederhana namun sangat membantu guru dalam memberikan materi maupun tugas kepada siswa. Cara kerja dan fasilitas yang disediakan sistem informasi e-learning portal tugas siswa akan dijelaskan dalam tiap-tiap bagian penjelasan pada tampilan form atau halaman. Program ini digunakan oleh 4 user diantaranya siswa, guru, pengunjung, dan admin.

V.2 Implementasi Antar Muka

Implementasi antara muka menerangkan kegunaan masing-masing halaman web yang ada di dalam aplikasi e-learning Portal Tugas Siswa SMK Diponegoro Yogyakarta. Berikut adalah implementasi yang terdapat pada masing- masing pengguna :

V.2.1 Halaman Web Sekolah

Halaman web sekolah merupakan halaman website sekolah berikutnya dimana pada halaman ini akan mempresentasikan profil , berita, gallery dari SMK Diponegoro Depok Yogyakarta. berikut tampilan halaman web sekolah SMK Diponegoro

Yogyakarta.

Gambar 5. 1 Tampilan Halaman Web Sekolah

Halaman ini terdapat beberapa menu yang bisa diakses oleh semua user maupun pengunjug, yaitu menu home, menu profil, menu galery dan kontak. Dimana menu tersebut merupkan meu yang berkaitan dengan profil dari SMK Diponegoro Depok Yogtakarta. Dengan adanya menu tersebut diharapkan pengguna dapat dengan mudah mengakses menu-menu yang dibutuhkan dan Halaman ini terdapat beberapa menu yang bisa diakses oleh semua user maupun pengunjug, yaitu menu home, menu profil, menu galery dan kontak. Dimana menu tersebut merupkan meu yang berkaitan dengan profil dari SMK Diponegoro Depok Yogtakarta. Dengan adanya menu tersebut diharapkan pengguna dapat dengan mudah mengakses menu-menu yang dibutuhkan dan

V.2.1.1 Menu Profile

Halaman menu profile merupakan halaman yang berisi tentang profile berikutnya dimana pada halaman ini akan mempresentasikan tentang Visi Misi dari SMK Diponegoro Depok Yogyakarta. berikut tampilan halaman profil sekolah SMK Diponegoro Yogyakarta.

Gambar 5. 2 Tampilan Menu Profile

V.2.1.2 Menu Galery

Halaman menu galery merupakan halaman yang berisi tentang gallery dimana pada halaman ini akan mempresentasikan tentang Galery/Foto Kegiatan Halaman menu galery merupakan halaman yang berisi tentang gallery dimana pada halaman ini akan mempresentasikan tentang Galery/Foto Kegiatan

Gambar 5. 3 Tampilan Menu Galery

V.2.1.3 Menu Kontak

Halaman menu kontak merupakan halaman yang berisi tentang kontak dimana pada halaman ini akan mempresentasikan tentang lokasi dan kontak dari SMK Diponegoro Depok Yogyakarta. berikut tampilan halaman kontak sekolah SMK Diponegoro Yogyakarta.

Gambar 5. 4 Tampilan Menu Kontak

V.2.1.4 Menu Buku_tamu

Halaman menu buku_tamu merupakan halaman yang berisi tentang Buku_tamu dimana pada halaman ini merupakan halaman untuk memberikan saran maupun komentar pengunjung web SMK Diponegoro Depok Yogyakarta. berikut tampilan halaman buku tamu sekolah SMK Diponegoro Yogyakarta.

Gambar 5. 5 Tampilan Menu Buku_tamu

V.2.2 Halaman E-learning Portal Tugas

Halaman web e-learning merupakan halaman utama Portal Tugas Siswa dimana pada halaman ini terdapat 3 hak akses dari penggunaan halaman ini, yaitu halaman login, halaman siswa, halaman guu, dan halaman admin.

V.2.2.1 Halaman Login

Halaman login adalah halaman yang muncul pertama kali saat user memilih menu login pada halaman web dijalankan, halaman ini berfungsi untuk membatasi hak akses pengguna karena tidak semua pengguna (user) tidak dapat mengakses fitur dalam program ini. Hanya pengguna yang terdaftar dalam database dan mempunyai username dan password yang bisa menggunakan program ini sesuai dengan hak akses yang dimiliki. Halaman ini dapat diakses oleh semua tingkatan user yaitu siswa,guru, admin.

Gambar 5. 6 Tampilan Halaman Login

Gambar 5.6 merupakan tampilan halaman login, dengan komponen di dalamnya yang mempunyai fungsi berbeda. Textfield yang pertama merupakan tempat untuk memasukan username dan textfield yang kedua untuk memasukan password . Kemudian tombol login berguna untuk memproses syntax fungsi cek login , mencocokan username dan password dari input yang dilakukan pengguna.

Gambar 5.7 Tampilan Gagal Login

Gambar 5.7 merupakan halaman jika pengguna salah dalam memasukkan username dan password pada halaman login. Pengguna akan diberikan pesan berupa akun tidak ditemukan Jika pengguna berhasil memasukkan username dan password maka akan diarahkan menuju halaman utama . Kemudian jika berhasil melakukan login maka akan muncul pergingatan seperti gambar 5.8 , 5.9, 5.10 berikut :

Gambar 5. 7 Pesan berhasil Login

Gambar 5.8 merupakan Peringatan jika pengguna/admin berhasil dalam memasukkan username dan password pada halaman login.

Gambar 5. 8 Pesan berhasil Login

Gambar 5.9 merupakan Peringatan jika pengguna/Guru berhasil dalam memasukkan username dan password pada halaman login.

Gambar 5. 9 Pesan berhasil Login

Gambar 5.10 merupakan Peringatan jika pengguna/Siswa berhasil dalam memasukkan username dan password pada halaman login.

V.2.2.2 Halaman Admin

Halaman admin merupakan halaman berikutnya setelah berhasil masuk melalui halaman login sebagai admin . Halaman ini akan mempresentasikan hal dan yang digunakan untuk mengolah data Web sekolah maupun halaman portal tugas berikut tampilan halaman utamanya.

Gambar 5. 10 Tampilan Halaman Admin

Halaman ini terdapat beberapa menu yang bisa diakses oleh admin, yaitu Data Website yang memilki sub menu berita, profile, buku tamu, gallery, kontak, Data Sekolah yang memiliki sub menu guru, siswa, mapel, dan Laporan.

Di dalam menu tersebut mempunyai submenu item yang fungsinya untuk membuka from-form yang bersangkutan dalam halaman utama ini juga mempunyai menu cepat atau control panel yang terdapat disamping dengan adanya menu tersebut diharapkan pengguna dapat dengan mudah mengakses menu-menu yang dibutuhkan dan yang dominan digunakan sepanjang waktu sehingga dalam aktifitasnya pengguna mampu melaksanakannya dengan mudah efisien waktu.

V.2.2.2.1 Menu Admin

Pada Halaman menu berita merupakan halaman mempresentasikan isi pada bagaian berita halaman hal dan yang digunakan untuk mengolah data berita.berikut tampilan menu berita.

Gambar 5. 11 Tampilan Menu Berita admin

Halaman ini admin dapat melakukan management data, yaitu edit dan delete berita. Jika admin melakukan tambah berita maka akan muncul halaman Halaman ini admin dapat melakukan management data, yaitu edit dan delete berita. Jika admin melakukan tambah berita maka akan muncul halaman

Gambar 5. 12 Tampilan Tambah Berita Admin

Pada Halaman tambah berita berfungsi untuk menambah berita pada halaman website sekolah, Kemudian akan muncul peringatan seperti berikut saat proses penyimpanan dilakukan.

Gambar 5. 13 Tampilan Berhasil Menambah Berita Admin

Gambar 5. 14 Tampilan Edit Berita Admin

Pada halaman merupakan halaman untuk mengedit berita yang sudah ada pada database Kemudian akan muncul peringatan seperti berikut saat proses penyimpanan dilakukan.

Gambar 5. 15 Tampilan Edit Berita Admin

Gambar 5. 16 Tampilan Hapus Berita Admin

V.2.2.3 Halaman Guru

Halaman guru merupakan halaman berikutnya setelah berhasil masuk melalui halaman login Sebagai guru . Halaman ini akan mempresentasikan hal dan yang digunakan untuk mengolah data elearning Tugas Siswa berikut tampilan halaman portal Guru

Gambar 5. 17 Tampilan halaman portal guru

. Halaman ini terdapat beberapa menu yang bisa diakses oleh guru yaitu Materi ,Intrusksi Tugas, dan Tugas Siswa. Di dalam menu tersebut mempunyai submenu

item yang fungsinya untuk membuka from-form yang bersangkutan dalam halaman utama ini juga mempunyai menu cepat atau control panel yang terdapat

disamping dengan adanya menu tersebut diharapkan pengguna dapat dengan mudah mengakses menu-menu yang dibutuhkan dan yang dominan digunakan sepanjang waktu sehingga dalam aktifitasnya pengguna mampu melaksanakannya

dengan mudah efisien waktu.

V.2.2.3.1 Menu Guru

Pada halaman menu guru merupakan halaman mempresentasikan isi intruksi yang diberikan kepada siswa yang digunakan untuk mengupload intruksi Tugas, dan materi kepada siswa berikut tampilan menu intruksi tugas.

Gambar 5. 18 Tampilan Menu Intruksi Tugas

Pada Halaman ini guru dapat melakukan management data, yaitu Tambah dan delete Intruksi tugas. Jika guru melakukan tambah maka akan muncul halaman untuk menambah inttruksi tugas, demikian juga dengan hapus berikut tampilan menghapus data intruksi tugas. Berikut tampilan halaman untuk menambah intruksi tugas.

Gambar 5. 19 Tampilan Upload Intruksi Tugas

Pada Halaman tambah intruksi berfungsi untuk menambah intrksi tugas kepada siswa Kemudian akan muncul peringatan seperti berikut saat proses penyimpanan dilakukan.

Gambar 5. 20 Peringatan Berhasil Menambah Intruksi

Gambar 5. 21 Peringatan Menghapus Intruksi

V.2.2.4 Halaman Siswa

Halaman siswa merupakan halaman berikutnya setelah berhasil masuk melalui halaman login Sebagai siswa . Halaman ini akan mempresentasikan hal Halaman siswa merupakan halaman berikutnya setelah berhasil masuk melalui halaman login Sebagai siswa . Halaman ini akan mempresentasikan hal

Gambar 5. 22 Tampilan Halaman Siswa

Halaman ini terdapat beberapa menu yang bisa diakses oleh siswa yaitu Materi , Tugas. Di dalam menu tersebut mempunyai submenu item yang fungsinya untuk membuka from-form yang bersangkutan dalam halaman utama ini juga mempunyai menu cepat atau control panel yang terdapat disamping dengan adanya menu tersebut diharapkan pengguna dapat dengan mudah mengakses menu-menu yang dibutuhkan dan yang dominan digunakan sepanjang waktu sehingga dalam aktifitasnya pengguna mampu melaksanakannya dengan mudah efisien waktu.

V.2.2.4.1 Menu Siswa

Pada halaman menu siswa merupakan halaman mempresentasikan isi kumpulan materi dan tugas yang diberikan guru kepada siswa dan untuk mengupload Tugas siswa kepada guru yang menberikan tugas, berikut tampilan Siswa untuk mengerjakan tugas .

Gambar 5. 23 Tampilan Kumpulan Intruksi Tugas Dari Guru

Pada halaman ini guru dapat mengerjakan tugas yang diberikan guru, yaitu Jika siswa melakukan memilih kerjakan maka akan muncul halaman untuk Mengerjakan tugas. Berikut tampilan halaman untuk mengerjakan tugas.

Gambar 5. 24 Tampilan kumpul tugas

Pada Halaman tambah intruksi berfungsi untuk mengumpulkan tugas kepada guru Kemudian akan muncul peringatan seperti berikut saat proses penyimpanan dilakukan.

Gambar 5. 25 Peringatan Berhasil Mengumpul Tugas

V.2.2.5 Tampilan Menu Laporan Halaman menu laporan merupakan halaman yang berfungsi sebagai catatan daftar guru dan siswa yang ada pada sekolah menu ini dapat diakses oleh

admin saja, karena sebagai audit internal manajemen.

Gambar 5. 26 Tampilan Halaman Laporan Guru

Pada halaman ini memiliki fasilitas seperti cetak , save, dan kembali. Untuk fitur cetak berfungsi mencetak hasil yang pengguna lakukan, fitur save untuk menyimpan data laporan.

Gambar 5. 27 Tampilan Halaman Laporan Guru

BAB VI PENUTUP