Situs pelaporan online LAPAN di LAPAN Bandung : laporan kerja paktek

(1)

LAMPIRAN A-5

SURAT KETERANGAN HAK EKSKLUSIF

(2)

(3)

LAMPIRAN A-6

(4)

(5)

SITUS PELAPORAN ONLINE LAPAN DI LAPAN BANDUNG

KERJA PRAKTEK

Diajukan untuk Memenuhi Tugas Mata Kuliah Kerja Praktek

Program Strata Satu Jurusan Teknik Informatika Fakultas Teknik dan Ilmu Komputer

Universitas Komputer Indonesia

Disusun Oleh:

10108234 Dede Patmawati 10108224 Bagus Adi Prabowo 10108238 Dewi Jayanti

Kelas IF-5/S1/VII

JURUSAN TEKNIK INFORMATIKA FAKULTAS TEKNIK DAN ILMU KOMPUTER

(6)

(7)

ii

KATA PENGANTAR

Puji syukur kami panjatkan kepada Tuhan Yang Maha Esa yang telah memberikan rahmat serta hidayahnya kepada kami sehingga kami dapat menyelesaikan laporan kerja praktek dengan tepat waktu.

Laporan ini dapat kami selesaikan, tidak lain atas bantuan dari berbagai pihak, oleh karena itu, kami ingin mengucapkan terima kasih kepada:

Allah SWT yang telah memberikan kesehatan serta rahmatnya kepada kami, sehingga kami dapat menyelesaikan laporan ini tepat pada waktunya.

Kedua orang tua yang telah memberikan semangat kepada kami agar menyelesaikan laporan ini dengan baik.

Bapak Dr. Teguh Harjana selaku pembimbing kami di tempat kerja praktek yakni Lembaga Penerbangan dan Antariksa Nasional Bandung (LAPAN) yang telah membimbing kami dalam menyelesaikan tugas dan laporan kerja praktek.

Bapak Adam Mukharil Bachtiar S.Kom, yang telah membimbing kami dalam menyelesaikan laporan kerja praktek ini.

Pihak-pihak lain yang telah membantu kami yang tidak dapat kami sebutkan satu persatu.

Kami sangat menyadari dalam pembuatan laporan ini masih banyak terdapat kekurangan, untuk itu kami mohon saran dan kritik yang membangun agar kedepannya lebih baik lagi. Kami juga berharap agar laporan ini dapat bermanfaat bagi kita semua.

Bandung, 26 Januari 2012

(8)

74

DAFTAR PUSTAKA

Hakim, L. (2009). Trik Rahasia Master PHP. Yogyakarta: Lokomedia.

Hidayat. (2011). Menyusun Skripsi dan Tesis edisi revisi. Bandung: Informatika Bandung. Triyuliana, A. H. (2006). Tutorial Membuat Website Interaktif dengan Macromedia

(9)

1

BAB 1

PENDAHULUAN

1.1 Latar Belakang Masalah

Lembaga Penerbangan dan Antariksa Nasional, disingkat LAPAN, adalah lembaga pemerintah non departemen Indonesia yang bertugas melaksanakan tugas pemerintah di bidang penelitian dan pengembangan kedirgantaraan dan pemanfaatannya. Yang mencakup lingkup kegiatan seperti pengembangan teknologi dan pemanfaatan penginderaan jauh, pemanfaatan sains atmosfer, iklim dan antariksa kemudian pengembangan kedirgantaraan dan pengembangan kebijakan kedirgantaraan nasional.

Berdasarkan hasil wawancara dengan Bapak. Teguh Harjana selaku kepala divisi pengembangan sains dan atmosfer di temukan bahwa ada beberapa masalah diantaranya dalam hal pengumpulan laporan yang masih dilakukan secara manual yaitu dengan cara memberikan laporan langsung ke ruangan kepala bidang dengan menggunakan media penyimpanan flashdisk, hal ini berakibat pada kinerja para pegawai yang kurang optimal. Masalah berikutnya adalah kepala bidang merasa sulit untuk menyampaikan pengumuman karena harus menghubungi setiap ruangan staff yang akan diberitahukan pengumuman dengan cara menelepon ruangan tersebut, dengan demikian penyampaian pengumuman membutuhkan waktu yang cukup lama. Kemudian kepala divisi pengembangan sains dan atmosfer mengemukakan bahwa sulitnya dalam menyampaikan format laporan seperti yang beliau inginkan, karena selama ini para pegawai yang mengumpulkan laporan seringkali tidak sesuai dengan format yang diinginkan.

Berdasarkan latar belakang masalah yang ada di LAPAN khususnya divisi pengembangan sains dan atmosfer adalah dengan membangun situs pelaporan online

LAPAN.

1.2 Perumusan Masalah

Perumusan masalah yang dapat diambil dari penjelasan yang sudah diuraikan pada latar belakang dalam subbab 1.1 adalah bagaimana membangun situs pelaporan online

(10)

2 1.3 Maksud dan Tujuan

1. Maksud dari pelaksanaan kerja praktek ini adalah untuk membangun situs pelaporan online LAPAN di LAPAN Bandung, yang bertujuan untuk :

2. Situs ini dibuat untuk memudahkan user atau pegawai dalam pengumpulan laporan kepada kepala divisi.

3. Mempermudah dalam penyampaian pengumuman oleh kepala divisi kepada user

atau pegawai.

4. Mempermudah dalam penyampaian format laporan kepada user atau pegawai. 1.4 Batasan Masalah

Batasan masalah yang akan digunakan dalam membangun aplikasi ini adalah : 1. User atau pegawai dapat mengunggah laporan dan mengunduh format laporan dari

kepala divisi, serta melihat pengumuman yang dikeluarkan oleh kepala divisi. 2. User atau pegawai hanya bisa mengganti kata sandi dengan cara mengirimkan

surat elektronik kepada kepala divisi.

3. Pengiriman laporan dengan menggunakan format pdf, doc, docx, xls. 4. Ukuran maksimal dalam mengunggah laporan ini adalah 2 MB. 5. Pemodelan analisisnya adalah pemodelan terstruktur.

1.5 Metodologi Penelitian

Metode yang digunakan untuk merancang dan menyelesaikan masalah dalam pembuatan situs pelaporan online LAPAN dibagi menjadi dua, yaitu metode pengumpulan data dan metode pembangunan perangkat lunak.

Metode pengumpulan datanya adalah sebagai berikut : 1. Observasi

Yaitu melakukan tinjauan langsung ke lapangan untuk mengumpulkan data di Lembaga Penerbangan dan Antariksa Nasional khususnya di Bidang Pengembangan

Sains dan Atmosfer dan menentukan berbagai hal yang menjadi masalah di dalam instansi ini.

2. Studi literatur

Yaitu dengan melakukan studi pustaka dengan membaca buku dan modul diktat perkuliahan.

(11)

3 Yaitu melaukan diskusi dengan pihak-pihak yang lebih berpengalaman khususnya dengan kepala divisi sains dan atmosfer.

Metode pembangunan perangkat lunaknya menggunakan metode waterfall 1. System / Information Engineering and Modeling, yaitu dengan mencari kebutuhan

apa saja yang harus ada dalam membangun situs pelaporan online LAPAN.

2. Software Requirements Analysis, menganalisis user profile yang ada di LAPAN Bandung guna menciptakan antar muka yang sesuai dengan kebutuhan.

3. Design, yaitu dengan merancang sistem yang akan di bangun berdasarkan analisis sebelumnya.

4. Coding and Teting / Verification, membuat sistem yang telah dirancang dalam tahap perancangan dan mengimplementasikannya.

5. Maintenance, melakukan pengembangan pada aplikasi yang tekah dibuat supaya menjadi aplikasi yang lebih baik.

Gambar 1.1 Model Waterfall

1.6 Sistematika Penulian

Sistem penulisan yang digunakan dalam penyusunan laporan kerja praktek adalah sebagai berikut:

BAB 1 PENDAHULUAN

(12)

4 BAB 2 TINJAUAN PUSTAKA

Bab ini berisi tentang profile Lembaga Penerbangan dan Antariksa Nasional dan landasan teori pembuatan Situs Pelaporan Online LAPAN di LAPAN Bandung.

BAB 3 PEMBAHASAN

Bab ini berisi tentang hasil analisis terhadapa seluruh sistem untuk mengetahui kebutuhan apa saja yang harus dipenuhi. Mencakup juga penjelasan rancangan basis data, Diagram Konteks, DFD (Data Flow Diagram), table relasi, dan rancangan website yang akan dibuat. Bab ini berisi tentang implementasi website, hasil website, pengujian website serta kelebihan dan kekurangan website.

BAB 4 KESIMPULAN DAN SARAN

(13)

5

BAB 2

TINJAUAN PUSTAKA

2.1 Profil Tempat Kerja Praktek

Profil dari perusahaan yang akan dibahas pada bab 2adalah profil dari Lembaga Penerbangan dan Antariksa Nasional Bandung (LAPAN). Profil perusahaan meliputi sejarah perkembangan, visi dan misi, logo perusahaan, badan hukum, struktur organisasi serta tugas dan fungsi dari Lembaga Penerbangan dan Antariksa Nasional Bandung (LAPAN).

2.1.1 Sejarah Lembaga Penerbangan dan Antariksa Nasional Bandung

Pada tanggal 31 Mei 1962, dibentuk Panitia Astronautika oleh Menteri Pertama RI, Ir. Juanda (selaku Ketua Dewan Penerbangan RI) dan R.J. Salatun (selaku Sekretaris Dewan Penerbangan RI). Tanggal 22 September 1962, terbentuknya Proyek Roket Ilmiah dan Militer Awal (PRIMA) afiliasi AURI dan ITB. Berhasil membuat dan meluncurkan dua roket seri Kartika berikut telemetrinya. Tanggal 27 November1963, Lembaga Penerbangan dan Antariksa Nasional (LAPAN) dibentuk dengan keputusan Presiden Nomor 236 Tahun 1963 tentang LAPAN.

Penyempurnaan organisasi LAPAN melalui :

1. Keputusan Presiden (Keppres) Nomor 18 Tahun 1974, 2. Keppres Nomor 33 Tahun 1988,

3. Keppres Nomor 33 Tahun 1988 jo Keppres Nomor 24 Tahun 1994, 4. Keppres Nomor 132 Tahun 1998,

5. Keppres Nomor 166 Tahun 2000 sebagaimana diubah beberapa kali yang terakhir dengan Keppres Nomor 62 Tahun 2001,

6. Keppres Nomor 178 Tahun 2000 sebagaimana telah diubah beberapa kali yang terakhir dengan Keppres 60 Tahun 2001,

7. Keppres Nomor 103 Tahun 2001. Lingkup Kegiatan :

1. Pengembangan teknologi dan pemanfaatan penginderaan jauh. 2. Pemanfaatan sains atmosfer, iklim dan antariksa.

(14)

6 4. Pengembangan kebijakan kedirgantaraan nasional.

2.1.2 Visi dan Misi Lembaga Penerbangan dan Antariksa Nasional Bandung

1. Visi

Menjadi pusat unggulan yang handal dalam penelitian dan pengembangan bidang sains atmosfer dan iklim serta pemanfaatannya.

2. Misi

a. Meningkatkan penelitian dan pembangunan dalam bidang sains atmosfer dan iklim.

b. Meningkatkan pemanfaatan sains atmosfer dan iklim.

c. Meningkatkan penyediaan, pemasyarakatan dan pelayanan data dan informasi dalam bidang sains atmosfer dan iklim.

d. Mengembangkan sumber daya manusia, sarana dan prasarana penelitian, pengembangan dan pemanfaatannya.

2.1.3 Logo Lembaga Penerbangan dan Antariksa Nasional

Lembaga Penerbangan dan Antariksa Nasional adalah lembaga Negara yang bertugas melaksanakan tugas pemerintah di bidang penelitian dan pengembangan kedirgantaraan dan pemanfaatannya, dibawah ini adalah logo dari Lembaga Penerbanagan dan Antariksa Nasional :

Gambar 2.1 Logo Perusahaan

(15)

7 2.1.5 Struktur Organisasi dan Job Description LAPAN

Pusat Sains dan Teknologi Atmosfer mempunyai tugas melaksanakan penelitian dan pengembangan sains dan teknologi atmosfer serta pemanfaatannya. Dalam melaksanakan tugas, pusat sains dan teknologi atmosfer menyelenggarakan fungsi :

1. Penelitian dan pengembangan pemodelan dinamika atmosfer serta pemanfaatannya.

2. Penelitian dan pengembangan komposisi atmosfer serta pemanfaatannya.

3. Penelitian dan pengembangan di bidang teknologi atmosfer, pengelolaan data serta pengamatan atmosfer.

4. Pembinaan teknis di bidang sains dan teknologi atmosfer. Pusat sains dan teknologi atmosfer terdiri atas :

1. Bidang Pemodelan Atmosfer 2. Bidang Komposisi Atmosfer 3. Bidang Teknologi Atmosfer 4. Subbagian Tatausaha

5. Kelompok Jabatan Fungsional

Struktur organisasi dari Lembaga Penerbangan dan Antariksa Nasional Bandung dapat dilihat pada Gambar 2.2 Struktur Organisasi

(16)

8 Tiap-tiap bagian mempunyai tugas masing-masing antara lain :

1. Bidang Pemodelan Atmosfer mempunyai tugas melaksanakan penelitian dan pengembangan pemodelan dinamika atmosfer serta pemanfaatannya, dan menyiapkan bahan kerjasama teknis dibidangnya.

2. Bidang Komposisi Atmosfer mempunyai tugas melaksanakan penelitian dan pengembangan komposisi atmosfer serta pemanfaatannya, dan penyiapan bahan pelaksanaan teknis dibidangnya.

3. Bidang teknologi Atmosfer mempunyai tugas melaksanakan penelitian dan pengembangan dibidang teknologi atmosfer, pengelolaan data serta pengamatan atmosfer, dan penyiapan bahan pelaksanaan kerjasama teknis dibidangnya.

4. Subbagian Tatausaha mempunyai tugas melakukan urusan keuangan, kepegawaian, tata usaha, perlengkapan dan rumah tangga.

5. Dalam melaksanakan tugas, Subbagian Tatausaha secara teknis fungsional berada dibawah dan bertanggung jawab kepada Pusat Sains dan Teknologi Atmosfer dan secara administratif dikoordinasikan oleh kepala Bidang Pemodelan Atmosfer. 2.2 Landasan Teori

Dalam pengembangan Situs Pelaporan Online LAPAN di Bandung terdapat beberapa landasan teori yang mendukung diantaranya aplikasi berbasis web, Macromedia Dreamweaver 8 dan PHP My Admin.

2.2.1 Aplikasi Berbasis Web

Aplikasi berbasis web adalah aplikasi yang dapat diakses melalui jaringan LAN atau internet. Aplikasi berbasis web dibangun diatas HTTP. HTTP merupakan salah satu

protocol yang berjalan diatas TCP/IP (protokol internet). HTTP adalah protocol yang

(17)

9

Gambar 2.3 Aplikasi Berbasis Web

2.2.1.1 Web Browser

Web browser digunakan untuk memperoleh informasi dengan format hypertext.

Web browser akan mengirimkan request ke web server, dan menampilkan hasilnya ke pengguna. Selain itu web browser juga akan mengirimkan form ke web server untuk diproses. Contoh dari web browser adalah Mozilla Firefox, NCSA Mosaic, Netscape Navigator, MacWeb, IE, Opera, Conqueror dan lain-lain.

2.2.1.2 Web Server

Web server memberikan jawaban/response dari permintaan/request web browser.

Web server juga dapat memproses form yang dikirimkan oleh web browser. Contoh dari Web server adalah Wamp Server, Apache, NCSA HTTPD(Unix), Webstar(Mac), IIS/PWS (Windows).

2.2.1.3 Informasi

Antarmuka web bisa mengirimkan informasi dalam bentuk text terformat (HTML), grafik/animasi, dan suara. HTTP mengirimkan informasi dengan format HTML (Hypertext Markup Language). HTML sendiri merupakan format sederhana dari standar SGML. Selain itu HTTP juga dapat mengirimkan informasi dalam bentuk lain.

Aplikasi web terletak pada server, yang merupakan perpanjangan dari webserver

(18)

10 Aplikasi berbasis web dapat juga dijadikan sebagai script oleh prosessor semacam ASP atau PHP. Script dan program tersebut akan memberikan informasi dalam format

HTML ke webserver untuk diteruskan ke browser dan juga memproses informasi dari

webserver, misalnya menyimpan data ke basis data. Perlu disadari bahwa aplikasi berbasis

web kebanyakan menggunakan database (database-driven application). Contoh aplikasi web

yang sering digunakan adalah webmail yaitu aplikasi web untuk membaca dan mengirimkan

email lewat browser.

2.2.1.4 Keunggulan Aplikasi Berbasis Web

Keunggulan-keunggulan yang terdapat dari aplikasi berbasis web adalah sebagai berikut:

1. Klien yang kecil, tidak membutuhkan resource yang besar untuk menjalankan aplikasinya. Cukup dengan komputer yang sanggup menjalankan web browser. 2. Kemudahan untuk deployment atau penyebaran aplikasi.

3. Cross platform, karena menggunakan standart umum HTTP/HTML. Bisa dijalankan dengan berbagaiu macam sistem operasi.

4. Learning curve, khususnya yang telah mengenal web sebelumnya. Biasanya aplikasi web dirancang secara intuitif.

5. Kemudahan untuk digabungkan dengan layanan internet lainnya, misalnya email,

ftp, dan lain-lain.

6. Banyak tersedia modul/source untuk komponen pengembangan aplikasi. 7. Mudah diakses darimana saja, dari intranet maupun internet.

8. Dengan web yang dibangun, dapat menggunakan modul-modul yang telah dikembangkan sebelumnya. Terdapat komunitas yang kuat untuk mensupport pengembangan aplikasi opensource misalnya Sourceforge.net

2.2.1.5 Kelemahan Aplikasi Berbasis Web

Kelemahan-kelemahan yang terdapat dari aplikasi berbasis web adalah sebagai berikut:

1. User Interface tidak sekaya aplikasi platform lain, karena keterbatasan standart HTML. Beberapa bisa ditingkatkan dengan javascript tetapi menimbulkan masalah

cross browser.

(19)

11 3. Banyak faktor yang memperngaruhi performansi aplikasi. Seperti jaringan, server

dan lain-lain.

4. Semua proses dilakukan deserver, ini akan memberatkan server jika proses yang dilakukan terlalu banyak.

5. Sangat tergantung pada jaringan. 2.2.2 Sejarah Adobe Dreamweaver CS5

Adobe Dreamweaver merupakan program penyunting halaman web keluaran

Adobe System yang dulu dikenal sebagai Macromedia Dremweaver keluaran Macromedia. Versi terakhir Macromedia Dreamweaver sebelum Macromedia di beli oleh Adobe System

yaitu versi 8. Versi terakhir Dreamweaver keluaran Adobe System adalah versi 11 yang ada di dalam Adobe Creative Suite 5 (sering disinggkat Adobe CS5).

2.2.3 Pengertian dan Keunggulan Adobe Dreamweaver CS5

Adobe Dreamweaver adalah sebuah HTML editor professional untuk mendesain secara visual dan mengelola suatu web. Keunggulan Dreamweaver CS5 dibandingkan editor

lainnya adalah memungkinkan pengguna berkreasi secara bebas dan cepat pada suatu lingkungan visual, tanpa menulis sebaris pun kode atau tag HTMLnya, dan setelah itu kita dapat menguji tampilan halaman web kita langsung di browser yang kita inginkan.

(20)

12 2.2.4 Kegunaan Adobe Dreamweaver CS5

Dapat mendesain secara visual dan mengelola website dan halaman web. Konsep WYSYWIG (What You See IS What You Get) HTML (HyperText Mark-up Language) akan memberikan anda membuat membuat halaman web dan websites secara mudah dan cepat. 2.2.5 Aplikasi Pendukung

2.2.5.1 Adobe Photoshop CS2

Aplikasi ini berperan dalam merancang tampilan web meliputi tombol, header,

(21)

BAB 3

PEMBAHASAN

3.1 Analisis Sistem 3.1.1 Analisis Masalah

Setelah melakukan pengamatan pada sistem yang sedang berjalan diketahui pengumpulan laporan dan pemberian pengumuman yang ada saat ini menggunakan pelaporan dan pengumuman offline pelaporan dan pengumuman offline yang memiliki beberapa masalah yang dihadapi, yakni sebagai berikut:

1. Pengumpulan laporan kepada kepala bidang dengan menggunakan flashdisk atau datang langsung ke ruangan kepala bidang.

2. Kepala divisi memberikan pengumuman dengan cara menelepon setiap pegawai. 3.1.2 Analisis Sitem yang Berjalan

Skenario FlowMap Dalam Pemberian Pengumuman

1. Kepala divisi dapat memberikan pengumuman melalui FTP kepada anggota divisi. 2. Apabila jaringan LAN sedang tidak berjalan dengan baik kepala divisi dapat

memberikan pengumuman melalui email kepada anggota divisi.

3. Apabila sedang tidak terhubung dengan internet kepala divisi dapat memberikan pengumuman secara langsung kepada anggota divisi.

Skenario FlowMap Dalam Pengumpulan Laporan

1. Anggota divisi dapat mengumpulkan laporan melalui FTP kepada kepala divisi. 2. Apabila jaringan LAN sedang tidak berjalan dengan baik anggota divisi dapat

mengumpulkan laporan melalui email kepada kepala divisi.

(22)

Pemberian Pengumuman

Anggota Divisi Kepala Divisi

Pengumuman

Input Pengumuman

Pengumum an

Cek FTP

Pengum uman melalui

Telp

pengumum an

pengumuman Tidak

Ya

(23)

Pengumpulan Laporan

Anggota Divisi Kepala Divisi

Laporan

Upload Laporan

Laporan

Cek LAN

Mengum pulkan laporan langsun

g Laporan

Laporan

Tidak Ya

Gambar 3.2 flow map pengumpulan laporan

3.1.3 Analisis Kebutuhan Non Fungsional

(24)

3.1.3.1 Analisis Kebutuhan Perangkat Keras

Dalam membangun aplikasi situs pelaporan online LAPAN di LAPAN Bandung diperlukan alat pendukung perangkat keras (hardware) untuk memperlancar proses perancangan dan implementasi terlihat pada Tabel 3.1 Analisis Kebutuhan Perangkat Keras

No Perangkat Keras Spesifikasi

1 Prosessor Intel Core i5

2 Monitor LCD Samsung

3 Harddisk 160GB

4 RAM 1GB

5 Keyboard Logitech

6 Mouse Logitech

7 Printer HP

Tabel 3.1 Analisis Kebutuhan Perangkat Keras

3.1.3.2 Analisis Kebutuhan Perangkat Lunak

Dalam pembangunan aplikasi situs pelaporan online LAPAN di LAPAN Bandung juga diperlukan beberapa perangkat lunak (software) pendukung yang dapat mengoptimalkan implementasi dari sistem yang akan dibangun, diantaranya adalah sebagai berikut:

1. Sistem Operasi Windows 7

2. Wamp Server

3. Adobe DreamWeaver CS5

4. Browser Internet Explorer, Mozilla Firefox, Google Chrome

3.1.3.3 Analisis Kebutuhan Perangkat Pikir

Analisis kebutuhan perangkat pikir merupakan analisis terhadap pengguna yang akan menggunakan aplikasi yang telah dibangun. Perangkat keras dan perangkat lunak yang ada tidak akan bergguna apabila tidak ada pengguna yang mengoperasikannya. Adapun kebutuhan perangkat pikir yang terlibat dalam pengembangan situs pelaporan online LAPAN terbagi menjadi dua yaitu pegawai/SDM yang berada di instansi(lihat tabel 3.3) dan pegawai/SDM yang dibutuhkan untuk sistem baru(lihat tabel 3.4)

Pegawai yang ada di LAPAN Bandung

No Jenis SDM Tanggung

Jawab

Tingkat

Pendidikan

Tingkat Keterampilan Pelatihan

yang pernah

(25)

1. Kepala Bidang S3 Menguasai Ilmu

Telekomunikasi

-

2. Staf / Karyawan Min D3 Mengerti Ilmu

Telekomunikasi

-

Tabel 3.2 Pegawai/SDM yang berada di instansi

Pegawai yang di butuhkan untuk sistem baru

No Jabatan Dalam

Kantor

SDM Tanggung Jawab Keterampilan Jenis Pelatihan

yang diberikan

1. Admin Pemilik Mengelola situs

pelaporan online

LAPAN

- Mampu menggunakan

aplikasi web

- Mampu menggunakan

DBMS

-

2. User Staf Menjalankan situs

pelaporan online

LAPAN

- Mampu menggunakan

aplikasi web

-

Tabel 3.3 Pegawai/SDM yang dibutuhkan untuk sistem baru

3.1.4 Analisis Data 3.1.4.1 Skema Relasi

Entitas Relation Diagram (ERD)

(26)

Gambar 3.3 Entitas Relation Diagram

3.1.5 Analisis Kebutuhan Fungsional 3.1.5.1 Diagram Konteks

Diagram konteks atau disebut juga dengan model sistem fundamental merepresentasikan seluruh elemen sistem sebagai sebuah bubble tunggal dengan data output yang ditunjukan dengan anak panah masuk dan keluar secara berurutan. Diagram konteks menjelaskan mengenai sistem secara umum yang terdiri dari tiga entitas, yaitu pengunjung,

staff, admin.

3.1.5.2 Data Flow Diagram (DFD) Level 0

Situs Pelaporan Online LAPAN 0

User

Data login

Data upload Info data login

Info data upload Data status Info data status Data Pengumuman Info data pengumuman

Admin Info data pengumuman

Info data status Data login Info data login Data pengumuman

Data upload Info data upload

Data status

(27)

3.1.5.3 Data Flow Diagram (DFD) Level 1 Login Pengolahan data master 1.0 2.0 login status upload pengumuman

user _{Data login} _{Data login} admin

Data login Data login

Info data login Info data login

Data status

Data status Data pengumuman Data pengumuman

Data upload Data upload

Data status Data pengumuman

Data upload Info data status

Info data pengumuman Info data upload

Data status Data pengumuman

Data upload

Info data status Info data pengumuman

Info data upload

Gambar 3.5 Data Flow Diagram Level 1

3.1.5.4 Data Flow Diagram (DFD) Level 2 Proses Login

Verivikasi username Verivikasi password login user admin 1.1 1.2 Data username

Info data username Data username

Info data username

Data username Data username

Data password Info data password Data password

Info data password

Data password

Gambar 3.6 Data Flow Diagram Level 2 Proses Login

Proses Identifikasi

(28)

Nama Verifikasi Username Tujuan Memverifikasi Username Deskripsi Proses memverifikasi username

Aktor Sistem

Tabel 3.4 Proses Identifikasi 1.1

3.1.5.5 Data Flow Diagram (DFD) Level 2 Admin

Edit profile Profile List status List upload List laporan pengumuman Download laporan Create new account Admin 2.1 2.2 2.3 2.4 2.5 2.6 2.7 2.8 List user 2.9 login status upload pengumuman Data login

Info data login

Data login Info data login

Data login Data login Data login Data login Data login Data login Data upload Data upload Data upload

Info data upload

Data pengumuman

Data pengumuman Data pengumuman

Info data status Info data pengumuman

Data status

Data upload Data upload Data upload

Info data upload

Data pengumuman Data pengumuman

Data pengumuman Info data pengumuman

Data status Data status Data status

Info data status

(29)

Proses Identifikasi

Nomor 2.1

Nama Proses Profile Admin

Tujuan Admin Memilih Profile Admin Deskripsi Proses menampilkan profile admin Aktor Admin

Proses Identifikasi

Nomor 2.2

Nama Proses Edit Profile Admin

Tujuan Admin Memilih Edit Profile Admin Deskripsi Proses mengedit profile admin Aktor Admin

Proses Identifikasi

Nomor 2.3

Nama Proses Create New Account

Tujuan Admin Memilih Create New Account Deskripsi Proses membuat account baru untuk user Aktor Admin

Proses Identifikasi

Nomor 2.4

Nama Proses download laporan

Tujuan Admin Memilih download laporan Deskripsi Proses mendownload laporan Aktor Admin

(30)

Proses Identifikasi

Nomor 2.5

Nama Proses create pengumuman

[image:30.595.89.508.71.612.2]

Tujuan Admin Memilih creat pengumuman Deskripsi Proses mengupload pengumuman Aktor Admin

Proses Identifikasi

Nomor 2.6

Nama Proses list laporan

Tujuan Admin Memilih list laporan

Deskripsi Proses menampilkan list laporan user Aktor Admin

Proses Identifikasi

Nomor 2.7

Nama Proses list upload

Tujuan Admin Memilih list upload

Deskripsi Proses menampilkan list upload pengumuman Aktor Admin

Proses Identifikasi

Nomor 2.8

Nama Proses list status

Tujuan Admin Memilih list status Deskripsi Proses menampilkan list status Aktor Admin

Proses Identifikasi

(31)

Nama Proses list user

Tujuan Admin Memilih list user Deskripsi Proses menampilkan list user Aktor Admin

(32)

3.1.5.6 Data Flow Diagram (DFD) Level 2 User Profile Upload laporan List laporan home download Edit profile User login upload pengumuman status 2.10 2.11 2.12 2.13 2.14 2.15 Data login

Info data login

Data upload Info data upload

Info data upload Data upload Data upload Data upload Data upload Data upload Data pengumuman

Info data pengumuman Data pengumuman_{Data pengumuman}

[image:32.595.81.510.100.634.2]

Info data status Data status Data status Data status Data login Data login Data login Data login

(33)

Proses Identifikasi

Nomor 2.10

Nama Proses Profile Tujuan User Memilih Profile

[image:33.595.98.502.63.799.2]

Deskripsi Proses menampilkan profile user Aktor User

Proses Identifikasi

Nomor 2.11

[image:33.595.92.503.75.396.2]

Nama Proses Edit Profile Tujuan User Memilih Edit Profile Deskripsi Proses menedit profile user Aktor User

Proses Identifikasi

Nomor 2.12

Nama Proses Upload Laporan Tujuan User Memilih upload Deskripsi Proses mengupload laporan Aktor User

Proses Identifikasi

Nomor 2.13

Nama Proses List Laporan Tujuan User Memilih list laporan Deskripsi Proses menampilkan list laporan Aktor User

Proses Identifikasi

(34)

[image:34.595.90.506.71.345.2]

Nama Proses download pengumuman Tujuan User Memilih download pengumuman Deskripsi Proses mendownload pengumuman Aktor User

Proses Identifikasi

Nomor 2.15

Nama Proses Home

Tujuan User Memilih Home Deskripsi Proses menampilkan Home Aktor User

(35)

3.1.5.7 Data Flow Diagram (DFD) Level 3 Admin View User Delete User View Profile Admin Admin login_admin login upload status pengumuman 2.1.1 Update Profile Admin 2.2.1 Update Password Admin 2.2.2 Insert User 2.3.1 View Laporan 2.4.1 Search Laporan 2.4.2 Download Laporan 2.4.3 Insert Pengumuma n 2.5.1 Insert Attach Pengumuma n 2.5.2 View Laporan 2.6.1 Search Laporan 2.6.2 View Attach Pengumuma n 2.7.1 Delete Pengumuma n 2.9.2 View Pengumuma n 2.9.1 2.8.2 2.8.1 Delete Attach Pengumuma n 2.7.2

Info Data login Admin

Data Login Admin

Info Data login Data Login

Info Data Upload

Info Data Upload Data Upload

Info Data Pengumuman

Data Pengumuman

Info Data Upload

Data Upload Data Status

Info Data Status

Data Upload

Info Data Upload

Data Pengumuman Info Data Pengumuman Data Pengumuman Info Data Pengumuman Data Status Info Data Status

Data StatusInfo Data Status

Data login

Info Data Login

Data login

Info Data Login Info Data login Admin

Data Login Admin

Info Data login Admin Data Login Admin

Info Data login

Data Login

Info Data Upload

Data Upload

Info Data Upload Data Upload Info Data Status

Data Status

Data Pengumuman

Info Data Pengumuman Data Pengumuman

Info Data Status Data Status

Info Data Login Data Login

[image:35.595.102.489.97.658.2]

(36)

3.1.5.8 Data Flow Diagram (DFD) Level 3 User View Profile 2.10.1 Update Profile 2.11.1 Insert Laporan 2.12.1 View Laporan 2.13.1 View Attach Pengumuman 2.14.1 Download Attach Pengumuman 2.14.2 User login upload pengumuman status View Pengumuman 2.15.1 Data Login Info Data Login

Data Upload Info Data Upload

Info Data Status Data Status Data Upload

Info Data Upload Info Data Upload Data Upload Info Data Login

Data Login Info Data Login Data Login

Data Pengumuman

Info Data Status Data Status

(37)

Proses Identifikasi

Nomor 2.10.1

Nama Proses View Profile Tujuan User Memilih Profile

Deskripsi Proses menampilkan profile user Aktor User

Tabel 3.20 Proses Identifikasi 2.10.1

Proses Identifikasi

Nomor 2.11.1

Nama Proses Update Profile

Tujuan User Memilih Update Profile Deskripsi Proses mengupdate profile user Aktor User

Proses Identifikasi

Nomor 2.12.1

Nama Proses Insert Laporan

Tujuan User Memilih Upload Laporan Deskripsi Proses memasukan data upload Aktor User

Proses Identifikasi

Nomor 2.13.1

Nama Proses View Laporan

Tujuan User Memilih View Laporan

Deskripsi Proses menampilkan Laporan yang telah di upload Aktor User

(38)

Proses Identifikasi

Nomor 2.14.1

Nama Proses View Attach Pengumuman

[image:38.595.113.502.58.774.2]

Tujuan User Memilih View Attach Pengumuman Deskripsi Proses menampilkan attach pengumuman Aktor User

Proses Identifikasi

Nomor 2.14.2

Nama Proses Download Attach Pengumuman

Tujuan User Memilih Download Attach Pengumuman Deskripsi Proses mendownload Attach Pengumuman Aktor User

Proses Identifikasi

Nomor 2.15.1

Nama Proses View Pengumuman

Tujuan User Memilih View Pengumuman Deskripsi Proses menampilkan List Pengumuman Aktor User

3.1.5.9 Kamus Data

Nama Data Login

Where used/how used Admin & User - proses 1.0

Deskripsi Berisi data admin dan user yang akan menggunakan

system yang akan di bangun. Struktur Data

Nama Pengguna Kata Kunci

[A-Z]|[0-9] [A-Z]|[0-9]

Nama Data Edit Profle Admin

Where used/how used Admin â proses 2.2

(39)

terdapat di dalam database dblapan.

Struktur Data Nama_lengkap+jabatan+alamat+no_telp+email+NIP Nama_lengkap Jabatan Alamat No_telp Email NIP [A-Z]|[0-9] [A-Z]|[0-9] [A-Z]|[0-9] [A-Z]|[0-9] [A-Z]|[0-9] [0-9]

Nama Data Edit Profile User

Where used/how used User â proses 2.11

Deskripsi Berisi data user yang akan melakukan edit profil yang terdapat di dalam database dblapan.

Struktur Data Nama_lengkap+jabatan+alamat+no_telp+email+NIP Nama_lengkap Jabatan Alamat No_telp Email NIP [A-Z]|[0-9] [A-Z]|[0-9] [A-Z]|[0-9] [A-Z]|[0-9] [A-Z]|[0-9] [0-9]

Nama Data creat new account

Deskripsi Berisi data Admin yang akan membuat user baru yang akan bisa menggunakan situs pelaporan online LAPAN Struktur Data Nama_lengkap+jabatan+alamat+no_telp+email+NIP Nama_lengkap Jabatan Alamat No_telp Email NIP [A-Z]|[0-9] [A-Z]|[0-9] [A-Z]|[0-9] [A-Z]|[0-9] [A-Z]|[0-9] [0-9]

Nama Data Upload Laporan

Deskripsi Berisi data laporan yang akan di upload oleh user. Struktur Data Bulan+tahun+judul_laporan

Bulan Tahun Judul_laporan [A-Z]|[0-9] Year [A-Z]|[0-9]

Nama Data list laporan

Deskripsi Berisi data laporan yang telah diupload oleh user. Struktur Data Tanggal+bulan+judul_laporan+nama

Tanggal bulan

(40)

judul_laporan nama

[A-Z]|[0-9] [A-Z]|[0-9]

Nama Data download pengumuman

Deskripsi Berisi data pengumuman yang akan didownload oleh user.

Struktur Data Waktu+judul_pengumuman waktu

Judul_pengumuman

DateTime [A-Z]|[0-9]

Nama Data download laporan

Deskripsi Admin dapat mendownload laporan yang telah diupload oleh user yang tersimpan di dalam database.

Struktur Data Tanggal+bulan+judul_laporan+nama Tanggal Bulan Judul_laporan nama DateTime [A-Z]|[0-9] [A-Z]|[0-9] [A-Z]|[0-9]

Nama Data list laporan

Deskripsi Berisi data yang telah diupload ole user dan tersimpan di database.

Struktur Data Tanggal+bulan+judul_laporan+nama Tanggal Bulan Judul_laporan nama DateTime [A-Z]|[0-9] [A-Z]|[0-9] [A-Z]|[0-9]

Nama Data list user

Deskripsi Berisi data jumlah user yang terdaftar sebagai user di situs pelaporan online LAPAN dan bisa juga menghapus user dari sini.

Struktur Data NIP+nama+jabatan+status NIP Nama Jabatan status [0-9] [A-Z]|[0-9] [A-Z]|[0-9] [A-Z]|[0-9]

Tabel 3.27 Kamus Data

3.2 Perancangan Sistem

(41)

perancangan sistem yang dimaksudkan untuk menggambarkan perbedaan antara sistem yang sedang berjalan dengan sistem yang diusulkan.

Langkah-langkah yang dilakukan dalam tahapan perancangan ini adalah sebagai berikut:

1. Perancangan Data (Skema Relasi, Diagram Relasi, Struktur Tabel)

2. Perancangan Arsitektur Perangkat Lunak (Perancangan Struktur Menu, Perancangan Antarmuka, Perancangan Pesan)

3. Perancangan Jaringan Semantik 4. Perancangan Prosedural

3.2.1 Perancangan Data

Perancangan data dalam aplikasi yang kami bangun berguna untuk memetakan model yang berbentuk konsep menjadi model basis data yang akan dipakai.

3.2.1.1 Skema Relasi

Skema relasi adalah tabel-tabel yang akan dibangun pada aplikasi. Berikut adalah skema relasi situs pelaporan online LAPAN Bandung

1. Login :{IdLogin, Username, Password, repassword, nama_lengkap,

jabatan, alamat, no_telp, email, nip, jenis}

2. Upload :{idlaporan, idlogin, nama_lengkap, nama, judul, waktu, bulan,

tahun}

3. Pengumuman :{idpengumuman, idlogin, nama_lengkap, nama, judul, waktu}

4. Status :{idstatus, idlogin, isi, waktu}

3.2.1.2 Diagram Relasi

(42)

login PK idlogin username password repassword nama_lengkap jabatan alamat no_telp emai nip jenis status PK idstatus isi waktu FK1 idlogin pengumuman PK idpengumuman nama_lengkap nama judul waktu FK1 idlogin upload PK idlaporan nama_lengkap nama judul waktu bulan tahun FK1 idlogin

Gambar 3.11 Diagram Relasi

3.2.1.3 Struktur Tabel

Dalam penggambaran diagram-diagram sebelumnya, disebutkan bahwa sistem memiliki lima tabel, yaitu tabel login, tabel status, tabel upload, dan tabel pengumuman. Struktur tabel dalam sistem ini adalah sebagai berikut :

1. Tabel Login

Tabel login yang akan dibangun pada database ini akan berisi idlogin user, username user, password, repassword, nama lengkap user, jabatan user, alamat user, nomor telepon user, email user, serta nip user. Yang akan diterangkan secara jelas melalui struktur tabel berikut ini:

No Nama Field Tipe

Data Ukuran Kunci Keterangan

1 IdLogin Int 11 Primary key Not Null

2 Username Varchar 50 Not Null

3 Password Varchar 50 Not Null

4 Repassword Varchar 50 Not Null

5 nama_lengkap Varchar 50 Not Null

(43)

7 alamat Varchar 500 Not Null

8 no_telp Varchar 15 Not Null

9 email Varchar 50 Not Null

10 Nip Int 30 Not Null

11 Jenis Varchar 20 Not Null

Tabel 3.28 Tabel Login

2. Tabel Status

Tabel status yang akan dibangun pada database ini akan berisi idstatus, idlogin yang menjadi foreign key yang mengacu pada tabel login, isi status, waktu pembuatan status. Yang akan diterangkan secara jelas melalui struktur tabel berikut ini:

No Nama Field Tipe

1 idstatus Int 11 Primary key Not Null

2 idlogin Int 11

Foreign key

reference tabel login

(idlogin)

Not Null

3 Isi Varchar 500 Not Null

4 waktu datetime Not Null

Tabel 3.29 Tabel Status

3. Tabel Upload

Tabel upload yang akan dibangun pada database ini akan berisi id laporan yang diunggah oleh user, nama lengkap user yang menggunggah laporan, nama file laporan yang diunggah oleh user, judul laporan yang diunggah, waktu user

menggunggah laporan, bulan sebelum user menggunggah laporan, tahun user

menggunggah laporan. Yang akan diterangkan secara jelas melalui struktur tabel berikut ini:

No Nama Field Tipe

1 idlaporan Int 11 Primary key Not Null

3 Nama Varchar 50 Not Null

(44)

5 Waktu Date Not Null

6 Bulan Varchar 12 Not Null

7 Tahun year 4 Not Null

8 idlogin Int 11

Foreign key

reference tabel login

(idlogin)

Not Null

Tabel 3.30 Tabel Upload Laporan

4. Tabel Pengumuman

Tabel pengumuman yang akan dibangun pada database ini akan berisi id pengumuman yang diberikan admin, nama lengkap admin yang memberikan pengumuman, nama file pengumuman yang diberikan admin, waktu admin

menggunggah pengumuman kepada user. Yang akan diterangkan secara jelas melalui struktur tabel berikut ini:

No Nama Field Tipe

1 idpengumuman Int 11 Primary key Not Null

3 Nama Varchar 50 Not Null

4 Judul Varchar 50 Not Null

5 Waktu datetime Not Null

6 idlogin Int 11 Foreign key reference

tabel login (idlogin) Not Null

Tabel 3.31 Tabel Pengumuman

3.2.2 Perancangan Arsitektur Perangkat Lunak

Perancangan arsitektur perangkat lunak pada situs pelaporan online LAPAN Bandung ini terdiri dari struktur menu yang akan dijelaskan rinci dari menu pengguna yang akan menggunakan aplikasi ini.

3.2.2.1 Perancangan Struktur Menu

Perancangan Struktur Menu yang akan kami bangun di rancang secara

web/network. Adapun perancangan struktur menu yang terdapat di dalam situs pelaporan

(45)

1. Perancangan Struktur Menu User

Perancangan struktur menu user yang akan dibuat dimulai dari login, lalu masuk ke home dan dapat masuk ke profile, edit profile,

upload laporan, list laporan, download serta logout secara langsung.

Login

Home Profile Edit Profile Upload Laporan List Laporan Download

[image:45.842.109.737.141.487.2]

Logout

(46)

2. Perancangan Struktur Menu Admin

Perancangan struktur menu admin yang akan dibuat dimulai dari login, lalu masuk ke home dan dapat masuk ke profile, edit profile,

create new account, download laporan, create pengumuman, list laporan, list status, list user, serta logout secara langsung.

Login

Home Profile Edit Profile Create New

Acoount Download Laporan List Laporan List Upload List Status List User

[image:46.842.69.768.141.416.2]

Logout

(47)

3.2.2.2 Perancangan Antar Muka

Perancangan antarmuka situs pelaporan online LAPAN Bandung terdiri dari perancangan antarmuka per user. Untuk situs user terdiri dari: form index, form request new password,

form home, form profile, form edit profie, form upload laporan, form list laporan, form download. Sedangkan untuk situs admin terdiri dari: form home, form profile, form edit profile, form create new account, form download laporan, form list laporan, form upload,

form list status, form list user.

1. Perancangan Antar Muka User (Front End) a. Desain Login

Perancangan antar muka pada login, user harus memasukkan username dan

password agar dapat masuk ke home pengguna masing-masing. T01

1. Memilih hak akses login

2. Menyambungkan ke T03

atau T09

1. Ukuran

2. Font

3. Warna

4. Gambar

: 1113x419

: Georgia, Times New Roman, Times, serif, Trebuchet MS, Arial,

Helvetica, sans-serif

: #125798, #6E6E6E, #000000, #939292, #FFFFFF

: 1.jpg, 220px-Lapan_logo.svg.png, sm_logo.jpg, roket lapan

RX-1110.jpg, Roket Lapan.jpg, roket-lapan-RX100.jpg, 2.jpg,

subbg.jpg, logls.jpg, img02.jpg, img06.gif, img07.gif, img09.jpg,

[image:47.595.140.526.309.730.2]

logpole.jpg

(48)

b. Desain Request New Password

Perancangan antar muka pada request new password berisikan ketentuan atau cara meminta password baru kepada admin.

T02

1. Ukuran

2. Font

3. Warna

4. Gambar

: 1113x419

: #125798, #939292, #666, #FFFFFF

[image:48.595.141.523.231.599.2]

: 1.jpg, img02.jpg, img06.gif, img07.gif, img09.jpg, logpole.jpg

(49)

c. Desain Home

Perancangan antar muka pada home adalah tampilan awal setelah user

melakukan login. Pada halaman home user dapat melihat pengumuman dari

admin.

T03

1. Ukuran

2. Font

3. Warna

4. Gambar

: 1113x419

: #125798, #6E6E6E, #000000, #939292

[image:49.595.141.523.294.652.2]

(50)

d. Desain Profile

Perancangan antar muka pada profile adalah tampilan untuk melihat data identitas milik masing-masing.

T04

1. Ukuran

2. Font

3. Warna

4. Gambar

: 1113x419

: #125798, #6E6E6E, #939292, #247EBC, #FFFFFF, #4C9EC6

[image:50.595.142.528.388.750.2]

(51)

e. Desain Edit Profile

Perancangan antar muka pada edit profile adalah tampilan untuk mengubah data identitas serta password milik masing-masing.

T05

8. Menghapus semua isi

field profile

9. Menyimpan ke dalam

database dan

menyambungkan ke T01

field password

11. Menyimpan ke dalam

database dan

1. Ukuran

2. Font

(52)

3. Warna

4. Gambar

: #125798, #6E6E6E, #939292, #247EBC, #FFFFFF, #4C9EC6

Gambar 3.18 Perancangan Desain Edit Profile User

f. Desain Upload Laporan

Perancangan antar muka pada upload laporan adalah tampilan untuk mengunggah laporan user kepada admin. User dapat memilih bulan serta tahun sebelumnya, menuliskan judul laporan sesuai ketentuan, serta dapat mencari dimana tersimpannya file laporan yang akan diunggah.

(53)

8. Memilih bulan saat

mengunggah

9. Memilih tahun saat

mengunggah

10. Mencari file yang akan

diunggah

11. Menyimpan file ke dalam

database dan

field laporan

1. Ukuran

2. Font

3. Warna

4. Gambar

: 1113x419

: #125798, #6E6E6E, #939292, #FFFFFF, #4C9EC6

[image:53.595.142.528.71.406.2]

Gambar 3.19 Perancangan Desain Upload Laporan

(54)

Perancangan antar muka pada list laporan adalah tampilan laporan yang telah

user unggah.

T07

1. Ukuran

2. Font

3. Warna

4. Gambar

: 1113x419

: #125798, #6E6E6E, #939292, #247EBC, #FFFFFF, #000000

[image:54.595.140.526.121.483.2]

(55)

h. Desain Download Pengumuman

Perancangan antar muka pada download pengumuman adalah tampilan pengumuman yang telah diberikan oleh admin. Apabila telah ada file

pengumuman dari admin, user dapat mengunduhnya.

T08

1. Ukuran

2. Font

3. Warna

4. Gambar

: 1113x419

: #125798, #6E6E6E, #000000, #939292, #FFFFFF

[image:55.595.139.528.221.577.2]

(56)

2. Perancangan Antar Muka Admin (Back End) 1. Desain Home

Perancangan antar muka pada home menampilkan halaman yang admin dapat menulis pengumuman melalui status admin. Admin juga dapat mengunggah file pengumuman kepada user.

T09

11. Menyimpan status ke

dalam database dan

12. Mencari file yang akan

disebarkan melalui

pengumuman

13. Menyimpan file ke dalam

database dan

1. Ukuran

2. Font

3. Warna

4. Gambar

: 1113x419

: #125798, #6E6E6E, #000000, #939292, #00F, #FFFFFF

[image:56.595.139.528.334.700.2]

(57)

2. Desain Profile

Perancangan antar muka pada profile menampilkan data identitas diri admin.

T10

1. Ukuran

2. Font

3. Warna

4. Gambar

: 1113x419

: #125798, #6E6E6E, #939292, #4C9EC6, #FFFFFF

[image:57.595.142.525.330.681.2]

(58)

3. Desain Edit Profile

Perancangan antar muka pada edit profile berguna untuk mengubah identitas

admin atau juga dapat mengubah password admin.

T11

field profile

12. Menyimpan data ke

dalam database dan

field password

14. Menyimpan password ke

dalam database dan

1. Ukuran

2. Font

: 1113x419

(59)

3. Warna

4. Gambar

: #125798, #6E6E6E, #939292, #FFFFFF, #4C9EC6, #247EBC

Gambar 3.24 Perancangan Desain Edit Profile Admin

4. Desain Create New Account

Perancangan antar muka pada create new account dipergunakan oleh admin

agar user memiliki akun dan dapat mengunggah laporan yang telah user buat.

(60)

11. Menghapus semua field

pendaftaran user

13. Menyimpan data user

baru dalam database dan menyambungkan ke T18

1. Ukuran

2. Font

3. Warna

4. Gambar

: 1113x419

: #125798, #6E6E6E, #000000, #939292, #FFFFFF

[image:60.595.142.528.72.402.2]

(61)

5. Desain Download Laporan

Perancangan antar muka pada download laporan terdapat tombol cari untuk memudahkan admin mencari laporan pada bulan tertentu dan pada tahun tertentu. Admin dapat mengunduh laporan yang telah diunggah oleh user.

T13

11. Mencari laporan

berdasarkan tahun

12. Mencari laporan

berdasarkan bulan

1. Ukuran

2. Font

3. Warna

4. Gambar

: 1113x419

: #125798, #6E6E6E, #000000, #939292, #FFFFFF

[image:61.595.141.524.187.547.2]

(62)

6. Desain List Laporan

Perancangan antar muka pada list laporan hanya menampilkan laporan yang telah diunggah oleh user. Pada antar muka list laporan dapat mencari laporan berdasarkan bulan dan tahun.

T14

11. Mencari laporan

bedasarkan tahun

12. Mencari laporan

berdasarkan bulan

1. Ukuran

2. Font

3. Warna

4. Gambar

: 1113x419

: #125798, #6E6E6E, #000000, #939292, #FFFFFF

[image:62.595.139.528.312.661.2]

(63)

7. Desain List Upload

Perancangan antar muka pada list upload menampilkan pengumuman yang telah admin unggah. Admin juga dapat menghapus kembali pengumuman yang salah admin unggah.

T15

1. Ukuran

2. Font

3. Warna

4. Gambar

: 1113x419

(64)

: 1.jpg, HAPUS.png, img02.jpg, img06.gif, img07.gif, img09.jpg,

logpole.jpg

Gambar 3.28 Perancangan Desain List Upload Admin

8. Desain List Status

Perancangan antar muka pada list status menampilkan pengumuman yang berupa tulisan kepada user. Admin juga dapat menghapus pengumuman yang tidak diperlukan.

(65)

1. Ukuran

2. Font

3. Warna

4. Gambar

: 1113x419

: #125798, #6E6E6E, #939292, #FFFFFF

[image:65.595.141.529.69.404.2]

(66)

9. Desain List User

Perancangan antar muka pada list user menampilkan user yang telah admin

daftarkan pada form create new account. Admin juga dapat menghapus user

apablia user telah tidak bekerja pada divisi ini. T17

1. Ukuran

2. Font

3. Warna

4. Gambar

: 1113x419

: #125798, #6E6E6E, #000000, #939292, #FFFFFF

: 1.jpg, HAPUS.png, img02.jpg, img06.gif, img07.gif, img09.jpg,

[image:66.595.144.527.159.540.2]

logpole.jpg

(67)

10. Desain Privacy Policy

Perancangan antar muka pada privacy policy hanya menampilkan kebijakan mengenai pendaftaran user baru.

T18

1. Ukuran

2. Font

3. Warna

4. Gambar

: 1113x419

: #125798, #6E6E6E, #000, #939292, #FFFFFF

[image:67.595.141.532.263.629.2]

(68)

11. Desain list searching download laporan

Perancangan antar muka pada list searching download laporan hanya menampilkan pencarian yang terdapat pada form download laporan.

T19

1. Ukuran

2. Font

3. Warna

4. Gambar

: 1113x419

: #125798, #6E6E6E, #000, #939292, #FFFFFF

[image:68.595.141.532.356.711.2]

(69)

12. Desain list searching laporan

Perancangan antar muka pada list searching laporan hanya menampilkan pencarian laporan yang terdapat pada list laporan.

T20

1. Ukuran

2. Font

(70)

3. Warna

4. Gambar

: #125798, #6E6E6E, #000, #939292, #FFFFFF

Gambar 3.33 Perancangan Desain List Searching Laporan

3.2.2.3 Perancangan Pesan

Perancangan pesan pada pembangunan aplikasi meliputi pesan-pesan yang terdapat dalam situs pelaporan online LAPAN yakni sebagai berikut :

1. Pesan dalam Halaman

No. Nama Pesan Isi Pesan Letak Pesan

1. M01 Gagal Login

UNAUTHORIZEDACCESS

Username atau Pasword yang anda masukan salah

Silahkan Ulangi

T01

2. M02 Gagal menyimpan file upload T06

3. M03 Gagal Searching file laporan T13, T14, T19,

T20

[image:70.595.100.527.273.475.2]

4. M04 Data User baru gagal disimpan dengan kesalahan.... T12

Tabel 3.32 Pesan dalam Halaman

2. Pesan Peringatan

M05

!

Peringatan

Username tidak boleh kosong

OK

(71)

M06

!

Peringatan

Password tidak boleh kosong

OK

Gambar 3.35 Pesan M06

M07

!

Peringatan

Nama lengkap masih kosong

OK

M08

!

Peringatan

Alamat masih kosong

OK

M09

!

Peringatan

NIP tidak boleh kosong

(72)

M10

!

Peringatan

Jenis tidak boleh kosong

OK

M11

!

Peringatan

Jenis Login Salah !

OK

(73)

3.2.3 Jaringan Semantik

Jaringan semantik adalah jaringan yang menjelaskan alur arah setiap form dalam aplikasi yang dibangun. Berikut adalah alur setiap form

berdasarkan front end dan back end.

3.2.3.1 Jaringan Semantik User (Front End)

Jaringan semantik user (front end) pada aplikasi situs pelaporan online LAPAN Bandung ini menjelaskan mengenai menu-menu form pada situs

front end yang akan digunakan oleh user.

T01

T02 T03 T04 T05 T06 T07 T08

M01, M11

[image:73.842.71.773.223.436.2]

M02

(74)

3.2.3.2 Jaringan Semantik Admin (Back End)

Jaringan semantik admin (back end) pada aplikasi situs pelaporan online LAPAN ini menjelaskan mengenai menu-menu form pada situs back end yang akan digunakan oleh admin.

T01

T09 T10 T11 T12 T13 T14 T15 F017

M01, M11

T18 M04, M05, M06, M07, M08, M09, M10

T20 T19 _M03

M03 M03

[image:74.842.85.779.144.368.2]

M03

(75)

3.2.4 Perancangan Prosedural 3.2.4.1 Prosedural Login

Prosedural login yang berjalan untuk aplikasi situs pelaporan online LAPAN Bandung adalah dengan memasukkan username dan password dan menekan tombol login

untuk dapat menggunakan akun yang sudah terdaftar.

Mulai

username dan password

Apakah username atau password yang dimasukkan benar?

Memeriksa userrname dan

password

Masuk ke home

[image:75.595.235.363.202.636.2]

Selesai Ya Tidak

(76)

3.2.4.2 Procedural Edit Profile

Prosedural edit profile yang berjalan untuk aplikasi situs pelaporan online LAPAN Bandung adalah dengan mengganti isi data sesuai dengan data pengguna masing-masing lalu data akan disimpan ke dalam database tetapi setelah disimpan ke dalam database halaman yang akan muncul adalah index agar pengguna dapat mencoba login kembali.

Mulai

Mengganti isi data

Apakah ingin menyimpan isi

data?

Menyimpan data user ke database

Masuk ke index

[image:76.595.242.354.192.580.2]

Selesai Ya Tidak

(77)