Yulianto Saparudin Bahtiar

Perancangan dan Pembangunan Sistem Pembelajaran Mandiri Berbasis Web Dengan Framework Codeigniter

di SMPN 1 Pangkalan.

Dibuat untuk memenuhi tugas mata kuliah Projek 2 dan untuk menyusun Tugas Akhir

Nama : Yulianto Saparudin Bahtiar

NIM : 137810040020

LP3I Karawang College

2015-2016

BAB 1

Pendahuluan

1.1 Latar Belakang

Pembelajaran merupakan unsur yang sangat penting dalam pendidikan di Indonesia. Dalam pembelajaran terdapat berbagai macam strategi dan metode yang dapat digunakan sesuai dengan kondisi yang ada. Terlaksananya strategi pembelajaran yang meliputi pengajaran, diskusi, membaca, penugasan, presentasi dan evaluasi tergantung pada satu atau lebih tiga mode dasar komunikasi sebagai berikut (Boettcher, 1999):

a. Dialog/komunikasi antara guru dengan siswa.

b. Dialog/komunikasi antara siswa dengan sumber belajar.

c. Dialog/komunikasi diantara siswa.

Pembelajaran bisa berjalan secara optimal apabila ketiga aspek tersebut diselenggarakan dengan komposisi yang serasi. Para pakar pendidikan menyatakan bahwa keberhasilan pencapaian tujuan dan pembelajaran sangat ditentukan oleh keseimbangan antara ketiga aspek tersebut (Pelikan, 1992).

Dewasa ini pembelajaran merupakan hal yang terpenting, karena untuk menunjang masa depan kelak, tetapi di zaman yang modern ini khususnya para remaja siswa SMP maupun SMA sudah sangat jarang sekali belajar, karena adanya kemajuan teknologi, mereka cenderung mengguakan teknologi untuk hal-hal yang negatif saja, untuk itu dipelukannya media atau alat untuk menjadikan teknologi sebagai wadah untuk siswa belajar dengan waktu yang fleksibel dan dapat diakses dimana saja.

Meskipun implementasi sistem e-learning yang ada sekarang ini sangat bervariasi, namun semua didasarkan pada prinsip atau konsep bahwa elearning dimaksudkan sebagai upaya pendistribusian materi pembelajaran melalui media elektronik atau internet.

1.2 Rumusan Masalah

Melihat latar belakang masalah tersebut, serta membaca dokumentasi dan referensi seputar pembuatan, penerapan dan pengembangan aplikasi e-Learning, maka dapat dirumuskan sebuah pertanyaan sebagai berikut:

a. Bagaimana membangun Aplikasi Pembelajaran Online (e-learning) Untuk Sekolah Menengah dan Sederajat ?

b. Bagaimana kerja dari Aplikasi Pembelajaran Online (e-learning)?

c. Data apa saja yang di olah pada Aplikasi Pembelajaran Online (e-learning)?

d. Apa yang akan dihasilkan pada Aplikasi Pembelajaran Online (e-learning) ini?

1.3 Batasan Masalah

Penulisan Tugas Akhir yang saya buat ini terdapat beberapa batasan-batasan maslah, diantaranya adlah :

a. Aplikasi e-learning merupakan aplikasi web base

b. Software pendukung yang meliputi Apache, database MySQL, PHPMyAdmin.

c. Bahasa Pemrograman yang digunakan adalah PHP framework Codeigniter, CSS framework Bootstrap, dan Javascript.

d. Teknik Pemrograman menggunkan OOP PHP, dengan konsep MVC (Model, View Controller)

e. Database menggunakan MySQL PHPMyAdmin.

f. Analisa sistem menggunakan UML ( Unified Modelling Language).

g. Implementasi e-Learning, meliputi pengolahan data sebagai berikut :

1. User (administrator, guru, siswa ).

2. Materi pelajaran dan tugas (upload dan download).

3. Info, pesan pribadi, forum, chat

4. Kuis / ujian

1.4 Tujuan dan Manfaat Penulisan

1.4.1 Tujuan Penulisan

Tujuan dari penulisan laporan tugas akhir ini adalah untuk membangun Aplikasi Pembelajaran Online (e-Learning) Untuk Sekolah Menengah dan Sederajat.

1.4.2 Manfaat Penulisan

a. Sebagai syarat lulus mata kuliah Project 2 Tugas Akhir

b. Penambahan fasilitas untuk guru dan siswa dalam interaksi melalui internet yang berupa e-learning dimana fasilitas tersebut meliputi pendistribusian materi, tugas, ujian, nilai, kemudian chat dan forum.

1.5 Metodologi Penelitian

Adapun metodologi penelitian yang digunakan penulis untuk mengumpulk data dalam penulisan Tugas Akhir ini adalah :

a. Observasi, yaitu melakukan penelitian langsung ke lokasi yaitu di SMPN 1 Pangkalan.

b. Wawancara, yaitu bertanya langsung kepada pihak di SMPN 1 Pangkalan.

1.6 Sistematika Penulisan

Sistematika penulisan laporan tugas akhir ini adalah sebagai berikut :

a. Bab I Pendahuluan

Bab ini membahas tentang latar belakang masalah, rumusan masalah, batasan masalah, tujuan penulisan tugas akhir, manfaat yang didapatkan dari penulisan tugas akhir, metodologi serta sistematika penulisan yang dipakai pada penulisan tugas akhir ini.

b. Bab II Landasan Teori

Bab ini membahas tentang teori-teori yang digunakan penulis sebagai dasar untuk menyusun tugas akhir ini.

c. Bab III Analisa Dan Perancangan

Bab ini membahas tentang bentuk desain dan perancangan Aplikasi Pembelajaran Online (e-Learning) Untuk Sekolah Menengah dan Sederajat. Permodelan yang dipakai untuk merancang aplikasi e-Learning ini adalah UML (Unified Model Language) yang meliputi Use Case diagram, Activity diagrams, Sequence diagram, Class diagram.

d. Bab IV Implementasi Dan Pembahasan

Bab ini membahas tentang implementasi aplikasi pembelajaran on-line (elearning) untuk sekolah menengah dan sederajat pada jaringan komputer, spesifikasi hardware maupun software yang dipakai, serta analisa hasil aplikasi Pembelajaran Online yang dibagi menjadi 3 interface, yaitu antar muka guru, antar muka admin dan antar muka siswa.

e. Bab V Penutup

Bab ini membahas tentang kesimpulan dan saran yang penulis ambil dari penulisan tugas akhir ini.

BAB 2

Landasan Teori

2.1 Pengertian E-Learning

Pembelajaran Elektronik (e-learning) dapat didefinisikan sebagai sebuah bentuk teknologi informasi yang diterapkan di bidang pendidikan dalam bentuk sekolah maya. E-learning merupakan dasar dan konsekuensi logis dari perkembangan teknologi informasi dan komunikasi. Dengan e-learning, peserta ajar (learner atau murid) tidak perlu duduk dengan manis di ruang kelas untuk menyimak setiap ucapan dari seorang guru secara langsung. E-learning juga dapat mempsersingkat jadwal target waktu pembelajaran, dan tentu saja menghemat biaya yang harus dikeluarkan oleh sebuah program studi atau program pendidikan.

2.2 Pengertian Website

Website adalah suatu media publikasi elektronik yang terdiri dari halaman-halaman web (web page) yang terhubung satu dengan yang lain menggunakan link yang dilekatkan pada suatu teks atau gambar. Website dibuat pertama kali oleh Tim Barners Lee pada tahun 1990. Website dibangun dengan menggunakan bahasa Hypertext Markup Language (HTML) dan memanfaatkan protokol komunikasi Hypertext Transfer Protocol (HTTP) yang terletak pada application layer pada referensi layer OSI. Halaman website diakses menggunakan aplikasi yang disebut internet browser.

Gambar 1. Skema kerja protokol

Menurut (Jasmadi, 2004), fungsi dari website adalah :

1. Fungsi Komunikasi

Website berfungsi sebagai media komunikasi antara pembuat/pemilik dengan pengunjung atau pengunjung dengan pengunjung lain. Komunikasi dilakukan dengan menggunakan aplikasi web messenger, web forum, web chat, web mail, dan lain sebagainya.

2. Fungsi Informasi

Website berfungsi untuk menyediakan informasi bagi pengunjung.

3. Fungsi Hiburan

Website menjadi sarana hiburan, menyediakan layanan online game, video streaming, music streaming, dan lain sebagainya.

4. Fungsi Transaksi

Website berfungsi sebagai sarana untuk melaksanakan transaksi bisnis seperti : online order, pembayaran menggunakan kartu kredit, pembayaran dengan e-gold, dan sebagainya.

5. Fungsi Pendidikan

Website berfungsi sebagai sarana dalam interaksi guru dan siswa sehingga tidak terikat oleh jarak dan waktu.

2.3 Pengertian Codeigniter

CodeIgniter merupakan aplikasi sumber terbuka yang berupa framework PHP dengan model MVC (Model, View, Controller) untuk membangun website dinamis dengan menggunakan PHP. CodeIgniter memudahkan developer untuk membuat aplikasi web dengan cepat mudah dibandingkan dengan membuatnya dari awal. CodeIgniter dirilis pertama kali pada 28 Februari 2006. Versi stabil terakhir adalah versi 2.2.1.

2.4 Pengertian MVC (Model View Controller)

Model View Controller merupakan suatu konsep yang cukup populer dalam pembangunan aplikasi web, berawal pada bahasa pemrograman Small Talk, MVC memisahkan pengembangan aplikasi berdasarkan komponen utama yang membangun sebuah aplikasi seperti manipulasi data, user interface, dan bagian yang menjadi kontrol aplikasi. Terdapat 3 jenis komponen yang membangun suatu MVC pattern dalam suatu aplikasi yaitu :

View, merupakan bagian yang menangani presentation logic. Pada suatu aplikasi web bagian ini biasanya berupa file template HTML, yang diatur oleh controller. View berfungsi untuk menerima dan merepresentasikan data kepada user. Bagian ini tidak memiliki akses langsung terhadap bagian model.

Model, biasanya berhubungan langsung dengan database untuk memanipulasi data (insert, update, delete, search), menangani validasi dari bagian controller, namun tidak dapat berhubungan langsung dengan bagian view.

Controller, merupakan bagian yang mengatur hubungan antara bagian model dan bagian view, controller berfungsi untuk menerima request dan data dari user kemudian menentukan apa yang akan diproses oleh aplikasi.

Dengan menggunakan prinsip MVC suatu aplikasi dapat dikembangkan sesuai dengan kemampuan developernya, yaitu programmer yang menangani bagian model dan controller, sedangkan designer yang menangani bagian view, sehingga penggunaan arsitektur MVC dapat meningkatkan maintainability dan organisasi kode. Walaupun demikian dibutuhkan komunikasi yang baik antara programmer dan designer dalam menangani variabel-variabel yang akan ditampilkan.

Gambar 2. Bentuk MVC pada Codeigniter

2.5 Web Server

Web server adalah suatu perangkat lunak yang berfungsi untuk melayani aktifitas request and reply file-file web. Salah satu web server yang paling banyak digunakan saat ini adalah Apache Web Server. Keunggulan Apache antara lain :

bersifat open source, gratis, memiliki dukungan luas terhadap bahasa pemrograman

web, antara lain PHP, JSP, Perl, dan lain sebagainya.

Gambar 3. Arsitektur Web Server

2.6 Bootstrap

Twitter Bootstrap adalah sebuah alat bantu untuk membuat sebuah tampilan halaman website yang dapat mempercepat pekerjaan seorang pengembang website ataupun pendesain halaman website. Sesuai namanya, website yang dibuat dengan alat bantu ini memiliki tampilan halaman yang sama / mirip dengan tampilan halaman Twitter atau desainer juga dapat mengubah tampilan halaman website sesuai dengan kebutuhan.

Twitter Bootstrap dibangun dengan teknologi HTML dan CSS yang dapat membuat layout halaman website, tabel, tombol, form, navigasi, dan komponen lainnya dalam sebuah website hanya dengan memanggil fungsi CSS (class) dalam berkas HTML yang telah didefinisikan. Selain itu juga terdapat komponen-komponen lainnya yang dibangun menggunakan JavaScript.

2.7 Web Browser

Web browser atau yang lebih dikenal browser adalah suatu program atau aplikasi yang digunakan untuk menjelajahi internet atau untuk mencari sebuah informasi dari suatu halaman web/blog. Awalnya web browser hanya berorientasi

pada teks dan belum dapat menampilkan gambar. Namun, web browser sekarang

tidak hanya menampilkan text dan gambar tetapi juga file multimedia seperti video dan suara. Browser yang dipergunakan oleh para pengguna internet seperti Netscape Navigator, Mozaic, Internet Explorer, Mozila Firefox, Opera, Google Chrome, Avant

Browser dan lain-lain.

2.8 Pengertian UML (Unified Modelling Language)

Unified Modeling Language (UML) adalah sebuah bahasa permodelan yang telah menjadi standar dalam industri software untuk visualisasi, merancang, dan mendokumentasikan sistem perangkat lunak. Bahasa permodelan UML lebih cocok

untuk pembuatan perangkat lunak dalam bahasa pemrograman berorientasi objek (C+ , Java, VB.NET), namun demikian tetap dapat digunakan pada bahasa pemrograman

procedural.

UML menyediakan 10 macam diagram untuk memodelkan aplikasi berorientasi objek, yaitu :

1. Use Case Diagram untuk memodelkan proses bisnis.

2. Conceptual Diagram untuk memodelkan konsep-konsep yang ada di dalam aplikasi.

3. Sequence Diagram untuk memodelkan pengiriman pesan (message) antar objects.

4. Collaboration Diagram untuk memodelkan interaksi antar objects.

5. State Diagram untuk memodelkan perilaku objects di dalam sistem.

6. Activity Diagram untuk memodelkan perilaku Use Cases dan objects di dalam system.

7. Class Diagram untuk memodelkan struktur kelas.

8. Object Diagram untuk memodelkan struktur object.

9. Component Diagram untuk memodelkan komponen object.

10. Deployment Diagram untuk memodelkan distribusi aplikasi.

Tetapi dalam pembuatan tugas akhir ini, penulis hanya mengimplementasikannya dalam 4 diagram.

2.8.1 Use Case

Use Case digunakan pada saat pelaksanaan tahap requirement dalam pengembangan suatu sistem informasi. Use Case menggambarkan hubungan antara entitas yang biasa disebut aktor dengan suatu proses yang dapat dilakukannya.

Berikut adalah simbol-simbol yang digunakan dalam Use Case beserta deskripsinya.

No	Simbol	Nama	Deskripsi
1		Case	Menggambarkan proses / kegiatan yang dapat dilakukan oleh aktor
2		Actor	Menggambarkan entitas / subyek yang dapat melakukan suatu proses
3		Relation	Relasi antara case dengan actor ataupun case dengan case lain.
4		Generali-zation	Relasasi antar actor adalah relasasi generalisasi

Tabel 1. Simbol Use Case

2.8.2 Static Diagram / Class Diagram

Static diagram digunakan untuk menggambarkan stuktur kelas dan obyek yang akan digunakan dalam sistem yang akan dibangun. Static diagram digunakan pada tahap analisa dan desain aplikasi. Berikut adalah simbol-simbol yang digunakan dalam Static diagram.

No	Simbol	Nama	Deskripsi
1		Class	Menggambarkan sebuah kelas yang terdiri dari attribut dan method.
2		Relation	Menggambarkan hubungan komponen-komponen didalam Static Diagram.
3		Association Class	Class yang terbentuk dari hubungan antara dua buah Class

Tabel 2. Simbol Static Diagram

2.8.3 Squence Diagram

Sequence diagram digunakan untuk menjelaskan aliran pesan dari suatu class ke class lain secara sequensial (berurutan). Sequence diagram digunakan pada tahap desain aplikasi. Berikut merupakan simbol yang digunakan dalam Sequence diagram.

No	Simbol	Nama	Deskripsi
1		Object	Menggambarkan pos-pos obyek yang mengirim dan menerima message
2		Message	Menggambarkan aliran pesan yang dikirim oleh pos-pos obyek
3		Boundary	Menggambarkan Halaman interface yang dilalui oleh user dalam aksi yang dilakukan
4		Control	Menggambarkan sebuah class dimana di class tersebut terdapat beberapa control seperti sql control, event control dll
5		Entity	Menggambarkan sebuah class dimana di class tersebut terdapat variabel – variabel yang memetakan pada field table
6		Tabel	Menggambarkan tabel yang ada pada sistem atau database

Tabel 3.Simbol Squence Diagram

2.8.4 Activity Diagram

Activity diagram digunakan untuk menjelaskan tanggung jawab elemen. Activity diagram biasa dikolaborasikan dengan Sequence diagram dalam pendiskripsian visual dari tahap desain aplikasi. Berikut adalah simbol-simbol yang digunakan dalam Activity diagram.

No	Simbol	Nama	Deskripsi
1		Action State	Menggambarkan keadaan dari suatu elemen dalam suatu aliran aktifitas
2		State	Menggambarkan kondisi suatu Elemen.
3		Flow Control	Menggambarkan aliran aktifitas dari suatu elemen ke elemen lain.
4		Initial State	Menggambarkan titik awal siklus hidup suatu elemen
5		Final State	Menggambarkan titik akhir yang menjadi kondisi akhir suatu elemen