MAGENTA - BATCH 1 - 2023

Perhutani Jawa Barat dan Banten

---

Table of Contents

1. General Info
2. Creator Info
3. Features
4. Technologies Used
5. Setup
6. Usage
7. Video Capture
8. Screenshots
9. Structure
10. Project Status
11. Room for Improvement
12. Acknowledgements
13. Contact

General Information

Repository ini dibuat untuk memenuhi tugas Magang Generasi Bertalenta (MAGENTA) - Batch 1 tahun 2023 - Perum Perhutani Regional Jawa Barat dan Banten. Website ini hanya terdiri dari 3 page, yaitu : HomePage, PropertiPage, serta DownloadPage. HomePage merupakan tampilan awal dari website, sedangkan PropertiPage merupakan tampilan yang berisi titik-titik dimana terdapat properti milik Perhutani Jawa Barat dan Banten. Sementara DownloadPage merupakan tampilan yang berisi link download laporan kerja Perhutani Jawa Barat dan Banten.

Creator Information

Nama	NIM	E-Mail
Mohammad Rifqi Farhansyah	13521166	13521166@std.stei.itb.ac.id

Features

• Membuka peta yang menampilkan aset-aset Perhutani Jawa Barat dan Banten
• Pop up informasi detail yang berisi nama objek, alamat, luas tanah, dll
• Mendownload laporan kerja Perhutani Jawa Barat dan Banten

Technologies Used

• React - versi 18.2.0
• tailwind - versi 3.3.2

Note: The version of the libraries above is the version that we used in this project. You can use the latest version of the libraries.

Setup

1. Clone Repository ini dengan menggunakan command berikut

   git clone https://github.com/rifqifarhansyah/Perhutani-Jabar.git

2. Buka Folder "client" di Terminal
3. Install Packages yang diperlukan

   npm install

4. Jalanakan Aplikasi dengan menggunakan command

   npm start

5. Buka http://localhost:3000 pada Browser Anda
6. Cara alternatif dapat melalui pranala berikut

Usage

1. Pada HomePage, Anda dapat memperoleh informasi umum mengenai Perhutani Jawa Barat dan Banten
2. Terdapat tombol SetView di bagian kiri peta pada PropertiPage untuk memilih view dari peta
3. Setelah memilih view kota yang hendak digunakan, akan muncul marker-marker tertentu
4. PopUp informasi detail dapat dilihat dengan mengklik marker yang diinginkan
5. Anda juga dapat mendownload laporan kerja Perhutani Jawa Barat dan Banten pada DownloadPage

Video Capture

Screenshots

Gambar 1. HomePage

Gambar 2. PropertiPage

Gambar 3. Dropdown SetView

Gambar 4. PopUp Detail Information

Gambar 5. DownloadPage

Structure

│   App.css
│   App.js
│   App.test.js
│   index.css
│   index.js
│   logo.svg
│   reportWebVitals.js
│   setupTests.js
│
├───assets
│       1.png
│       10.png
│       11.png
│       12.png
│       2.png
│       3.png
│       4.png
│       5.png
│       6.png
│       7.png
│       8.png
│       9.png
│       Bandung Selatan.xlsx
│       Bandung Utara.xlsx
│       bandungCard.png
│       Banten.xlsx
│       bantenCard.png
│       bghijau.png
│       bgputih.png
│       Bogor.xlsx
│       bogorCard.png
│       bumn-abu.png
│       bumn-putih.png
│       bumn.png
│       Ciamis.xlsx
│       ciamisCard.png
│       Cianjur.xlsx
│       cianjurCard.png
│       Divre.xlsx
│       download.png
│       Garut.xlsx
│       garutCard.png
│       home1.png
│       home2.png
│       icon.png
│       img1.png
│       Indramayu.xlsx
│       indramayuCard.png
│       Kuningan.xlsx
│       logo-panjang.png
│       Majalengka.xlsx
│       majalengkaCard.png
│       perhutani-abu.png
│       perhutani-putih.png
│       perhutani.png
│       perhutaniPanjangPutih.png
│       properti.png
│       Purwakarta.xlsx
│       purwakartaCard.png
│       Sukabumi.xlsx
│       sukabumiCard.png
│       Sumedang.xlsx
│       sumedangCard.png
│       Tasikmalaya.xlsx
│       tasikmalayaCard.png
│
├───components
│   ├───common
│   │   │   index.js
│   │   │
│   │   ├───Footer
│   │   │       Footer.js
│   │   │
│   │   └───Navbar
│   │           Navbar.js
│   │
│   ├───Download
│   │       Download.js
│   │
│   ├───Homepage
│   │       Homepage.js
│   │
│   └───Properties
│           defaultMarker.js
│           markerKota.js
│           popupStyles.js
│           Properties.js
│           propertiKota.js
│
└───pages
        Homepage.tsx
        Properties.tsx

Project Status

Project is: complete

Room for Improvement

Perbaikan yang dapat dilakukan pada program ini adalah:

• Menambahkan fitur-fitur serta membersihkan data yang digunakan

Acknowledgements

• Terima kasih kepada Tuhan Yang Maha Esa

Contact

Contact : mrifki193@gmail.com
2023

---