LAMPIRAN A-5
SURAT KETERANGAN HAK EKSKLUSIF
LAMPIRAN A-6
SITUS PELAPORAN ONLINE LAPAN DI LAPAN BANDUNG
KERJA PRAKTEKDiajukan 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
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
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
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
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.
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
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
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.
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
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
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
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
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.
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.
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,
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.
Pemberian Pengumuman
Anggota Divisi Kepala Divisi
Pengumuman
Input Pengumuman
Pengumum an
Cek FTP
Pengum uman melalui
Telp
pengumum an
pengumuman Tidak
Ya
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
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
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)
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
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 login 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
Data password
Gambar 3.6 Data Flow Diagram Level 2 Proses Login
Proses Identifikasi
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 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
Data login Info data login
Data login Data login
Proses Identifikasi
Nomor 2.1
Nama Proses Profile Admin
Tujuan Admin Memilih Profile Admin Deskripsi Proses menampilkan profile admin Aktor Admin
Tabel 3.5 Proses Identifikasi 2.1
Proses Identifikasi
Nomor 2.2
Nama Proses Edit Profile Admin
Tujuan Admin Memilih Edit Profile Admin Deskripsi Proses mengedit profile admin Aktor Admin
Tabel 3.6 Proses Identifikasi 2.2
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
Tabel 3.7 Proses Identifikasi 2.3
Proses Identifikasi
Nomor 2.4
Nama Proses download laporan
Tujuan Admin Memilih download laporan Deskripsi Proses mendownload laporan Aktor Admin
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
Tabel 3.9 Proses Identifikasi 2.5
Proses Identifikasi
Nomor 2.6
Nama Proses list laporan
Tujuan Admin Memilih list laporan
Deskripsi Proses menampilkan list laporan user Aktor Admin
Tabel 3.10 Proses Identifikasi 2.6
Proses Identifikasi
Nomor 2.7
Nama Proses list upload
Tujuan Admin Memilih list upload
Deskripsi Proses menampilkan list upload pengumuman Aktor Admin
Tabel 3.11 Proses Identifikasi 2.7
Proses Identifikasi
Nomor 2.8
Nama Proses list status
Tujuan Admin Memilih list status Deskripsi Proses menampilkan list status Aktor Admin
Tabel 3.12 Proses Identifikasi 2.8
Proses Identifikasi
Nama Proses list user
Tujuan Admin Memilih list user Deskripsi Proses menampilkan list user Aktor Admin
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 login Data login
Data login Info data login
Data login 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 pengumumanData 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
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
Tabel 3.14 Proses Identifikasi 2.10
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
Tabel 3.15 Proses Identifikasi 2.11
Proses Identifikasi
Nomor 2.12
Nama Proses Upload Laporan Tujuan User Memilih upload Deskripsi Proses mengupload laporan Aktor User
Tabel 3.16 Proses Identifikasi 2.12
Proses Identifikasi
Nomor 2.13
Nama Proses List Laporan Tujuan User Memilih list laporan Deskripsi Proses menampilkan list laporan Aktor User
Tabel 3.17 Proses Identifikasi 2.13
Proses Identifikasi
Nama Proses download pengumuman Tujuan User Memilih download pengumuman Deskripsi Proses mendownload pengumuman Aktor User
Tabel 3.18 Proses Identifikasi 2.14
Proses Identifikasi
Nomor 2.15
Nama Proses Home
Tujuan User Memilih Home Deskripsi Proses menampilkan Home Aktor User
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 Admin
Data Login Admin
Info Data login Admin
Data Login Admin
Info Data login Data Login
Info Data Upload
Info Data Upload 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 Admin Data Login Admin
Info Data login
Data Login
Info Data Upload
Data Upload
Info Data Upload Data Upload
Info Data Upload Data Upload Info Data Status
Data Status
Data Pengumuman
Info Data Pengumuman
Info Data Upload Data Upload
Info Data Upload Data Upload
Info Data Pengumuman Data Pengumuman
Info Data Pengumuman Data Pengumuman
Info Data Status Data Status
Info Data Status Data Status
Info Data Login Data Login
[image:35.595.102.489.97.658.2]Info Data Login Data Login
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
Info Data Login Data Login
Data Upload Info Data Upload
Info Data Upload Data Upload
Info Data Pengumuman Data Pengumuman
Info Data Pengumuman Data Pengumuman
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
Info Data Pengumuman Data Pengumuman
Info Data Pengumuman
Data Pengumuman
Info Data Status Data Status
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
Tabel 3.21 Proses Identifikasi 2.11.1
Proses Identifikasi
Nomor 2.12.1
Nama Proses Insert Laporan
Tujuan User Memilih Upload Laporan Deskripsi Proses memasukan data upload Aktor User
Tabel 3.22 Proses Identifikasi 2.12.1
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
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
Tabel 3.24 Proses Identifikasi 2.14.1
Proses Identifikasi
Nomor 2.14.2
Nama Proses Download Attach Pengumuman
Tujuan User Memilih Download Attach Pengumuman Deskripsi Proses mendownload Attach Pengumuman Aktor User
Tabel 3.25 Proses Identifikasi 2.14.2
Proses Identifikasi
Nomor 2.15.1
Nama Proses View Pengumuman
Tujuan User Memilih View Pengumuman Deskripsi Proses menampilkan List Pengumuman Aktor User
Tabel 3.26 Proses Identifikasi 2.15.1
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
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
Where used/how used Admin â proses 2.3
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
Where used/how used User â proses 2.12
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
Where used/how used User â proses 2.13
Deskripsi Berisi data laporan yang telah diupload oleh user. Struktur Data Tanggal+bulan+judul_laporan+nama
Tanggal bulan
judul_laporan nama
[A-Z]|[0-9] [A-Z]|[0-9]
Nama Data download pengumuman
Where used/how used User â proses 2.14
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
Where used/how used Admin â proses 2.4
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
Where used/how used Admin â proses 2.6
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
Where used/how used Admin â proses 2.9
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
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
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
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
Data Ukuran Kunci Keterangan
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
Data Ukuran Kunci Keterangan
1 idlaporan Int 11 Primary key Not Null
2 nama_lengkap Varchar 30 Not Null
3 Nama Varchar 50 Not Null
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
Data Ukuran Kunci Keterangan
1 idpengumuman Int 11 Primary key Not Null
2 nama_lengkap Varchar 30 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
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
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
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
3. Menyambungkan ke T02
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
b. Desain Request New Password
Perancangan antar muka pada request new password berisikan ketentuan atau cara meminta password baru kepada admin.
T02
1. Menyambungkan ke T01
1. Ukuran
2. Font
3. Warna
4. Gambar
: 1113x419
: Georgia, Times New Roman, Times, serif, Trebuchet MS, Arial,
Helvetica, sans-serif
: #125798, #939292, #666, #FFFFFF
[image:48.595.141.523.231.599.2]: 1.jpg, img02.jpg, img06.gif, img07.gif, img09.jpg, logpole.jpg
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. Menyambungkan ke T03
2. Menyambungkan ke T04
3. Menyambungkan ke T05
4. Menyambungkan ke T06
5. Menyambungkan ke T07
6. Menyambungkan ke T08
7. Menyambungkan ke T01
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
[image:49.595.141.523.294.652.2]: 1.jpg, img02.jpg, img06.gif, img07.gif, img09.jpg, logpole.jpg
d. Desain Profile
Perancangan antar muka pada profile adalah tampilan untuk melihat data identitas milik masing-masing.
T04
1. Menyambungkan ke T03
2. Menyambungkan ke T04
3. Menyambungkan ke T05
4. Menyambungkan ke T06
5. Menyambungkan ke T07
6. Menyambungkan ke T08
7. Menyambungkan ke T01
1. Ukuran
2. Font
3. Warna
4. Gambar
: 1113x419
: Georgia, Times New Roman, Times, serif, Trebuchet MS, Arial,
Helvetica, sans-serif
: #125798, #6E6E6E, #939292, #247EBC, #FFFFFF, #4C9EC6
[image:50.595.142.528.388.750.2]: 1.jpg, img02.jpg, img06.gif, img07.gif, img09.jpg, logpole.jpg
e. Desain Edit Profile
Perancangan antar muka pada edit profile adalah tampilan untuk mengubah data identitas serta password milik masing-masing.
T05
1. Menyambungkan ke T03
2. Menyambungkan ke T04
3. Menyambungkan ke T05
4. Menyambungkan ke T06
5. Menyambungkan ke T07
6. Menyambungkan ke T08
7. Menyambungkan ke T01
8. Menghapus semua isi
field profile
9. Menyimpan ke dalam
database dan
menyambungkan ke T01
10. Menghapus semua isi
field password
11. Menyimpan ke dalam
database dan
menyambungkan ke T01
1. Ukuran
2. Font
3. Warna
4. Gambar
: Georgia, Times New Roman, Times, serif, Trebuchet MS, Arial,
Helvetica, sans-serif
: #125798, #6E6E6E, #939292, #247EBC, #FFFFFF, #4C9EC6
: 1.jpg, img02.jpg, img06.gif, img07.gif, img09.jpg, logpole.jpg
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.
1. Menyambungkan ke T03
2. Menyambungkan ke T04
3. Menyambungkan ke T05
4. Menyambungkan ke T06
5. Menyambungkan ke T07
6. Menyambungkan ke T08
7. Menyambungkan ke T01
8. Memilih bulan saat
mengunggah
9. Memilih tahun saat
mengunggah
10. Mencari file yang akan
diunggah
11. Menyimpan file ke dalam
database dan
menyambungkan ke T07
12. Menghapus semua isi
field laporan
1. Ukuran
2. Font
3. Warna
4. Gambar
: 1113x419
: Georgia, Times New Roman, Times, serif, Trebuchet MS, Arial,
Helvetica, sans-serif
: #125798, #6E6E6E, #939292, #FFFFFF, #4C9EC6
[image:53.595.142.528.71.406.2]: 1.jpg, img02.jpg, img06.gif, img07.gif, img09.jpg, logpole.jpg
Gambar 3.19 Perancangan Desain Upload Laporan
Perancangan antar muka pada list laporan adalah tampilan laporan yang telah
user unggah.
T07
1. Menyambungkan ke T03
2. Menyambungkan ke T04
3. Menyambungkan ke T05
4. Menyambungkan ke T06
5. Menyambungkan ke T07
6. Menyambungkan ke T08
7. Menyambungkan ke T01
1. Ukuran
2. Font
3. Warna
4. Gambar
: 1113x419
: Georgia, Times New Roman, Times, serif, Trebuchet MS, Arial,
Helvetica, sans-serif
: #125798, #6E6E6E, #939292, #247EBC, #FFFFFF, #000000
[image:54.595.140.526.121.483.2]: 1.jpg, img02.jpg, img06.gif, img07.gif, img09.jpg, logpole.jpg
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. Menyambungkan ke T03
2. Menyambungkan ke T04
3. Menyambungkan ke T05
4. Menyambungkan ke T06
5. Menyambungkan ke T07
6. Menyambungkan ke T08
7. Menyambungkan ke T01
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
[image:55.595.139.528.221.577.2]: 1.jpg, img02.jpg, img06.gif, img07.gif, img09.jpg, logpole.jpg
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
1. Menyambungkan ke T09
2. Menyambungkan ke T10
3. Menyambungkan ke T11
4. Menyambungkan ke T12
5. Menyambungkan ke T13
6. Menyambungkan ke T14
7. Menyambungkan ke T15
8. Menyambungkan ke T16
9. Menyambungkan ke T17
10. Menyambungkan ke T01
11. Menyimpan status ke
dalam database dan
menyambungkan ke T16
12. Mencari file yang akan
disebarkan melalui
pengumuman
13. Menyimpan file ke dalam
database dan
menyambungkan ke T15
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, #00F, #FFFFFF
[image:56.595.139.528.334.700.2]: 1.jpg, img02.jpg, img06.gif, img07.gif, img09.jpg, logpole.jpg
2. Desain Profile
Perancangan antar muka pada profile menampilkan data identitas diri admin.
T10
1. Menyambungkan ke T09
2. Menyambungkan ke T10
3. Menyambungkan ke T11
4. Menyambungkan ke T12
5. Menyambungkan ke T13
6. Menyambungkan ke T14
7. Menyambungkan ke T15
8. Menyambungkan ke T16
9. Menyambungkan ke T17
10. Menyambungkan ke T01
1. Ukuran
2. Font
3. Warna
4. Gambar
: 1113x419
: Georgia, Times New Roman, Times, serif, Trebuchet MS, Arial,
Helvetica, sans-serif
: #125798, #6E6E6E, #939292, #4C9EC6, #FFFFFF
[image:57.595.142.525.330.681.2]: 1.jpg, img02.jpg, img06.gif, img07.gif, img09.jpg, logpole.jpg
3. Desain Edit Profile
Perancangan antar muka pada edit profile berguna untuk mengubah identitas
admin atau juga dapat mengubah password admin.
T11
1. Menyambungkan ke T09
2. Menyambungkan ke T10
3. Menyambungkan ke T11
4. Menyambungkan ke T12
5. Menyambungkan ke T13
6. Menyambungkan ke T14
7. Menyambungkan ke T15
8. Menyambungkan ke T16
9. Menyambungkan ke T17
10. Menyambungkan ke T01
11. Menghapus semua isi
field profile
12. Menyimpan data ke
dalam database dan
menyambungkan ke T01
13. Menghapus semua isi
field password
14. Menyimpan password ke
dalam database dan
menyambungkan ke T01
1. Ukuran
2. Font
: 1113x419
3. Warna
4. Gambar
Helvetica, sans-serif
: #125798, #6E6E6E, #939292, #FFFFFF, #4C9EC6, #247EBC
: 1.jpg, img02.jpg, img06.gif, img07.gif, img09.jpg, logpole.jpg
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.
1. Menyambungkan ke T09
2. Menyambungkan ke T10
3. Menyambungkan ke T11
4. Menyambungkan ke T12
5. Menyambungkan ke T13
6. Menyambungkan ke T14
7. Menyambungkan ke T15
8. Menyambungkan ke T16
9. Menyambungkan ke T17
10. Menyambungkan ke T01
11. Menghapus semua field
pendaftaran user
12. Menyambungkan ke T01
13. Menyimpan data user
baru dalam database dan menyambungkan ke T18
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
[image:60.595.142.528.72.402.2]: 1.jpg, img02.jpg, img06.gif, img07.gif, img09.jpg, logpole.jpg
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
1. Menyambungkan ke T09
2. Menyambungkan ke T10
3. Menyambungkan ke T11
4. Menyambungkan ke T12
5. Menyambungkan ke T13
6. Menyambungkan ke T14
7. Menyambungkan ke T15
8. Menyambungkan ke T16
9. Menyambungkan ke T17
10. Menyambungkan ke T01
11. Mencari laporan
berdasarkan tahun
12. Mencari laporan
berdasarkan bulan
13. Menyambungkan ke T19
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
[image:61.595.141.524.187.547.2]: 1.jpg, img02.jpg, img06.gif, img07.gif, img09.jpg, logpole.jpg
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
1. Menyambungkan ke T09
2. Menyambungkan ke T10
3. Menyambungkan ke T11
4. Menyambungkan ke T12
5. Menyambungkan ke T13
6. Menyambungkan ke T14
7. Menyambungkan ke T15
8. Menyambungkan ke T16
9. Menyambungkan ke T17
10. Menyambungkan ke T01
11. Mencari laporan
bedasarkan tahun
12. Mencari laporan
berdasarkan bulan
13. Menyambungkan ke T20
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
[image:62.595.139.528.312.661.2]: 1.jpg, img02.jpg, img06.gif, img07.gif, img09.jpg, logpole.jpg
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. Menyambungkan ke T09
2. Menyambungkan ke T10
3. Menyambungkan ke T11
4. Menyambungkan ke T12
5. Menyambungkan ke T13
6. Menyambungkan ke T14
7. Menyambungkan ke T15
8. Menyambungkan ke T16
9. Menyambungkan ke T17
10. Menyambungkan ke T01
1. Ukuran
2. Font
3. Warna
4. Gambar
: 1113x419
: Georgia, Times New Roman, Times, serif, Trebuchet MS, Arial,
Helvetica, sans-serif
: 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.
1. Menyambungkan ke T09
2. Menyambungkan ke T10
3. Menyambungkan ke T11
4. Menyambungkan ke T12
5. Menyambungkan ke T13
6. Menyambungkan ke T14
7. Menyambungkan ke T15
8. Menyambungkan ke T16
9. Menyambungkan ke T17
10. Menyambungkan ke T01
1. Ukuran
2. Font
3. Warna
4. Gambar
: 1113x419
: Georgia, Times New Roman, Times, serif, Trebuchet MS, Arial,
Helvetica, sans-serif
: #125798, #6E6E6E, #939292, #FFFFFF
[image:65.595.141.529.69.404.2]: 1.jpg, img02.jpg, img06.gif, img07.gif, img09.jpg, logpole.jpg
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. Menyambungkan ke T09
2. Menyambungkan ke T10
3. Menyambungkan ke T11
4. Menyambungkan ke T12
5. Menyambungkan ke T13
6. Menyambungkan ke T14
7. Menyambungkan ke T15
8. Menyambungkan ke T16
9. Menyambungkan ke T17
10. Menyambungkan ke T01
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, HAPUS.png, img02.jpg, img06.gif, img07.gif, img09.jpg,
[image:66.595.144.527.159.540.2]logpole.jpg
10. Desain Privacy Policy
Perancangan antar muka pada privacy policy hanya menampilkan kebijakan mengenai pendaftaran user baru.
T18
1. Menyambungkan ke T09
2. Menyambungkan ke T10
3. Menyambungkan ke T11
4. Menyambungkan ke T12
5. Menyambungkan ke T13
6. Menyambungkan ke T14
7. Menyambungkan ke T15
8. Menyambungkan ke T16
9. Menyambungkan ke T17
10. Menyambungkan ke T01
1. Ukuran
2. Font
3. Warna
4. Gambar
: 1113x419
: Georgia, Times New Roman, Times, serif, Trebuchet MS, Arial,
Helvetica, sans-serif
: #125798, #6E6E6E, #000, #939292, #FFFFFF
[image:67.595.141.532.263.629.2]: 1.jpg, img02.jpg, img06.gif, img07.gif, img09.jpg, logpole.jpg
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. Menyambungkan ke T09
2. Menyambungkan ke T10
3. Menyambungkan ke T11
4. Menyambungkan ke T12
5. Menyambungkan ke T13
6. Menyambungkan ke T14
7. Menyambungkan ke T15
8. Menyambungkan ke T16
9. Menyambungkan ke T17
10. Menyambungkan ke T01
1. Ukuran
2. Font
3. Warna
4. Gambar
: 1113x419
: Georgia, Times New Roman, Times, serif, Trebuchet MS, Arial,
Helvetica, sans-serif
: #125798, #6E6E6E, #000, #939292, #FFFFFF
[image:68.595.141.532.356.711.2]: 1.jpg, img02.jpg, img06.gif, img07.gif, img09.jpg, logpole.jpg
12. Desain list searching laporan
Perancangan antar muka pada list searching laporan hanya menampilkan pencarian laporan yang terdapat pada list laporan.
T20
1. Menyambungkan ke T09
2. Menyambungkan ke T10
3. Menyambungkan ke T11
4. Menyambungkan ke T12
5. Menyambungkan ke T13
6. Menyambungkan ke T14
7. Menyambungkan ke T15
8. Menyambungkan ke T16
9. Menyambungkan ke T17
10. Menyambungkan ke T01
1. Ukuran
2. Font
3. Warna
4. Gambar
: Georgia, Times New Roman, Times, serif, Trebuchet MS, Arial,
Helvetica, sans-serif
: #125798, #6E6E6E, #000, #939292, #FFFFFF
: 1.jpg, img02.jpg, img06.gif, img07.gif, img09.jpg, logpole.jpg
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
M06
!
Peringatan
Password tidak boleh kosong
OK
Gambar 3.35 Pesan M06
M07
!
Peringatan
Nama lengkap masih kosong
OK
Gambar 3.36 Pesan M07
M08
!
Peringatan
Alamat masih kosong
OK
Gambar 3.37 Pesan M08
M09
!
Peringatan
NIP tidak boleh kosong
Gambar 3.38 Pesan M09
M10
!
Peringatan
Jenis tidak boleh kosong
OK
Gambar 3.39 Pesan M10
M11
!
Peringatan
Jenis Login Salah !
OK
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
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
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
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