PEMBUATAN WEBSITE E-COMMERCE PADA CV. KHC GROUP
LAPORAN KERJA MAGANG
Clarita Putri 00000013596
PROGRAM STUDI SISTEM INFORMASI FAKULTAS TEKNIK DAN INFORMATIKA UNIVERSITAS MULTIMEDIA NUSANTARA
TANGERANG
2022
ii
PERNYATAAN
iii
HALAMAN PENGESAHAN
Laporan Kerja Magang dengan judul
“PEMBUATAN WEBSITE E-COMMERCE PADA CV. KHC GROUP”
oleh
Clarita Putri
telah diujikan pada hari Senin, 03 Januari 2022, pada pukul 10.00 s.d. 11.00 dan dinyatakan lulus
dengan susunan penguji sebagai berikut.
Dosen Pembimbing Penguji
Suryasari, S.Kom., M.T. Melissa Indah Fianty, S.Kom., M.MSI.
Disahkan oleh
Ketua Program Studi Sistem Informasi - UMN
iv
KATA PENGANTAR
Pertama-tama penulis mengucapkan puji dan syukur pada kehadirat Tuhan Yang Maha Esa yang telah memberikan rahmat dan anugerah-Nya sehingga penulis dapat menyelesaikan laporan kerja magang yang berjudul “PEMBUATAN WEBSITE E-COMMERCE PADA CV. KHC GROUP” dengan baik dan lancar.
Tidak lupa penulis mengucapkan banyak terima kasih kepada Universitas Multimedia Nusantara (UMN) yang telah memberikan berbagai ilmu pengetahuan di bidang sistem informasi pada saat melakukan perkuliahan di UMN. Dan pastinya penulis juga berterimakasih kepada CV. KHC GROUP karena telah memberikan kesempatan dan wadah untuk melakukan kerja praktik magang yang berdasarkan ilmu sistem informasi yaitu sebagai WEB DESIGNER UI/UX di CV. KHC GROUP.
Selama 60 hari kerja, banyak pengalaman, yang didapat oleh penulis, seperti berinteraksi dan bekerja sama dengan orang baru, membuat suatu desain web untuk klien, melakukan pemilihan warna dan tulisan yang sesuai dengan tema yang dinginkan.
Oleh karena itu, penulis tidak lupa untuk mengucapkan terima kasih sebesar- besarnya kepada beberapa pihak:
1. Orangtua dan keluarga dekat penulis atas doa dan dukunganya yang telah memotivasi penulis dari awal menjalani magang hingga selesai.
2. Ibu Ririn Ikana Desanti, S.Kom., M.Kom., selaku Ketua Program Studi Sistem Informasi yang telah mengesahkan laporan magang penulis.
3. Ibu Suryasari, S.Kom., M.T., sebagai dosen pembimbing magang yang bersedia membantu dalam menyelesaikan proses magang dari awal hingga selesai sebaik-baiknya.
4. Ibu Melissa Indah Fianty, S.Kom., M.MSI., sebagai dosen penguji yang telah menguji pada sidang magang,.
5. Para dosen Sistem Informasi lainnya yang telah mengajar dan membimbing sehingga penulis mendapatkan ilmu yang bisa dilakukan dalam dunia kerja.
v
6. Bapak Ricky Salim dan Ibu Evelyn Maxentia selaku pembimbing magang sekaligus sebagai owner CV. KHC GROUP yang telah bersedia menerima penulis dalam kerja praktik magang yang sangat membantu penulis untuk mengembangkan kemampuan untuk menjadi seorang WEB DESIGNER UI/UX.
7. Joshua Jimmy Junior Sunaryo, sebagai pasangan yang selalu mengingatkan dan menyemangati penulis untuk selalu mengerjakan laporan magang dengan tepat waktu.
Penulis berusaha melakukan yang terbaik dalam melaksanakan kerja praktik magang hingga menyusun laporan magang ini, harapan penulis semoga laporan kerja magang ini juga dapat menjadi bahan referensi dan contoh untuk para pembaca yang juga akan melakukan kegiatan magang.
Tangerang, 08 November 2021
Clarita Putri
vi
DAFTAR ISI
PERNYATAAN ... ii
HALAMAN PENGESAHAN ... iii
KATA PENGANTAR ... iv
DAFTAR ISI ... vi
DAFTAR GAMBAR ... viii
DAFTAR TABEL ... x
ABSTRAK ... xi
ABSTRACT ... xii
BAB I PENDAHULUAN ... 1
1.1 Latar Belakang Masalah ... 1
1.2 Maksud dan Tujuan Pelaksanaan Kerja Magang ... 2
1.3 Waktu dan Prosedur Pelaksanaan Kerja Magang ... 2
1.3.1 Waktu Pelaksanaan Kerja Magang ... 2
1.3.2 Prosedur Pelaksanaan Kerja Magang ... 4
BAB II GAMBARAN UMUM PERUSAHAAN ... 5
2.1 Gambaran Umum Perusahaan ... 5
2.2 Visi dan Misi Perusahaan ... 8
2.3 Struktur Organisasi Perusahaan ... 8
BAB III PELAKSANAAN KERJA MAGANG... 10
3.1 Kedudukan dan Koordinasi ... 10
3.2 Tugas yang Dilakukan... 10
3.3 Uraian Pelaksanaan Kerja Magang ... 10
vii
3.3.1 Minggu ke-1 sampai 2: Membuat Mockup rancangan website ... 11
3.3.2 Minggu ke-3 sampai 4: Mendesain website ... 19
3.3.3 Minggu ke-5 sampai 8: Konversi Layout visual ke HTML dan CSS ... 19
3.3.4 Minggu ke-9 sampai 10: Melakukan Uji Coba Testing kepada admin 33 3.4 Kendala Yang Dihadapi ... 41
3.5 Solusi Atas Kendala Yang Ditemukan ... 41
BAB IV KESIMPULAN DAN SARAN ... 42
4.1 Kesimpulan ... 42
4.2 Saran ... 42
4.2.1 Saran Untuk Perusahaan ... 42
4.2.2 Saran Untuk Universitas ... 43
4.2.3 Saran Untuk Mahasiswa ... 43
DAFTAR PUSTAKA ... 44
LAMPIRAN ... 45
viii
DAFTAR GAMBAR
Gambar 2. 1 Logo CV KHC GROUP ... 5
Gambar 2. 2 Logo Tipsanggun, Beautology & Bambinitoys... 5
Gambar 2. 3 Tampilan Halaman Tipsanggun.com ... 6
Gambar 2. 4 Tampilan Halaman beautology.id ... 7
Gambar 2. 5 Tampilan Halaman by.bambinitoys ... 7
Gambar 2. 6 Struktur Organisasi CV. KHC GROUP ... 8
Gambar 3. 1 Gambaran Kasar Rancangan Website ... 11
Gambar 3. 2 Mockup Tampilan Halaman Homepage ... 12
Gambar 3. 3 Mockup Tampilan Halaman Your Cart ... 14
Gambar 3. 4 Mockup Tampilan Halaman Checkout ... 15
Gambar 3. 5 Mockup Tampilan Halaman Login ... 16
Gambar 3. 6 Mockup Tampilan Halaman Menu ... 17
Gambar 3. 7 Tampilan Halaman Product Detail ... 18
Gambar 3. 8 Tampilan Halaman Homepage KHC GROUP ... 20
Gambar 3. 9 Contoh Coding HTML CSS Halaman Homepage ... 22
Gambar 3. 10 Tampilan Halaman Login KHC GROUP ... 23
Gambar 3. 11 Tampilan Halaman Tipsanggun KHC GROUP ... 24
Gambar 3. 12 Tampilan Halaman Beautology KHC GROUP ... 25
Gambar 3. 13 Tampilan Halaman Bambinitoys KHC GROUP ... 26
Gambar 3. 14 Tampilan Halaman Best Seller KHC GROUP ... 27
Gambar 3. 15 Tampilan Halaman Product Detail 1 KHC GROUP ... 28
Gambar 3. 16 Tampilan Product Detail 2 KHC GROUP ... 29
Gambar 3. 17 Tampilan Product Detail 3 KHC GROUP ... 29
Gambar 3. 18 Tampilan Halaman Your Cart KHC GROUP ... 30
Gambar 3. 19 Tampilan Halaman Checkout 1 KHC GROUP ... 31
Gambar 3. 20 Tampilan Halaman Checkout 2 KHC GROUP ... 32
Gambar 3. 21 Tampilan Halaman Checkout 3 KHC GROUP ... 33
ix
Gambar 3. 22 Nama Responden... 34
Gambar 3. 23 Hasil Pertanyaan Kuesioner No 1 ... 35
Gambar 3. 24 Hasil Pertanyaan Kuesioner No 2 ... 35
Gambar 3. 25 Hasil Pertanyaan Kuesioner No 3 ... 36
Gambar 3. 26 Hasil Pertanyaan Kuesioner No 4 ... 36
Gambar 3. 27 Hasil Pertanyaan Kuesioner No 5 ... 37
Gambar 3. 28 Hasil Pertanyaan Kuesioner No 6 ... 37
Gambar 3. 29 Hasil Pertanyaan Kuesioner No 7 ... 38
Gambar 3. 30 Hasil Pertanyaan Kuesioner No 8 ... 38
Gambar 3. 31 Hasil Pertanyaan Kuesioner No 9 ... 39
Gambar 3. 32 Hasil Pertanyaan Kuesioner No 10 ... 39
Gambar 3. 33 Penilaian SUS ... 41
x
DAFTAR TABEL
Tabel 1. 1 Timeline Pelaksanaan Kerja Magang ... 3 Tabel 3. 2 Perhitungan SUS ... 40
xi
PEMBUATAN WEBSITE E-COMMERCE PADA CV. KHC GROUP ABSTRAK
Oleh: Clarita Putri
CV. KHC GROUP merupakan Usaha Kecil Menengah (UKM) yang bergerak di bidang produk kecantikan, pakaian dalam, dan mainan anak sejak tahun 2013 yang memiliki masing-masing website bernama tipsanggun.com, beautology.id, dan bambnitoys.id. Namun, ketiga website tersebut ingin digabung dengan tujuan untuk memudahkan customer dalam melihat ketiga produk tersebut tanpa harus membuka website satu per satu.
Dalam pembuatan website KHC GROUP, digunakan Balsamiq Mockup 3 sebagai tools untuk pembuatan perancangan awal design berupa mockup. Setelah mockup dibuat, dilakukan konversi layout visual ke dalam HTML CSS menggunakan sublime text. Tampilan dilakukan uji coba ke admin KHC GROUP menggunakan metode usability testing dan system usability scale untuk mengetahui apakah web sudah sesuai dengan standardisasi dan apakah web mudah digunakan oleh pengguna.
Perolehan nilai skor untuk kuesioner setelah usability testing adalah sebesar 88,214 dengan rating “excellent”. Kesimpulan yang didapat selama proses kerja magang, memberikan pengalaman baru sebagai seorang WEB DESIGNER UI/UX dalam membuat suatu rancangan website dan merasa berhasil dalam merancang website karena memperoleh nilai usability testing diatas rata-rata standardisasi SUS.
Kata Kunci: CV. KHC GROUP, website, WEB DESIGNER UI/UX
xii
E-COMMERCE WEBSITE CREATION ON CV. KHC GROUP ABSTRACT
By: Clarita Putri
CV. KHC GROUP is a Small and Medium Enterprise (SME) that has been engaged in beauty products, underwear, and children's toys since 2013 which has each website named tipsanggun.com, beutology.id, and bambnitoys.id. However, the three websites want to be combined to make it easier for customers to see the three products without having to open websites one by one.
In making the KHC GROUP website, Balsamiq Mockup 3 is used as a tool for making the initial design in the form of a mockup. After the mockup is created, the visual layout is converted into HTML CSS using sublime text. The display was tested on the KHC GROUP admin using the usability testing method and the usability scale system to find out whether the web is by the standardization and whether the web is easy to use by users.
The score for the questionnaire after usability testing is 88.214 with an
"excellent" rating. The conclusions obtained during the internship process provide new experiences as a WEB DESIGNER UI/UX in making a website design and feel successful in designing the website because the usability testing value is above the SUS standardization average.
Keywords: CV. KHC GROUP, website, WEB DESIGNER UI/UX
