Upload
phungmien
View
225
Download
0
Embed Size (px)
Citation preview
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.