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 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,
Dr. techn. Ary Setijadi P, ST,MT,
Pembimbing II,
Dr. Ir. Pranoto Hidaya R, MT,
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.
i
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.
ii
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 iii
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 iv
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
v
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
vi
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.
1
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;
2
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. Requirements analysis and definition System and software design Implementation and unit testing Integration and system testing Operation and instalation
Gambar 1.1 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; 3
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 kesalahankesalahan 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.
4
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.
5
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 6
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.
7
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 8
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 9
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 variabelvariabel 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 10
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.
11
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. 12
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; 13
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 14
“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.
15
Gambar 3.2 Alur sistem aplikasi TADJ berbasis desktop. 16
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++
17
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.
18
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.
19
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. 20
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.
21
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.
22
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.
23
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.
24
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.
25
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.
26
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.
27
Gambar 4.19 Halaman kontak dosen.
Gambar 4.20 Halaman kontak mahasiswa.
28
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.
29
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.
30
