1. JUDUL APLIKASI Website Company Profile PT Kreasi Orang Muda (KreasiX).

(1)

1 1. JUDUL APLIKASI

Website Company Profile PT Kreasi Orang Muda (KreasiX).

2. GAMBARAN SISTEM 2.1. Desikripsi Sistem

Pada zaman modern ini, kita sudah memasuki revolusi industri 4.0 dimana semua serba digital, salah satunya teknologi informasi. Teknologi informasi adalah sebuah cara yang diciptakan manusia untuk mempermudah kegiatan komunikasi guna mempercepat proses pertukaran informasi. Salah satu bentuk teknologi informasi adalah internet yang merupakan sarana mencari dan menyebarkan informasi ke seluruh dunia[1] sehingga internet bukan merupakan hal yang asing bagi masyarakat global saat ini. Bahkan jumlah pengguna internet di Indonesia pada kuartal II 2020 mencapai 196,7 juta jiwa. Angka tersebut meningkat jika dibandingkan pada 2018, di mana jumlah pengguna internet di Indonesia sebesar 171,2 juta jiwa[2]. Melihat fenomena tersebut, teknologi informasi berpeluang menjadi media yang cocok dalam memberikan informasi kepada masyarakat luas.

Melihat fenomena teknologi informasi, muncul gagasan tentang website company profile di kalangan masyarakat global saat ini. Website company profile merupakan gambaran umum sebuah perusahaan yang bertujuan untuk memberitahu klien tentang produk atau jasa yang ditawarkan[3]. Dalam implementasinya, masih banyak website company profile yang dibangun dengan arsitektur multi page application. Padahal, menurut Alifia Seftin Oktriwina (2020), multi page application sendiri memiliki kekurangan jika dibandingkan dengan website yang dibangun dengan arsitektur single page application seperti kecepatan download website yang lebih lama dan sering terjadi masalah performa pada website [4] sehingga mengurangi pengalaman pengguna (user experience) dalam mengakses website company profile. Oleh karena itu, single page

(2)

2

application sangat cocok digunakan untuk website company profile karena menawarkan pengalaman pengguna (user experience) yang lebih baik.

Dalam pengembangan single page application, banyak muncul framework guna membantu para developer untuk membangun aplikasinya, salah satunya adalah Nuxt Js. Nuxt.js adalah framework frontend yang dibangun di atas Vue.js yang menawarkan fitur pengembangan hebat seperti server side rendering, rute yang dibuat secara otomatis, pengelolaan tag meta yang ditingkatkan[5]. Salah satu keunggulan Nuxt Js adalah dilengkapi dengan beberapa fitur tambahan seperti data asynchronous, middleware, layout, module, dan plugin yang menjalankan aplikasi di sisi server terlebih dahulu, lalu di sisi klien sehingga aplikasi yang dikembangkan dengan Nuxt Js lebih cepat dirender daripada aplikasi tradisional server-side (atau multi-page application)[6], yang dimana cocok bila digunakan sebagai website company profile karena Nuxt Js menawarkan rendering yang cepat sehingga meningkatkan User Experience (UX) dan kemudahan pembangunan bagi developer.

Berdasarkan latar belakang tersebut, penelitian ini bertujuan untuk membangun website company profile PT Kreasi Orang Muda (KreasiX) menggunakan framework Nuxt Js sehingga informasi perusahaan dan produknya dapat diketahui oleh masyarakat umum. Website dibangun dengan metode waterfall dan menggunakan framework Nuxt Js.

2.2. Landasan Teori

2.2.1. Website Company Profile

Website company profile menyediakan informasi-informasi perusahaan beserta produk-produknya. Pada prinsipnya, website jenis ini hanya bertujuan mengenalkan perusahaan, baik produk, jasa atau portofolionya. Website ini juga dilengkapi dengan fitur- fitur yang mendukung perusahaan, seperti video, form kontak, form pesan dan online chat [7].

(3)

3

Selain itu, website company profile adalah website yang digunakan untuk menampilkan profil dan informasi lengkap seputar perusahaan atau bisnis. Dengan demikian, ketika seseorang mengakses website company profile, mereka akan tahu informasi seputar bisnis perusahaan, termasuk produk-produk yang dihadirkan. Sebuah perusahaan atau organisasi tentu mau jika profilnya dikenal luas. Untuk itu memilih website sebagai media publikasi profil perusahaan adalah salah satu cara yang inovatif[8].

2.2.2. PT. Kreasi Orang Muda (KreasiX)

Didirikan sejak tahun 2016, PT Kreasi Orang Muda yang menggunakan nama merek KreasiX fokus mengembangkan perangkat lunak (software) dan perangkat keras (hardware) layar digital (digital screen/digital signage) dengan beberapa pendekatan model bisnis yang fokus pada prospek suatu industri.

Setelah 3 (tiga) tahun berada di bisnis pengembang layar digital, KreasiX telah paham kebutuhan penggunanya khususnya dalam memaksimalkan potensi layar digital menjadi media yang produktif dan paling penting memiliki nilai ekonomi.

PT Kreasi Orang Muda bergerak pada bidang pengembangkan produk dengan berfokus pada 3 hal: proses belajar-mengajar (education), aktivitas bisnis (business), pelayanan dan hiburan (hospitality & entertainment). PT Kreasi Orang Muda juga mengembangkan teknologi khusus layar ukuran besar atau jumbotron.

Perusahaan ini, kini telah ada di 3 (tiga) kota: Bandung, Makassar, dan Salatiga, KreasiX dengan semangat dan ambisinya akan terus membuat produk teknologi yang dapat memberi dampak positif bagi usaha kliennya.

(4)

4 2.2.3. Nuxt Js

Nuxt Js adalah framework yang membantu dalam membangun aplikasi Vue.js yang diberikan server dengan mudah.

Framework ini mengabstraksi sebagian besar konfigurasi kompleks yang terlibat dalam mengelola hal-hal seperti data asinkron, middleware, dan routing. Nuxt Js mirip dengan Angular Universal untuk Angular dan Next.js untuk React[9]. Selain itu, Nuxt adalah framework pengembangan web Node.js tingkat tinggi untuk membuat aplikasi Vue yang dapat dikembangkan dan digunakan dalam dua mode berbeda: universal (SSR) atau single- page application (SPA). Di Nuxt Js dapat menerapkan SSR dan SPA sebagai aplikasi yang dibuat secara statis. Meskipun aplikasi dibuat dengan mode SPA, kekuatan penuh Nuxt terletak pada mode universal atau server-side rendering (SSR) untuk membangun aplikasi universal. Aplikasi universal digunakan untuk mendeskripsikan kode JavaScript yang dapat dijalankan baik di sisi klien maupun di sisi server. Nuxt dilengkapi dengan beberapa fitur tambahan seperti data asynchronous, middleware, layout, module, dan plugin yang menjalankan aplikasi di sisi server terlebih dahulu, lalu di sisi klien sehingga aplikasi yang dikembangkan dengan Nuxt Js lebih cepat dirender daripada aplikasi tradisional server- side (atau multi-page application)[10].

2.3. Hasil dan Pembahasan

2.3.1. Proses Pembangun Sistem

Penelitian pembangunan website company profile PT Kreasi Orang Muda (KreasiX) dilakukan dengan metode waterfall.

(5)

5

Gambar 1. Metode Waterfall

Metode pengembangan waterfall menekankan pada fase-fase yang berurutan dan sistematis, dimana diawali dengan tahap mengidentifikasi kebutuhan atau requirement dari aplikasi yang akan dibangun. Melalui metode ini, diharapkan aplikasi yang akan dibangun memiliki fondasi requirement yang baik sehingga hasilnya sesuai dengan kebutuhan user.

2.3.2. Perancangan Sistem 2.3.2.1. Use Case Diagram

Use Case Diagram merupakan gambaran dari interaksi yang akan dilakukan oleh aktor (orang yang memiliki peran dalam sistem) sehingga proses dari sistem yang ada berjalan sesuai dengan prosedur atau alur bisnis yang ada. Use Case Diagram dari setiap aktor akan menjadi patokan dalam pembuatan dan pengembangan dari sistem yang sedang dikerjakan.

(6)

6

Gambar 2. Use Case Diagram Pelanggan

Gambar 2 adalah use case diagram yang menunjukkan fiktur atau aksi yang bisa dilakukan oleh seorang pelanggan pada website company profile PT Kreasi Orang Muda (KreasiX).

2.3.2.2. Activity Diagram

Activity Diagram merupakan urutan yang dilakukan oleh aktor (orang yang memiliki peran dalam sistem) berdasarkan Use Case Diagram yang ada. Activity Diagram akan menjadi patokan dalam pembangunan sistem yang sedang dikerjakan.

(7)

7

Gambar 3. Activity Diagram Pelanggan

Gambar 3 adalah activity diagram yang menunjukkan aliran atau urutan aksi yang bisa dilakukan oleh seorang pelanggan pada website company profile PT Kreasi Orang Muda (KreasiX).

(8)

8 3. USER MANUAL

3.1. Halaman Beranda

Gambar 4. Halaman Beranda

Halaman beranda menampilkan semua produk yang dimiliki oleh PT Kreasi Orang Muda (KreasiX).

(9)

9 3.2. Halaman XBoard

Gambar 5. Halaman XBoard

Halaman XBoard menampilkan detail dan spesifikasi produk XBoard.

(10)

10 3.3. Halaman XTV

Gambar 6. Halaman XTV

Halaman XTV menampilkan detail dan spesifikasi produk XTV.

(11)

11 3.4. Halaman XThermal

Gambar 7. Halaman XThermal

(12)

12

Halaman XThermal menampilkan detail dan spesifikasi produk XThermal.

3.5. Halaman Layanan Pelanggan

Gambar 8. Halaman Layanan Pelanggan

Halaman layanan pelanggan menampilkan informasi kontak dan alamat kantor PT Kreasi Orang Muda (KreasiX).

4. HASIL PENGUJIAN SISTEM

Pengujian sistem dilakukan untuk mengetahui apakah sistem ini telah mencapai tujuannya berdasarkan analisis dan perancangan yang sudah dilakukan. Pengujian dilakukan dengan metode black box testing. Hasil pengujian dengan black box testing terdapat pada Tabel 1.

Tabel 1. Hasil Pengujian dengan Black Box Testing

No. Aktivitas Pengujian Hasil yang

Diharapkan Hasil Pengujian

1. Menekan logo KreasiX di navigation bar.

Pindah menu ke halaman beranda.

2. Menekan link XBoard di navigation bar.

Pindah menu ke halaman XBoard.

(13)

13 3. Menekan link XTV di

navigation bar.

Pindah menu ke halaman XTV.

4. Menekan link Kreasi Room di navigation bar.