CRAYONPEDIA EDUCATION ECOSYSTEM

DESAIN TAMPILAN PENGGUNA WEB

BERBASIS DESKTOP

Program Studi

SEKOLAH TEKNIK ELEKTRO DAN INFORMATIKA

INSTITUT TEKNOLOGI BANDUNG

CRAYONPEDIA EDUCATION ECOSYSTEM

DESAIN TAMPILAN PENGGUNA WEB DAN APLIKASI

BERBASIS DESKTOP PADA SISTEM INFORMASI TADJ

TUGAS AKHIR

Oleh

IRMA RISMAYANTI

NIM : 03214064

Program Studi Diploma 4 Teknik Elektro

SEKOLAH TEKNIK ELEKTRO DAN INFORMATIKA

INSTITUT TEKNOLOGI BANDUNG

2015

CRAYONPEDIA EDUCATION ECOSYSTEM

DAN APLIKASI

PADA SISTEM INFORMASI TADJ

Elektro

SEKOLAH TEKNIK ELEKTRO DAN INFORMATIKA

INSTITUT TEKNOLOGI BANDUNG

CRAYONPEDIA EDUCATION ECOSYSTEM

DESAIN TAMPILAN PENGGUNA WEB DAN APLIKASI

BERBASIS DESKTOP PADA SISTEM INFORMASI TADJ

Oleh :

Irma Rismayanti

Tugas Akhir ini telah diterima dan disahkan

sebagai persyaratan untuk memperoleh gelar

SARJANA SAINS TERAPAN

di

PROGRAM STUDI DIPLOMA 4 TEKNIK ELEKTRO

SEKOLAH TEKNIK ELEKTRO DAN INFORMATIKA

INSTITUT TEKNOLOGI BANDUNG

Bandung, Desember 2015

Disetujui oleh :

Pembimbing I, Pembimbing II,

Dr. techn. Ary Setijadi P, ST,MT, Dr. Ir. Pranoto Hidaya R, MT,

i

ABSTRAK

CRAYONPEDIA EDUCATION ECOSYSTEM

DESAIN TAMPILAN PENGGUNA WEB DAN APLIKASI

BERBASIS DESKTOP PADA SISTEM INFORMASI TADJ

Oleh

Irma Rismayanti

NIM : 03214064

PROGRAM STUDI DIPLOMA 4 TEKNIK ELEKTRO

Tugas Akhir Dalam Jaringan (TADJ) merupakan sebuah sistem informasi yang mengelola Tugas Akhir dalam jaringan. Dengan menggunakan aplikasi ini, diharapkan mahasiswa dan dosen dapat tetap melakukan bimbingan secara online, sehingga bisa meminimalisir kertas yang digunakan dan waktu dapat digunakan secara efektif. TADJ dapat dijalankan pada tiga platform, yaitu web, mobile dan desktop. Agar mahasiswa dan dosen dalam melakukan proses bimbingan dengan lancar perlu disusun tampilan yang komunikatif. Mahasiswa dan dosen juga dapat mengetahui fungsi fitur-fitur yang terdapat pada sistem informasi TADJ. Tiga versi sistem informasi diharapkan dapat mempermudah user untuk melakukan proses bimbingan. TADJ yang dijalankan pada platform desktop dibuat untuk mempermudah pengguna khususnya dosen dan mahasiswa untuk melakukan bimbingan tanpa menggunakan web browser.

Sistem informasi TADJ versi desktop dibuat dengan menggunakan Visual Studio 2013 dan MySQL sebagai databasenya. Database yang digunakan pada versi dekstop, merupakan database yang juga digunakan pada versi website.

Kata kunci : desktop, TADJ, tampilan.

ii

ABSTRACT

CRAYONPEDIA EDUCATION ECOSYSTEM

USER INTERFACE WEB DESIGN AND APPLICATION BASED

DESKTOP ON TADJ INFORMATION SYSTEM

By

Irma Rismayanti

NIM : 03214064

APPLIED SCIENCE IN ELECTRICAL ENGINEERING STUDY PROGRAM

Final Project In the Network (TADJ) is an information system that manages the final project in the network. By using this application, it is expected students and faculty can keep doing guidance online, so they can minimize the use of paper and time can be used effectively. TADJ can run on three platforms, the web, mobile and desktop. So that students and faculty in the process smoothly guidance should be drawn look communicative. Students and lecturers can also find out the function of the features contained in the information system TADJ. Three versions of the information system is expected to facilitate the user to carry out the counseling process. TADJ that run on the desktop platform designed to facilitate users in particular lecturers and students to make the guidance without using a web browser.

TADJ information system created using the desktop version of Visual Studio 2013, and MySQL as the database. The database used in the desktop version, the database is also used in the website version.

Keywords: desktop, TADJ, display.

iii

KATA PENGANTAR

Puji syukur penulis panjatkan ke hadirat Allah SWT, yang atas rahmat dan karunia

Nya penulis dapat menyelesaikan tugas akhir ini. Shalawat dan salam tercurah

kepada Rasulullah Muhammad SAW beserta keluarganya.

Selama melaksanakan tugas akhir ini, penulis mendapat bantuan dan dukungan dari

berbagai pihak. Untuk itu, penulis ingin mengucapkan terima kasih kepada :

1. bapak Dr. techn. Ary Setijadi Prihatmanto, ST,MT, selaku pembimbing I,

yang telah memberikan bimbingan dan semangat dalam menyelesaikan ini;

2. bapak Dr. Ir. Pranoto Hidaya Rusmin, MT, selaku pembimbing II, yang telah

mencurahkan perhatian dan waktunya yang demikian banyak dalam

penyelesaian tugas akhir ini;

3. bapak, ibu, dan adik-adik tercinta, beserta seluruh keluarga yang senantiasa

memberikan semangat dan do’anya;

4. seluruh anggota kelompok Crayonpedia Education System yang telah bekerja

sama dan membantu dalam menyelesaikan ini;

5. seluruh teman-teman D4 Teknik Komputer Jaringan dan Media Digital Batch

9 yang telah memberikan semangat, doa, dan bantuan dalam menyelesaikan

ini;

6. dan semua pihak yang membantu, yang tidak dapat penulis sebutkan satu

persatu.

Penulis menyadari bahwa tugas akhir ini bukanlah tanpa kelemahan, untuk itu kritik

dan saran sangat diharapkan.

Akhir kata, semoga tugas akhir ini dapat bermanfaat bagi para pembacanya.

Bandung, Desember 2015

Irma Rismayanti

iv

DAFTAR ISI

ABSTRAK .................................................................................................................... i

ABSTRACT ................................................................................................................. ii

KATA PENGANTAR ............................................................................................... iii

DAFTAR ISI ............................................................................................................... iv

DAFTAR GAMBAR .................................................................................................. vi

BAB I PENDAHULUAN ............................................................................................ 1

1.1 Latar Belakang ............................................................................................. 1

1.2 Rumusan Masalah ....................................................................................... 2

1.3.Tujuan ........................................................................................................... 2

1.4 Batasan Masalah .......................................................................................... 2

1.5 Metoda Penelitian ........................................................................................ 3

1.6 Sistematika Penulisan .................................................................................. 4

BAB II TINJAUAN PUSTAKA .................................................................................. 5

2.1 Hypertext Preprocessor (PHP) .................................................................... 5

2.2 Cascading Style Sheets (CSS) ..................................................................... 5

2.3 Javascript ..................................................................................................... 6

2.4 JQuery .......................................................................................................... 7

2.5 XAMPP ....................................................................................................... 8

2.6 Microsoft Visual Studio 2013 ..................................................................... 8

2.7 Bahasa Pemrograman C#............................................................................. 9

2.8 Filezilla ...................................................................................................... 10

BAB III ANALISIS DAN PERANCANGAN .......................................................... 12

3.1 Sistem Kerja .............................................................................................. 12

3.2 Analisis Kebutuhan Perangkat Keras dan Perangkat Lunak ..................... 13

3.3 Analisis dan Perancangan Sistem .............................................................. 13

3.3.1 Analisis Kebutuhan Sistem ............................................................... 13

3.3.2 Analisis Sistem ................................................................................. 14

3.3.3 Fungsionalitas Perangkat .................................................................. 17

3.4 Kebutuhan Perangkat Keras dan Perangkat Lunak ................................... 17

v

3.4.1Spesifikasi Perangkat Lunak ............................................................... 17

3.5 Struktur Tabel Database ............................................................................ 18

BAB IV IMPLEMENTASI DAN PENGUJIAN ....................................................... 19

4.1 Implementasi Sistem ................................................................................. 19

4.2 Implementasi Desain Tampilan Web TADJ .............................................. 19

4.3 Implementasi Aplikasi TADJ Berbasis Desktop ....................................... 20

4.4 Pengujian ................................................................................................... 20

4.4.1 Halaman Utama ................................................................................. 20

4.4.2 Halaman Footer ................................................................................. 21

4.4.3 Halaman Daftar Dosen ...................................................................... 21

4.4.4 Aplikasi TADJ Berbasis Desktop ..................................................... 23

4.4.4.1 Halaman Index ..................................................................... 23

4.4.4.2 Halaman Login ..................................................................... 23

4.4.4.3 Halaman Home ..................................................................... 24

4.4.4.4 Halaman Daftar Tugas Akhir ............................................... 25

4.4.4.5 Halaman Bimbingan ............................................................. 26

4.4.4.6 Halaman Kontak ................................................................... 27

BAB V PENUTUP ..................................................................................................... 29

5.1 Kesimpulan ................................................................................................ 29

5.2 Saran .......................................................................................................... 29

DAFTAR PUSTAKA ................................................................................................ 30

vi

DAFTAR GAMBAR

Gambar 1.1 Waterfall. ................................................................................................. 3

Gambar 3.2 Alur sistem aplikasi TADJ berbasis desktop.......................................... 16

Gambar 3.3 Tabel dosen pada web TADJ. ................................................................ 18

Gambar 3.4 Struktur database TADJ. ........................................................................ 18

Gambar 4.5 Halaman utama TADJ. ........................................................................... 20

Gambar 4.6 Footer web TADJ. .................................................................................. 21

Gambar 4.7 List dosen pada web TADJ. ................................................................... 21

Gambar 4.8 Detail dosen pada web TADJ. ................................................................ 22

Gambar 4.9 Pesan untuk menghapus list dosen pada web TADJ. ............................. 22

Gambar 4.10 Halaman utama TADJ. ......................................................................... 23

Gambar 4.11 Halaman login TADJ. .......................................................................... 24

Gambar 4.12 Halaman home mahasiswa. .................................................................. 24

Gambar 4.13 Halaman home dosen. .......................................................................... 25

Gambar 4.14 Halaman daftar tugas akhir dosen. ....................................................... 25

Gambar 4.15 Halaman daftar tugas akhir mahasiswa. ............................................... 26

Gambar 4.16 Halaman bimbingan dosen. .................................................................. 26

Gambar 4.17 Halaman bimbingan mahasiswa. .......................................................... 27

Gambar 4.18 Halaman kontak utama. ........................................................................ 27

Gambar 4.19 Halaman kontak dosen. ........................................................................ 28

Gambar 4.20 Halaman kontak mahasiswa. ................................................................ 28

1

BAB I

PENDAHULUAN

1.1 Latar Belakang

Tugas akhir merupakan hasil tertulis dari pelaksanaan suatu penelitian, yang dibuat

untuk pemecahan masalah tertentu dengan menggunakan kaidah-kaidah yang

berlaku dalam bidang ilmu tersebut. Untuk menyusun tugas akhir, biasanya

mahasiswa akan didampingi seorang atau beberapa dosen pembimbing. Mahasiswa

diharuskan untuk melakukan bimbingan dengan dosen pembimbing untuk

penyusunan tugas akhir. Namun, terkadang dalam penyusunan tugas akhir banyak

kendala yang dihadapi oleh mahasiswa maupun dosen. Diantaranya, banyaknya

kertas yang dipakai untuk melaporkan hasil tugas akhir, dosen yang sulit untuk

ditemui, jarak kampus yang jauh sehingga akan membuang-buang waktu.

Tugas Akhir Dalam Jaringan (TADJ) merupakan sebuah sistem informasi yang

mengelola Tugas Akhir dalam jaringan. Dengan menggunakan sistem informasi ini,

diharapkan mahasiswa dan dosen dapat tetap melakukan bimbingan secara online,

sehingga bisa meminimalisir kertas yang digunakan dan waktu dapat digunakan

secara efektif. TADJ dapat dijalankan pada tiga platform, yaitu web, mobile dan

desktop.

Agar mahasiswa dan dosen dalam melakukan proses bimbingan dengan lancar perlu

disusun tampilan yang komunikatif. Mahasiswa dan dosen juga dapat mengetahui

fungsi fitur-fitur yang terdapat pada sistem informasi TADJ. TADJ yang dapat

dijalankan pada tiga platform ini diharapkan dapat mempermudah user untuk

melakukan proses bimbingan. TADJ yang dijalankan pada platform desktop dibuat

untuk mempermudah pengguna khususnya dosen dan mahasiswa untuk melakukan

bimbingan tanpa menggunakan web browser. Namun, TADJ pada platform desktop

ini hanya dapat dijalankan pada Laptop dengan Sistem Operasi Windows.

2

1.2 Rumusan Masalah

Berdasarkan hasil analisis pada latar belakang masalah dapat digunakan sebagai

dasar untuk merumuskan masalah yang akan digunakan sebagai fokus perbaikan

pembelajaran sebagai berikut.

1. Apakah sistem informasi TADJ dapat menampilkan tampilan secara online?

2. Apakah sistem informasi TADJ pada platform desktop dapat menampilkan data

yang dibutuhkan untuk keperluan bimbingan Tugas Akhir?

3. Siapa saja pengguna pada Sistem Informasi TADJ pada platform dekstop?

4. Bagaimanakah cara pengguna dapat saling berkomunikasi saat proses bimbingan

pada sistem informasi TADJ platform desktop?

1.3. Tujuan

Adapun tujuan dari pembuatan proposal tugas akhir ini sebagai berikut.

1. Sistem Informasi TADJ (Tugas Akhir Dalam Jaringan) dapat menampilkan

halaman utama, footer, dan daftar dosen secara online;

2. Aplikasi TADJ berbasis dekstop dapat menampilkan data-data yang dibutuhkan

untuk keperluan bimbingan, seperti berita, dan daftar tugas akhir;

3. Mahasiswa dapat mengunggah berkas untuk keperluan bimbingan dan dosen

dapat mengunduh berkas yang telah diunggah oleh mahasiswa.

1.4 Batasan Masalah

Untuk lebih memfokuskan pembahasan materi pada tugas akhir ini, maka diperlukan

batasan-batasan dan ruang lingkup dalam penyusunan tugas akhir. Batasan dan ruang

lingkup meliputi hal-hal sebagai berikut.

1. Bahasa pemrograman pada web menggunakan bahasa PHP;

2. Disain yang dibahas hanyalah pada halaman utama, footer dan daftar dosen;

3. Penyimpanan data pada database;

4. Database yang digunakan untuk menyimpan data adalah MySql;

3

5. Aplikasi TADJ berbasis desktop hanya mengizinkan 2 user, yaitu mahasiswa

dan dosen;

6. Bahasa permogramman yang digunakan pada Aplikasi desktop adalah bahasa

C#.

1.5 Metoda Penelitian

Metode pengerjaan yang digunakan dalam pembuatan tugas akhir ini adalah model

Waterfall.

1. Requirements analysis and definition: Pada proses pengumpulan dan

pendefenisian kebutuhan, dan dikumpulkan semua kebutuhan yang nantinya

akan dipenuhi untuk pembangunan perangkat lunak. Semua daftar kebutuhan

perangkat lunak selanjutnya akan dianalisis dan didefenisikan kebutuhannya,

fungsi-fungsi yang dibutuhkan yang akan dibangun dan diterapkan pada TADJ;

2. System and software design: Pada tahap ini perencanaan sistem desain perangkat

lunak dengan kebutuhan (requirements) yang telah disesuaikan dengan analisis

kebutuhan sebelumnya. Pada tahap ini dilakukan pembuatan desain tampilan,

flowmap, usecase, dan rancangan database;

Requirements analysis and

definition

System and software design

Implementation and unit testing

Integration and system testing

Operation and instalation

Gambar 1.1 Waterfall.

4

3. Implementation and unit testing: Desain yang telah dikerjakan pada tahap ini

diterjemahkan kedalam kode-kode dengan menggunakan bahasa pemograman

Hypertext Preprocessor. Selain itu program yang dibangun akan langsung diuji

baik secara unit. Pengujian sistem dilakukan agar sistem yang dibuat telah sesuai

dengan kebutuhan user dan memastikan input yang dimasukkan akan

menghasilkan output sesuai;

4. Integration and system testing: Hasil proses pengkodean tadi digabungkan

seluruh unit program kemudian dilakukan pengujian untuk menguji kesalahan-

kesalahan program maupun fungsi dari sistem;

5. Operation and installation: Melakukan pengoperasian atau instalasi program.

1.6 Sistematika Penulisan

Adapun sistematika penulisan pada tugas akhir ini adalah sebagai berikut :

BAB I Menjelaskan latar belakang pengangkatan studi kasus, rumusan masalah,

tujuan, batasan masalah, sistematika penulisan, dan metode pengerjaan.

BAB II Membahas mengenai landasan teori yang digunakan sebagai referensi

dalam pembuatan laporan tugas akhir.

BAB III Membahas mengenai desain dan perancangan aplikasi berdasarkan modul.

BAB IV Membahas tentang tata cara penggunaan produk sesuai dengan modul yang

telah dibangun.

BAB V Berisi tentang penutup yang membahas kesimpulan dan saran.

5

BAB II

TINJAUAN PUSTAKA

2.1 Hypertext Preprocessor (PHP)

PHP merupakan bahasa scripting yang menyatu dengan HTML dan dijalankan pada

serverside. Artinya semua sintaks yang diberikan akan sepenuhnya dijalankan pada

server sedangkan yang dikirimkan ke browser hanya hasilnya saja.

Beberapa kelebihan PHP antara lain.

1. Bahasa pemrograman PHP adalah sebuah bahasa script yang tidak melakukan

sebuah kompilasi dalam penggunaannya.

2. Web Server yang mendukung PHP dapat ditemukan dimana-mana dari mulai

Apache, IIS, Lighttpd, hingga Xitami dengan konfigurasi yang relatif mudah.

3. Dalam sisi pengembangan lebih mudah, karena banyaknya milis-milis dan

developer yang siap membantu dalam pengembangan.

4. Dalam sisi pemahamanan, PHP adalah bahasa scripting yang paling mudah

karena memiliki referensi yang banyak.

PHP adalah bahasa open source yang dapat digunakan di berbagai mesin (Linux,

Unix, Macintosh, Windows) dan dapat dijalankan secara runtime melalui console

serta juga dapat menjalankan perintah-perintah sistem.

2.2 Cascading Style Sheets (CSS)

Cascading Style Sheets (CSS) adalah salah satu tampilan pemograman desain web

(style sheet languange) yang mengontrol format tampilan sebuah halaman web yang

ditulis dengan menggunakan bahasa penanda (markup languange). Biasanya CSS

digunakan untuk mendesain sebuah halaman HTML dan XHTML, tetapi sekarang

bahasa pemograman CSS bisa diaplikasikan untuk segala dokumen XML.

6

2.3 Javascript

Javascript adalah bahasa yang digunakan untuk membuat program yang digunakan

agar dokumen HTML yang ditampilkan dalam browser menjadi lebih interaktif,

tidak sekedar indah saja.

JavaScript digunakan untuk menjalankan perintah program di halaman awal saat

user sudah berhasil login dalam aplikasi. Penggunaan Javascript dapat meringankan

beban tampilan dalam menjalankan aplikasi (Shalahuddin dan Rosa, 2010).

Beberapa kelebihan Javascript, antara lain.

1. Ukuran file kecil

Script dari javascript memiliki ukuran yang kecil sehingga ketika web yang memiliki

javascript ditampilkan di browser maka akses tampilannya akan lebih cepat

dibandingkan ketika browser membuka suatu web yang memiliki script java. Hal ini

juga sangat berkepentingan dengan daya kerja server. Semakin kecil space suatu web

yang disimpan dalam suatu server maka daya kerja server ketika di browsing oleh

user di internet akan tidak terlalu berat, selain itu sifat javascript client side yang

tidak perlu lagi di olah oleh server ketika browser memanggil web dari sebuah

server.

2. Mudah untuk dipelajari

Javascript merupakan bahasa semi pemograman yang merupakan gabungan antara

bahasa pemograman java dengan bahasa kode HTML sehingga disebut bahasa

hybrid. Walaupun javascript merupakan turunan dari java namun javascript tidak

memiliki aturan yang serumit java.

3. Terbuka

Javascript tidak terikat oleh hardware maupun software tertentu bahkan system

operasi seperti windows maupun unix. Karena ia bersifat terbuka, maka ia dapat

dibuat maupun dibaca di semua jenis komputer.

Beberapa kekurangan Javascript, antara lain.

1. Script tidak terenkripsi

7

Karena javascript bersifat client side, maka script yang kita buat di text editor dan

telah dijadikan web di server, ketika user merequest web dari server tersebut maka

sintak javascript akan langsung ditampilkan di browser. User bisa melihat dan

menirunya dari sourcenya.

2. Kemampuan terbatas

Walaupun javascript mampu membuat bentuk web menjadi interaktif dan dinamis,

namun javascript tidak mampu membuat program aplikasi sendiri seperti java.

3. Keterbatasan Obyek

Javascript tidak mampu membuat kelas-kelas yang bisa menampung obyek-obyek

tambahan seperti java karena javascript teleh memiliki obyek yang builtin pada

sturktur bahasanya.

2.4 JQuery

JQuery adalah pustaka atau library JavaScript kecil yang menekankan pada interaksi

antara JavaScript dan HTML.

Adapun beberapa fitur yang ditawarkan oleh jQuery adalah sebagai berikut.

1. Mempermudah akses dan manipulasi ke bagian page tertentu. jQuery

menawarkan sebuah selector yang robust dan efisien untuk mengambil bagian

tertentu pada dokumen yang selanjutnya bisa dimanipulasi.

2. Mempermudah perubahan tampilan dokumen. jQuery dapat mengubah tampilan

CSS dengan mudah.

3. Merespon interaksi user dengan webpage. jQuery mempunyai cara yang sangat

elegan untuk memasukkan sebuah even ke dalam salah satu bagian dari

webpage.

4. Menambah animasi, dapat memberi animasi pada webpage kita dengan jQuery.

5. Mempermudah ajax.

8

2.5 XAMPP

XAMPP adalah salah satu paket instalasi Apache, PHP, dan MySQL secara instan

yang dapat digunakan untuk membantu proses instalasi ketiga produk tersebut, sama

seperti PHPTriad. Dilengkapi dengan control panel berbasis GUI, phpMyAdmin,

dan add-ons yang mendukung, XAMPP bisa dijadikan sebagai web server serta

mendukung PHP.

2.6 Microsoft Visual Studio 2013

Microsoft Visual Studio merupakan sebuah perangkat lunak lengkap (suite) yang

dapat digunakan untuk melakukan pengembangan aplikasi, baik itu aplikasi bisnis,

aplikasi personal, ataupun komponen aplikasinya dalam bentuk aplikasi console,

aplikasi Windows, ataupun aplikasi Web. Visual Studio mencakup kompiler, SDK,

IDE (Integrated Development Environment), dan dokumentasi (umumnya berupa

MSDN Library). Compiler yang dimasukkan ke dalam paket Visual Studio antara

lain Visual C++, Visual C#, Visual Basic, Visual Basic .NET, Visual InterDev,

Visual J++, Visual J#, Visual FoxPro, dan Visual SourceSafe.

Microsoft Visual Studio dapat digunakan untuk mengembangkan aplikasi dalam

native code (dalam bentuk bahasa mesin yang berjalan di atas Windows) ataupun

managed code (dalam bentuk Microsoft Intermediate Language di atas .NET

Framework). Selain itu, Visual Studio juga dapat digunakan untuk mengembangkan

aplikasi Silverlight, aplikasi Windows Mobile (yang berjalan di atas .NET Compact

Framework).

Visual Studio kini telah menginjak versi Visual Studio 12.0 atau dikenal dengan

sebutan Microsoft Visual Studio 2013 yang diluncurkan pada 17 Oktober 2013 yang

ditujukan untuk platform Microsoft .NET Framework 4.5.1. Versi sebelumnya

Visual Studio 2012 ditujukan untuk platform 4.5, Visual Studio 2010 ditujukan

untuk .NET Framework 4.0, Visual Studio 2008 ditujukan untuk platform .NET

Framework 3.5, Visual Studio 2005 ditujukan untuk platform .NET Framework 2.0

dan 3.0. Visual Studio 2003 ditujukan untuk .NET Framework 1.1, dan Visual

Studio 2002 ditujukan untuk .NET Framework 1.0. Versi-versi tersebut di atas kini

9

dikenal dengan sebutan Visual Studio .NET, karena memang membutuhkan

Microsoft .NET Framework. Sementara itu, sebelum muncul Visual Studio .NET,

terdapat Microsoft Visual Studio 6.0 (VS1998).

2.7 Bahasa Pemrograman C#

C# merupakan sebuah bahasa pemrograman yang berorientasi obyek yang

dikembangkan oleh Microsoft sebagai bagian dari inisiatif kerangka .NET

Framework. Bahasa pemrograman ini dibuat berbasiskan bahasa C++ yang telah

dipengaruhi oleh aspek-aspek ataupun fitur bahasa yang terdapat pada bahasa-bahasa

pemrograman lainnya seperti Java, Delphi, Visual Basic, dan lain-lain dengan

beberapa penyederhanaan.

Menurut standar ECMA-334 C# Language Specification, nama C# terdiri atas

sebuah huruf Latin C (U+0043) yang diikuti oleh tanda pagar yang menandakan

angka # (U+0023). Tanda pagar # yang digunakan memang bukan tanda kres dalam

seni musik (U+266F), dan tanda pagar # (U+0023) tersebut digunakan karena

karakter kres dalam seni musik tidak terdapat di dalam keyboard standar. Standar

European Computer Manufacturer Association (ECMA) mendaftarkan beberapa

tujuan desain dari bahasa pemrograman C#, sebagai berikut.

1. Bahasa pemrograman C# dibuat sebagai bahasa pemrograman yang bersifat

bahasa pemrograman general-purpose (untuk tujuan jamak), berorientasi objek,

modern, dan sederhana.

2. Bahasa pemrograman C# ditujukan untuk digunakan dalam mengembangkan

komponen perangkat lunak yang mampu mengambil keuntungan dari

lingkungan terdistribusi.

3. Portabilitas programmer sangatlah penting, khususnya bagi programmer yang

telah lama menggunakan bahasa pemrograman C dan C++.

4. Dukungan untuk internasionalisasi (multi-language) juga sangat penting.

5. C# ditujukan agar cocok digunakan untuk menulis program aplikasi baik dalam

sistem klien-server (hosted system) maupun sistem embedded (embedded

system), mulai dari perangkat lunak yang sangat besar yang menggunakan

10

sistem operasi yang canggih hingga kepada perangkat lunak yang sangat kecil

yang memiliki fungsi-fungsi terdedikasi. Meskipun aplikasi C# ditujukan agar

bersifat 'ekonomis' dalam hal kebutuhan pemrosesan dan memori komputer,

bahasa C# tidak ditujukan untuk bersaing secara langsung dengan kinerja dan

ukuran perangkat lunak yang dibuat dengan menggunakan bahasa pemrograman

C dan bahasa rakitan.

Bahasa C# harus mencakup pengecekan jenis (type checking) yang kuat, pengecekan

larik (array), pendeteksian terhadap percobaan terhadap penggunaan variabel-

variabel yang belum diinisialisasikan, portabilitas kode sumber, dan pengumpulan

sampah (garbage collection) secara otomatis. Pada akhir dekade 1990-an, Microsoft

membuat program Microsoft Visual J++ sebagai sebuah langkah percobaan untuk

menggunakan Java di dalam sistem operasi Windows untuk antarmuka dari

Microsoft Component Object Model (COM). Akan tetapi, akibat masalah dengan

pemegang hak cipta bahasa pemrograman Java, Sun Microsystems, Microsoft pun

menghentikan pengembangan J++, dan beralih untuk membuat pengganti J++,

kompilernya dan mesin virtualnya sendiri dengan menggunakan sebuah bahasa

pemrograman yang bersifat general-purpose.

2.8 Filezilla

FileZilla adalah program aplikasi jaringan open source yang berguna untuk transfer

file via protokol FTP di jaringan komputer atau internet. Software FileZilla dibuat

dan dikembangkan oleh Tim Kosse.

Perangkat lunak komputer ini memiliki kelebihan pada kecepatan dan

kemudahannya dalam melakukan transfer file. Jendela aplikasi terbagi menjadi dua,

satu untuk menampilkan file dan folder di komputer lokal, dan satu lagi untuk

menampilkan file dan folder di komputer server. Anda cukup melakukan drag dan

drop untuk mentransfer file dari komputer ke server jaringan/internet, atau

sebaliknya. Melalui fitur Site Manager, Anda bisa menyimpan akun dan alamat

beragam server FTP, dan menggunakannya secara cepat dan mudah. FileZilla juga

11

memungkinkan Anda melakukan koneksi ulang ke server yang terakhir Anda akses

sebelumnya, cukup dengan menekan satu tombol.

Fitur utama dari Filezilla adalah.

Site manager (Manajer situs) Mengizinkan pengguna untuk membuat daftar situs

FTP beserta data koneksinya, seperti nomor port yang akan digunakan, protokol

yang digunakan, dan apakah akan menggunakan log anonim atau normal. Untuk

log normal, nama pengguna dan kata sandinya akan disimpan. Penyimpanan kata

sandi adalah opsional.

Message log (Log pesan) Ditampilkan di bagian atas jendela. Fitur ini

menampilkan output berjenis konsol (console-type) yang menunjukkan perintah

yang dikirim oleh FileZilla dan respon yang diterima dari server.

File and folder view Ditampilkan di bawah pesan log (Message log),

menyediakan sebuah tampilan grafis antarmuka untuk FTP. Pengguna dapat

menavigasi folder serta melihat dan mengubah isinya pada komputer lokal dan

server dengan menggunakan tampilan antarmuka gaya Explorer. Pengguna dapat

men-drag dan drop file antara komputer lokal dan server.

Transfer queue (Transfer antrian) Ditampilkan di sepanjang bagian bawah

jendela, menunjukkan status real-time setiap antrian atau transfer file yang aktif.

12

BAB III

ANALISIS DAN PERANCANGAN

3.1 Sistem Kerja

Sistem informasi adalah kombinasi dari setiap unit yang dikelola user (orang),

hardware (perangkat keras), software (perangkat lunak), jaringan komputer dan

jaringan komunikasi data dan database (basis data) untuk mengumpulkan,

mengubah, dan menyebarkan informasi tentang dalam bentuk organisasi

(O’Brien:2015). Dalam arti yang sangat luas, istilah sistem informasi yang sering

digunakan merujuk kepada interaksi antara orang, proses algoritmik, data, dan

teknologi. Agar interaksi tersebut dapat berjalan dengan baik, dibutuhkan tampilan

sistem informasi yang menarik, komunikatif dan membuat user nyaman. Tampilan

sistem informasi yang menarik, komunikatif dan nyaman, dapat mempermudah

sistem untuk mendapatkan informasi dari user dan juga mempermudah user

memberikan informasi ke sistem.

Desain tampilan pada sistem informasi TADJ (Tugas Akhir Dalam Jaringan) pada

platform web menggunakan bahasa pemrograman PHP. Bahasa pemrogramman CSS

dan Javascript digunakan untuk mengolah tampilan web. Perancangan desain

menggunakan perangkat lunak Notepad++ sebagai editornya. Desain tampilan pada

sistem informasi TADJ di platform web ini meliputi halaman utama, footer dan

daftar dosen.

Sistem informasi TADJ pada platform desktop dibuat untuk mempermudah

pengguna untuk melakukan kegiatan bimbingan. Pembuatan sistem informasi

desktop ini, menggunakan Microsoft Visual Studio 2013 sebagai editornya. Bahasa

pemrogramman yang digunakan adalah bahasa pemrogramman C#. Perancangan

desain pada Microsoft Visual Studio 2015 dapat dilakukan dengan cara drag dan

drop komponen yang akan digunakan pada tampilan. Selain tampilan, database

digunakan untuk menyimpan dan mengolah data yang dibutuhkan oleh aplikasi.

Database yang digunakan untuk menyimpan dan mengolah data adalah MySQL.

13

3.2 Analisis Kebutuhan Perangkat Keras dan Perangkat Lunak

Pada spesifikasi hardware dan software untuk tugas akhir kali ini, dibutuhkan

beberapa perangkat yang memang dibutuhkan untuk menunjang proses perancangan

sistem supaya berjalan dengan maksimal. Pada tugas akhir kali ini tidak

menggunakan perangkat keras untuk menunjang proses perancangan sistem,

melainkan hanya perangkat lunak saja.

Berikut merupakan spesifikasi perangkat keras yang dibutuhkan.

1. Laptop dengan spesifikasi prosesor Intel Pentium Processor B970 (2M Cache,

2.30 GHz);

2. RAM 2 GB DDR3;

3. Harddisk 500 GB.

Berikut merupakan spesifikasi perangkat lunak yang dibutuhkan untuk

pengembangan aplikasi.

1. Sistem operasi Windows 7;

2. Visual Studio 2013;

3. XAMPP;

4. Notepad++;

5. FileZilla.

3.3 Analisis dan Perancangan Sistem

Pada perancangan sistem ini dibutuhkan analisa agar sistem berjalan dengan

maksimal.

3.3.1 Analisis Kebutuhan Sistem

Dengan melihat kembali deskripsi sistem yang akan dibuat, maka sistem yang

dibutuhkan adalah sebagai berikut.

a. Dapat menampilkan halaman utama pada Web TADJ;

b. Dapat menampilkan footer pada setiap halaman pada web TADJ;

c. Dapat menampilkan daftar dosen pada halaman daftar dosen di web

TADJ;

14

d. Sistem informasi TADJ pada platform desktop dapat dijalankan agar para

pengguna dapat melakukan bimbingan;

e. Sistem informasi TADJ pada platform desktop dapat menampilkan data

yang dibutuhkan untuk keperluan bimbingan.

Berdasarkan analisis kebutuhan sistem, sistem membutuhkan desain tampilan

pada Web TADJ dan Sistem Informasi TADJ platform desktop. Data yang

dibutuhkan oleh sistem diakses pada database MySQL.

3.3.2 Analisis Sistem

a. Web TADJ

Pada tampilan halaman utama Web TADJ akan menampilkan header berupa

logo TADJ. Selain itu, terdapat 3 button untuk menampilkan tujuan,

tahapan, dan hasil karya. Kemudian juga terdapat juga bagian untuk

menampilkan Ebook yang dapat di unduh dari web TADJ.

Tampilan footer dibuat sederhana namun tetap komunikatif dan nyaman

untuk user. Tampilan ini dibutuhkan pada hampir setiap halaman web

TADJ. Pada tampilan halaman list dosen pada web TADJ, ditampilkan list

dosen yang merupakan data dari tabel dosen. Kemudian pada halaman itu

terdapat fitur untuk edit dan hapus.

b. Sistem Informasi TADJ platform desktop.

Analisis sistem pada Aplikasi sistem informasi TADJ platform desktop

digambarkan dalam bentuk flowchart. Alur sistem dimulai dari user

menjalankan sistem informasi TADJ pada platform desktop, hingga

memilih salah satu menu yang telah disediakan pada halaman Index. Menu

yang disediakan ada dua, yaitu Login dan Kontak. Pengguna yang dapat

login ke sistem informasi TADJ pada platform dekstop hanyalah mahasiswa

dan dosen.

Jika user memilih menu Login, maka user harus memasukkan username dan

password yang benar. Jika benar maka akan muncul alert dengan pesan

15

“Login Berhasil”. Kemudian akan muncul tampilan Timeline. Jika user

memilih menu Kontak, maka akan muncul tampilam kontak.

Jika sudah melakukan login, maka akan muncul tampilan Home. Pada

halaman home, pengguna dapat melihat berita terbaru. Selanjutnya ada

tombol untuk masuk ke Moodle, Daftar Tugas Akhir, Kontak, dan Logout.

Jika pengguna menekan tombol Moodle, maka pengguna akan masuk ke

tampilan Moodle. Jika pengguna menekan tombol Daftar Tugas Akhir,

maka akan muncul daftar Tugas Akhir yang sudah terdaftar pada database

Sistem Informasi TADJ. Pada halaman Daftar Tugas Akhir, dosen dapat

melihat daftar tugas akhir, mengajukan judul tugas akhir baru dan melihat

judul tugas akhir yang telah diajukan. Sedangkan, mahasiswa hanya dapat

melihat judul tugas akhir.

Pada halaman bimbingan, dosen dapat melihat tugas akhir yang dibimbing

oleh dosen yang telah login, dan dapat melihat berkas yang telah diunggah

oleh mahasiswa. Sedangkan mahasiswa dapat melakukan bimbingan dengan

mengunggah berkas bimbingan.

16

Gambar 3.2 Alur sistem aplikasi TADJ berbasis desktop.

17

3.3.3 Fungsionalitas Perangkat

Fungsionalitas dari perangkat ini yaitu.

1. Menampilkan halaman utama dalam web TADJ;

2. Menampilkan daftar dosen pada web TADJ;

3. Menampilkan footer pada setiap halaman pada web TADJ;

4. Menjalankan sistem informasi TADJ pada platform desktop;

5. Menampilkan data yang dibutuhkan pada sistem informasi TADJ pada

platform desktop.

3.4 Kebutuhan Perangkat Keras dan Perangkat Lunak

Untuk membangun Sistem Aplikasi dibutuhkan perangkat keras dan perangkat lunak

yang mendukung dalam kegiatan operasional dengan spesifikasi sebagai berikut.

3.4.1 Spesifikasi Perangkat Lunak

Untuk mendukung berjalannya aplikasi ini dengan baik, selain dibutuhkan

spesifikasi perangkat lunak minimal juga harus didukung dengan spesifikasi

perangkat keras yang memadai hal ini dilakukan untuk mengurangi tingkat

kesalahan pada sistem. Spesifikasi perangkat lunak dapat dilihat pada Tabel 3.2

spesifikasi perangkat lunak.

Tabel 3.1 Spesifikasi perangkat lunak.

No Perangkat Lunak Minimum

CPU Server

1. Sistem Operasi, seperti Windows, Linux, atau yang lainnya.

2. Visual Studio 2013

3. XAMPP 1.8.2

4. Notepad++

18

3.5 Struktur Tabel Database

Di bawah ini adalah struktur tabel yang digunakan untuk menyimpan data dari setiap

input dan output pada halaman Daftar Dosen web TADJ.

Gambar 3.3 Tabel dosen pada web TADJ.

Di bawah ini adalah struktur tabel yang digunakan untuk menyimpan data dari setiap

input dan output pada sistem informasi TADJ pada platform desktop.

Gambar 3.4 Struktur database TADJ.

19

BAB IV

IMPLEMENTASI DAN PENGUJIAN

4.1 Implementasi Sistem

Implementasi sistem adalah tahap pengujian kelayakan di sistem yang dibuat

sehingga aplikasi yang dibuat tidak menyimpang dari perancangan sistemnya. Desain

tampilan web TADJ dibuat menggunakan Editor Notepad++ dan menggunakan

bahasa pemrogramman PHP. Aplikasi Wordpress berbasis desktop dibuat dengan

menggunakan Microsoft Visual Studio 2013 dengan C# sebagai bahasa

pemrograman aplikasi. MySQL sebagai database digunakan untuk menyimpan dan

mengolah data yang akan dibutuhkan oleh halaman web TADJ dan aplikasi

Wordpress berbasis desktop. Spesifikasi perangkat keras dan perangkat lunak untuk

pengembangan aplikasi adalah sebagai berikut.

a. Perangkat Keras.

1. Laptop dengan spesifikasi prosesor Intel Pentium Processor B970 (2M

Cache, 2.30 GHz);

2. RAM 2 GB DDR3;

3. Harddisk 500 GB.

b. Perangkat lunak.

1. Sistem Operasi Windows 7 32 bit;

2. Microsoft Visual Studio 2013;

3. XAMPP;

4. Notepad++.

4.2 Implementasi Desain Tampilan Web TADJ

Tampilan web TADJ didesain agar menarik, komunikatif dan nyaman bagi

pengguna. Untuk menampilkan data pada Tampilan Utama TADJ, data diambil dari

database ‘tadj’. Database yang digunakan adalah MySQL.

20

4.3 Implementasi Aplikasi TADJ Berbasis Desktop

Aplikasi TADJ Berbasis Desktop dibuat menggunakan Visual Studio 2013 dengan

bahasa pemrogramman C#. Aplikasi desktop ini dikhususkan untuk 2 user, yaitu

Mahasiswa dan Dosen. Mahasiswa dapat menggunakan aplikasi dekstop ini untuk

melihat daftar tugas akhir, melakukan bimbingan, dan diskusi dengan forum.

Database yang digunakan adalah MySQL. Database yang digunakan pada aplikasi ini

adalah database yang sama dengan database yang digunakan oleh website.

4.4 Pengujian

Pada tahap ini, dilakukan pengujian untuk mengetahui pencapaian dari perancangan

dan implementasi yang sudah dilakukan.

4.4.1 Halaman Utama

Berikut ini merupakan tampilan Halaman Utama yang dapat ditampilkan

secara online.

Gambar 4.5 Halaman utama TADJ.

21

Pada halaman utama web TADJ terdapat sebuah tampilan logo sebagai header

halaman utama. Kemudian dibawah logo TADJ, terdapat 3 buah button untuk

menampilkan tujuan, tahapan dan hasil karya TADJ. Di bagian bawah button

dan isinya, terdapat sebuah bagian untuk menampilkan ebook yang tersedia

dan dapat di download oleh user.

4.4.2 Halaman Footer

Tampilan footer yang digunakan pada bagian bawah web TADJ adalah sebagai

berikut.

Gambar 4.6 Footer web TADJ.

Pada footer ditampilkan kontak web dan juga social media yang terhubung

dengan web TADJ

4.4.3 Halaman Daftar Dosen

Tampilan halaman daftar dosen adalah sebagai berikut.

Gambar 4.7 List dosen pada web TADJ.

22

Pada halaman daftar dosen, akan ditampilkan daftar dosen yang sudah ada pada

database di tabel tb_dosen. Daftar dosen ditampilkan dalam bentuk tabel,

dengan dua aksi tambahan yaitu hapus dan detail.

Jika user ingin melihat detail dosen, klik button detail. Maka akan muncul

modal seperti dibawah ini.

Gambar 4.8 Detail dosen pada web TADJ.

Jika user ingin menghapus list dosen, maka klik button hapus. Kemudian akan

muncul message untuk verifikasi. Jika ingin menghapus klik yes. Maka list

dosen yang telah dipilih sebelumnya sudah dihapus.

Gambar 4.9 Pesan untuk menghapus list dosen pada web TADJ.

23

4.4.4 Aplikasi TADJ Berbasis Desktop

4.4.4.1 Halaman Index

Halaman Index adalah halaman utama yang akan muncul saat aplikasi

Wordpress berbasis desktop. Pada halaman ini, terdapat 2 button yang

dapat dipilih oleh user yaitu button Log Masuk dan Kontak. Jika user

menekan button Log Masuk, maka sistem akan menampilkan halaman

Login yang akan digunakan untuk Login ke sistem.

Gambar 4.10 Halaman utama TADJ.

4.4.4.2 Halaman Login

Halaman Login adalah halaman yang digunakan untuk login ke sistem

aplikasi TADJ.

24

Gambar 4.11 Halaman login TADJ.

Pada halaman ini, user harus memasukkan username dan password

yang benar agar bisa masuk ke dalam sistem aplikasi TADJ.

4.4.4.3 Halaman Home

Halaman Home adalah halaman utama pada aplikasi TADJ.

Gambar 4.12 Halaman home mahasiswa.

25

Gambar 4.13 Halaman home dosen.

4.4.4.4 Halaman Daftar Tugas Akhir

Halaman Daftar Tugas Akhir adalah halaman yang akan menampilkan

daftar tugas akhir. Pada halaman ini, user dapat meng klik baris pada

datagridview untuk melihat detail.

Gambar 4.14 Halaman daftar tugas akhir dosen.

26

Gambar 4.15 Halaman daftar tugas akhir mahasiswa.

4.4.4.5 Halaman Bimbingan

Halaman Bimbingan digunakan untuk melakukan tahapan bimbingan.

Gambar 4.16 Halaman bimbingan dosen.

27

Gambar 4.17 Halaman bimbingan mahasiswa.

4.4.4.6 Halaman Kontak

Halaman Kontak adalah halaman yang menampilkan kontak yang

menampilkan kontak yang dapat dihubungi.

Gambar 4.18 Halaman kontak utama.

28

Gambar 4.19 Halaman kontak dosen.

Gambar 4.20 Halaman kontak mahasiswa.

29

BAB V

PENUTUP

5.1 Kesimpulan

Berdasarkan pengujian yang telah dilakukan pada Sistem Informasi TADJ web dan

pada platform desktop, dapat disimpulkan:

1. Berdasarkan pengujian pada Gambar 4.5, Gambar 4.6, dan Gambar 4.7, Sistem

Informasi TADJ (Tugas Akhir Dalam Jaringan) dapat menampilkan halaman

utama, footer, dan daftar dosen secara online.

2. Aplikasi TADJ berbasis dekstop dapat menampilkan data-data yang dibutuhkan

untuk keperluan bimbingan, seperti berita pada Gambar 4.12, dan Gambar 4.13,

serta daftar tugas akhir pada Gambar 4.14 dan Gambar 4.15.

3. Mahasiswa dapat mengunggah berkas untuk keperluan bimbingan dan dosen

belum dapat mengunduh berkas yang telah diunggah oleh mahasiswa.

Berdasarkan Gambar 4.17, Mahasiswa dapat mengunggah berkas untuk

keperluan bimbingan. Sedangkan dosen belum dapat melihat dan mengunduh

berkas yang telah diunggah oleh mahasiswa.

5.2 Saran

Dipelukan pengembangan dan perbaikan pada sistem informasi TADJ platform

desktop agar dapat menampilkan berkas yang telah diunggah dan juga dapat

mengunduh berkas oleh mahasiswa.

30

DAFTAR PUSTAKA

[1] Elramdano.Microsoft Visual Studio. 2014.

http://elramdano.wordpress.com/2014/06/21/microsoft-visual-studio/

[2] Wardana. Menjadi Master PHP dengan Framework Codeigniter. Gramedia.

2014

[3] Santoso, Alfons Azhari. Modul Pemrograman C#. Politeknik Elektronika

Negeri Surabaya. Surabaya. 2014.

[4] Prasetio, A. (2012). Buku Pintar Pemrograman Web. Jakarta: Media Kita.

[5] Ramadhan, A. (2007). Pemrograman Web dengan HTML,CSS, dan

Javasricpt. Jakarta: Elex Media Komputindo.