9
BAB 3
PELAKSANAAN KERJA MAGANG
3.1 Kedudukan dan Koordinasi
PT Merah Putih media. Mempunyai divisi IT yang dimana divisi ini dipimpin oleh bapak Paulus Ganesha A.P. selaku Chief Technology Officer (CTO), bapak Rusmanto sebagai Head IT yang membawahi divisi Mobile Apps, Web Front End dan Web Back END. Struktur pada gambar 3.1 menjelaskan struktur organisasi detail dari divisi IT PT Merah Putih Media yang dijelaskan pada gambar 2.2.
Berikut ini struktur organisasi detail Divisi IT PT Merah Putih Media pada Gambar 3.1
Gambar 3. 1 Struktur organisasi Divisi IT PT Merah Putih Media
10 Perancangan Front End mobile apps mangiamo dipantau oleh bapak Rusmanto selaku Head IT PT Merahputih Media dan dibantu juga oleh bapak Ahmad Rifki sebagai penanggung jawab front end. dan juga sebagai pembimbing lapangan dalam kegiatan magang ini. Rapat dengan pembimbing lapangan dilaksanakan pada hari kamis tiap minggunya selama kerja magang berlangsung.
Di dalam rapat membahas mengenai update project yanga sedang dikerjakan, membahas pekerjaan yang akan datang dan melakukan pembagian tugas.
3.2 Tugas yang Dilakukan
Selama pelaksanaan kerja magang di PT Merah Putih Media, tugas yang dilakukan adalah membuat Front End atau tampilan Home, Menu sidebar, About, Promo, Menu detail dan Menu mobile apps client PT Merahputih Media yaitu resotran Mangiamo. Front End atau tampilan mobile apps akan digunakan untuk para customer atau pelanggan restoran mangiamo. Pembuatan Front End mobile apps ini dikerjakan dengan menggunakan framework Laravel.
Berikut rincian pekerjaan yang dilakukan di PT Merahputih Media :
Tabel 1. 1 Detail pekerjaan PerMinggu
Minggu ke- Pekerjaan yang dilakukan
1
Pengenalan lingkungan kantor Rapat dengan pembimbing
Instalasi framework dan aplikasi yang dibutuhkan untuk bekerja Pembagian tugas project dari perushaan
Mengerjakan html home
Mengerjakan html menu side bar Mengerjakan html about
Mengerjakan html promo
11 2
Mengerjakan html menu Mengerjakan html menu detail
Memindahkan html ke framework laravel
Mengerjakan header & footer laravel mobile apps Revisi html home, about us mobile
Membuat router link di setiap buttom 3 Membuat router link di setiap halaman detail
Memperbaiki link menu & menu detail Menambahkan route link about us & home 4 Menambahakan link untuk home.php
Menghubungkan database halaman menu dan menu detail 5 Mengatur posisi header app
Memperbaiki carosel menu di index/home
Membuat link carosel agar bisa ke halaman menu
6 Merapihkan menu buffet di halaman index/ home & mengatur link ke halaman menu
Fixing coloum pada tampilan menu
7 Membuat file js dan css baru utuk mobile apps Memperbaiki home.css
8 Memperbaiki css header dan menu sidebar Membuat css look galery
Memperbaiki detail update
9 Merapihkan halaman menu
Merapihkan halaman career header Membuat galery di detail blog
10 Membuat html banner kamibijak.com Membuat html banner merahputih.com Membuta html banner kabaroto.com 11 Membuat html banner side.id
Membuat UI infografis merahputih.com Merapihkan html banner kamibijak 12 Merapihkan html banner kabaroto.com
Merapihkan html banner meraputih.com
Membuat policy and privacy page beangasm.com 13
Memasukan image social&media beangasm.com Create contact page beangasm.com
Merapihkan card artikel list beangasm.com Membuat terms & condition page beangasm.com
12 14
Testing web lemerebeauty.id Testing web & apps meraputih.com Testing web side.id
Testing web acquaree spa
Testing web & apps bolaskor.com Testing web JHLgroup.com
Pada minggu pertama pelaksanaan kerja magang, melakukan pengenalan lingkungan kantor, berkenalan dengan karyawan dan staff perusahaan. Setelah itu melakukan rapat dengan pembimbing lapangan terkait pekerjaan yang akan dilakukan, tools yang akan digunakan, dan membahas tentang proyek MANGIAMO. Lalu menginstal aplikasi yang diperlukan untuk bekerja seperti install aplikasi Sourcetree, XAMPP, framework LARAVEL, dan mendaftar akun GitLab. Setelah menerima rancangan antra muka dari tim desain, penulis mulai mengerjakan html home, html menu sidebar, html about dan html promo. Pada minggu kedua pelaksanaan kerjan magang, melanjutkan pengerjaan html home, html menu sidebar, html about dan html promo, dan membuat html menu dan menu detail. Saat pengerjaan html berlangsung penulis diminta untuk membuat header dan footer untuk laravel mobile app, membuat router link di setiap buttom dan diminta untuk merevisi UI ( User interface ) home dan about us mobile.
Pada minggu ketiga pelaksanaan kerja magang, memindahkan pekerjaan html ke framework laravel, menambahkan router link di setiap halaman detail, detailing link menu dan detail menu dan menambahkan router link about us &
home.Pada minggu keempat pelaksanaan kerja magang, menambahkan link database untuk home.php dan menghubungkan database ke halaman menu dan menu detail.Pada minggu kelima pelaksanaan kerja magang, mengatur positioning
13 header app, menedit carosel menu di index, detailing menu carosel dan mengatur routerlink untuk pindah ke halaman menu.Pada minggu keenam pelaksanaan kerja magang, melakukan detailing menu buffet, mengatur routerlink ke halaman menu dan fixing coloum pada tampilan menu.
Pada minggu ketujuh pelaksanaan kerja magang, membuat file js unutk apps, membuat css unutk apps dan melakukan update pada home.css. Pada minggu kedelapan pelaksanaan kerja magang, update header dan menu sidebar, membuat file css untuk galery look dan update halaman detail blog. Pada minggu kesembilan pelaksanaan kerja magang, datailing halaman menu, detailing career header dan membuat galery di detail blog. Pada minggu kesepuluh pelaksanaan kerja magang, penulis diminta untuk membuat html banner untuk web berita kamibijak.com, merahputih.com, dan kabaroto.com. Pada minggu kesebelas pelaksanaan kerja magang, penulis diminta untuk membuat html banner untuk web side.id, membuat UI untuk meraputih.com dan merapihkan html banner kamibijak.com.
Pada minggu keduabelas pelaksanaan kerja magang, merapikan html banner untuk web kabaroto.com dan merahputih.com. Pada saat merapihkan html banner penulis diminta untuk membuat halaman policy dan privacy beangasm.com. Pada minggu ketigabelas pelaksanaan kerja magang, penulis diminta menambahkan image sosial media untuk web beangasm.com, create contact page beangasm.com, fixing card articel list beangasm.com dan membuat create terms & condition page. Pada minggu keempatbelas pelaksanaan kerja magang, penulis di minta untuk melakukan testing aplikasi. Melakukan testing aplikasi pada website milik cliet yaitu lemereneauty.id, testing dilakukan pada
14 website versi desktop dan versi mobile. Melakukan testing aplikasi pada website milik cliet yaitu acquaree.com, testing dilakukan pada website versi desktop dan versi mobile. Melakukan testing aplikasi pada website milik cliet yaitu jhlgroup.co.id, testing dilakukan pada website versi desktop dan versi mobile.
Melakukan testing aplikasi pada website dan mobile apps bolaskor.com, merahputih.com dan side.id.
3.3 Proses Pelaksanan Kerja Magang
3.3.1. Flowchart Aplikasi A. Flowchart Home
Pada halaman home akan menampilan poster restoran MANGIAMO, history restoran, jenis jenis menu restoran, pelayanan restoran, pilihan menu buffet, pesan dari chef, dan testimonial tentang restoran.
15 Gambar 3. 2 Flowchart halaman Home
Flowchat pada gambar menjelaskan ketika user masuk ke halaman home, user akan melihat tampilan poster dari restoran. Lalu di bawah tampilan poster,
16 user melihat konten oustory dimana konten ini berisi cerita tantang restoran, isi konten ini diambil dari tabel abouts. Ketika user ingin membaca konten ourstory, user dapat menekan tombol read more lalu akan berpindah halam ke halaman about-us. Namun jika user tidak menekan tombol read more makan user dapat melihat pilihan jenis menu yang
disediakan oleh restoran. Lalu user dihadapkan dengan pilihan jenis menu apabila user memilih salah satu jenis menu maka user akan berpindah ke halaman menu, jenis menu yang ditampilkan diambil dari tabel menu_kategori. Namun jika user tidak memilih jenis menu maka user akan melihat sesi tampilan pelayanan restoran, didalam tampilan ini terdapat 4 gambar tentang pelayanan restoran.
Setelah melihat sesi tampilan pelayanan restoran user akan dihadapkan dengan pilihan menu jenis buffet yang disediakan oleh restorat ketika user memilih salah makanan yang ada di menu buffet makan user akan berpindah kehalaman menu buffet, data makanan yang terdapat dalam menu buffet di ambil dari tabel menus yang terdapat di dalam database. Namu jika user tidak memilih makan yanga ada di menu buffet makan user dapat melihan sesi tampilan konten chef. Setelah melihat sesi konten chef user akan
melihat tampilan caroses yang berisikan tetimoni dari pelanggan restoran, data testimoni ini diambil dari tabel testimonial yanga terdapat di database.
B. Flowchart Fitur Sidebar
Pada web aplikasi ini tedapat fitur sidebar, fitur ini merupakan navigasi untuk pindah ke halaman home, halaman about us, halaman menu, halaman gallery, halaman promo, halaman blog dan halaman contact. Berikut ini adalah gambar flowchart dari fitur sidebar.
17 Gambar 3. 3 Flowchart Fitur Sidebar
18 Flowchart pada gambar menjelaskan ketika user menggunakan fitur sidebar. Proses ini akan dimulai ketika user mengklik burger buttom akan menampilkan navigasi untuk pindah halaman. Apabila user memilih icon mangiamo, maka user akan kembali ke halaman home, jika tidak memilih icon mangiamo user dapat memilih pilihan navigasi lainnya seperti about us. Apabila user memilih about us user akan berpindah ke halaman about us, jika tidak memilih about us user dapat memilih pilhan navigasi lainnya seperti menu. Ketika user memilih menu makan user akan berpindah ke halaman menu, jika user tidak memilih menu maka user dapat memilih navigasi lainnya seperti gallery. Ketika user memilih gallery user akan berpindah ke halaman gallery, jika user tidak memilih gallery maka user dapat memilih navigasi lainnya seperti promo.
Apabila user memilih promo maka user akan berpindah ke halaman promo, jika user tidak milih promo user dapat memilih navigasi lainnya seperi blog. Apabila user memilih blog maka user akan berpindah ke halaman blog, jika user tidak memilih blog maka user dapat memilih navigasi lainnya seperti contact. Ketika user memilih contact makan user akan berpidah ke halaman contact, jika user tidak memilih contact user dapat memilih navigasi lainnya.
C. Flowchart Menu
Pada halaman menu, halaman ini akan menampilkan berbagai jenis menu makanan milik restoran MANGIAMO. Disini user dapat memilih jenis menu makanan secara acak dikarenakan halaman ini menggunakan fitur combo box.
Berikut flowchart pada halaman menu.
19 Gambar 3. 4 Flowchart halaman Menu
Flowchat pada gambar menjelaskan ketika user masuk ke halaman menu, user melihat halaman menu, dimana default dari halaman ini adalah menu buffet.
Jika user memilih menu makanan di menu buffet, jika user memilih menu makanan yang ada di menu buffet maka user makan pindah ke halaman menu
20 detail, namun apabila user tidak mengklik menu makanan maka user tetap berada di tampilan jenis buffet. Jika user tidak memilih menu buffet maka user dapat memilih menu lainnya seperti pizza. Ketika user memilih menu pizza, maka muncul tampilan jenis pizza, apabila user mengklik jenis menu makan yang ada di menu pizza maka user akan berpindah ke halaman menu detail, namun apabila user tidak mengklik menu makanan maka user tetap berada di tampilan jenis pizza. Jika user tidak memilih menu pizza maka user dapat memilih menu lainya seperti pasta.
Ketika user memilih menu pasta, maka muncul tampilan jenis pasta, apabila user mengklik jenis menu makanan yang di menu pasta maka user akan berpindah ke halaman menu detail, namun apabila user tidak mengklik menu makanan maka user akan tetap berada di tampilan jenis pasta. Jika user tidak memilih menu pasta maka user dapat memilih menu lainnya seperti salad. Ketika user memilih menu salad, maka muncul tampilan jenis salad, apabila user mengklik jenis menu makanan yang ada di menu salad user akan berpindah ke halaman menu detail, namun apabila user tidak mengklik menu makanan maka user tetap berada di tampilan jenis salad.
Jika user tidak memilih menu pasta maka user dapat memilih menu lainnya seperti dessert. Ketika user memilih menu dessert, maka muncul tampilan jenis dessert, apabila user mengklik jenis menu makanan yang ada di menu dessert maka user akan berpindah kehalaman menu detail, namun apabila user tidak mengklik menu makanan maka user tetap berada di tampilan jenis pasta. Jika user tidak memilih menu dessert maka user dapat memilih menu lainnya.
21 Data jenis menu yang digunakan pada flowchart di atas diambil dari tabel menu_kategori dan data pada jenis menu makanan pada flowchart diambil dari tabel menus, masing masing data yang digunakan terdapat di dalam database restoran MANGIAMO.
D. Flowchart Menu Detail
Pada halaman menu detail, halaman ini masuk setelah proses dari halaman menu, halaman menu detail akan menampilkan buttom nama jenis menu, gambar menu dan keterangan tentang menu. Berikut ini flowchart menu detail.
Gambar 3. 5 Flowchart halaman Menu Detail
22 Flowchart pada gambar menjelaskan ketika user masuk ke halaman menu detail. Peroses ini akan dimulai dari user memasuki halaman menu, ketika user memilih menu makanan maka user akan masuk ke halaman detail menu. Ketika user masuk ke halaman detail menu akan ada buttom nama jenis menu, ketika buttom nama jenis menu ini diklik maka akan kembali ke halaman menu, buttom ini berfungsi untuk kembali ke halaman menu jenis makan, ketika user tidak mengklik buttom nama jenis makan maka user akan melihat gambar menu makanan yang sudah dipilih lalu user juga bisa melihat keterangan tentang menu yang dipilih.
Data yang dipakai untuk buttom nama jenis menu diambil dari tabel menu_kategori dan data gambar menu dan keterangan tentang menu diambil dari tabel-menus yang terdapat di dalam database restoran MANGIAMO.
E. Flowchart About us
Pada halaman about us akan menampilkan history tentangan retoran MANGIAMO, gambar restoran, pelayanan restoran , gambar restoran ke 2, konten text atmosphare, tampililan our standart, konten meet our team, sesi gallery, untuk tampilan dari halaman gallery proses pengerjaannya dilakukan oleh rekan magang penulis yaitu Muhammad Naufal Rhandika. Dan sesi careers, untuk tampilan halamannya proses pengerjaannya dilakukan oleh rekan magang penulis yaitu Muhammad Naufal Rhandika. Berikut ini flowchart about us.
23 Gambar 3. 6 Flowchart halaman About Us
Flowchart pada gambar menjelaskan ketika user masuk ke halaman about us, user akan melihat tampilan about, lalu melihat konten a long histori tentang restoran, user akan melihat tampilan image atau gambar restoran, lalu di bawah
24 tampilan image restoran user akan melihat konten tentang pelayanan yang diberikan oleh restoran, setelah melihat tentang pelayanan restoran user akan kembali melihat tampilan image 2 atau gambar ke2, lalu di bawah image 2 user akan melihat konten text atmosphere restoran, lalu di bawah konten text atmosphere restoran user akan melihat tampilah dari sesi our standart, di bawah tampilan out standart user akan melihat tampilan dari konten meet our team.
Lalu di bawah tampilan meet our team user dapat melihat tampilan dari sesi gallery dimana pada sesi gallery ini terdapat buttom gallery, ketika user mengklik buttom gallery makanan akan berpindah ke halaman gallery, ketika user tidak mengklik buttom maka user bisa melihat tampilan sesi careers. Pada tampilan sesi careers terdapat buttom careers, ketika user mengklik buttom tersebut user akan berpindah ke halaman careers, ketika user tidak mengklik buttom tersebut user dapat melihat isi konten lainnya yang tedapat di halaman about us.
F. Flowchart Promo
Pada halaman promo, halaman ini proses awal sebelum memasuki halaman detail Promo, Namun proses pengerjaan tampilan halaman detail Promo dilakukan oleh rekan magang penulis yaitu Muhammad Naufal Rhandika. Halaman Promo menampilkan konten tampilan Promo.
25 Gambar 3. 7 Flowchart halaman Promo
Flowchart pada gambar menjelaskan ketika user masuk ke halaman Promo, user akan melihat tampilan jenis jenis Promo, pada tampilan jenis promo ini bisa di klik, ketika user mengklik jenis promo maka akan berpindah ke halaman Promo detail. Ketika user tidak mengklik jenis menu maka user bisa melihat jenis promo lainnya.
26 3.3.2. Sitemap Umum Aplikasi
Gambar 3. 8 Sitemap Umum Aplikasi
Website Mangiamo adalah website yan berisikan informasi dan katalog dari restoran Mangiamo. Pada saat pertama kali membuka website ini akan menapilkan laman home, pada laman ini berisikan poster dari restoran Mangiamo, konten our story yang berisikan sedikit cerita tentang restoran dalam konten ini terdapat buttom read more untuk berpindah ke halaman about-us untuk cerita lebih detailnya, carousel jenis menu untuk melihat jenis menu yang terdapat pada restoran mangiamo ketika salah satu carousel jenis menu ini diklik maka akan berpindah ke halaman menu, carousel Buffet menu untuk melihat menu makanan jenis buffet yang disediakan oleh restoran Mangiamo mangiamo ketika salah satu carousel buffet menu ini diklik maka akan berpindah ke halaman menu jenis buffet dan testimonial pengujung tertimonial ini dalam bentuk carousel. Pada website ini terdapat sebuah fitur Navbar yang berfungsi untuk mempermudah pengguna berpindah halaman yang berada di dalam website Mangiamo. Laman About-us informasi tentang restoran yang berisikan sejarah dan pelayanan yang
27 diberikan restoran dalam laman ini terdapat buttom gallery yang berfunsi untuk berpindah ke halaman gallery untuk melihat gambar-gambar restoran dan juga terdapat buttom careers untuk pengguna yang ingin berkarir di retoran Mangiamo.
Laman menu restoran Mangiamo berfungsi sebagai katalog jenis menu dan makan yang disediakan restoran dalam lamaman menu ini berisikan gambar makanan dari tiap jenis menu yang disediakan, ketika pengguna mengklik salah satu gambar makan maka akan berpindah ke halaman menu detail lama menu detail berisikan gambar dan keterangan dari tiap makanan. Laman promo berfungsi untuk memberikan informasi tentang promo yang ada pada restoran laman berisikan poster-poster promo dan keterangan promo yanga diberikan oleh restoran, ketika pengguna mengklik salah satu poster akan berpindah ke halaman poster detail yang berisikan gambar dan keterangan tentang poster promo. Laman blog memberikan beberapa artike tentang restoran Mangiamo dan setiap artikel yang di klik oleh pengguna akan berpindah ke halaman blog detail. Dan laman contact berikan informasi tentang alamat dari restoran Mangiamo dalam laman ini pengguna dapat melakukan reservasi online dan memberikan kesan dan pesan pada restoran melalui form yang disediakan pada laman ini.
Pada Website ini penulis ditunjuk untuk mengimplementasi desain tampilan website mobile yang sudah disediakan oleh tim desain dari PT Merah Putih Media. Laman yang diimplementasikan penulis dalam website Mangiamo yaitu laman Home, Fitur Navbar, Laman menu, Laman Menu Detail, Laman About-Us, dan Laman Promo.
28 3.3.3. Rancangan Antarmuka
Rancangan anatarmuka ini didesain oleh tim desain Merah Putih Media.
Rancangan anatarmuka yang didesain oleh tim Merah Putih Media adalah rancangan yang sudah disetujui oleh pihak Restoran MANGIAMO untuk diimplementasikan ke dalam bentuk web seperti yang penulis kerjakan.
Berikut ini adalah rancangan antar muka website MANGIAMO versi mobile dalam bentuk image file JPEG.
A. Rancangan Antarmuka Halaman Home
Rancangan antarmuka halaman home menampilkan konten poster tentang restoran MANGIAMO, lalu di bawahnya mempilkan konten our story untuk melihat lebih detailnya terdapat tombol read more¸ setalah itu menpikan konten jenis jenis menu yang terdapat di retoran MANGIAMO, lalu menampilkan konten pelayanan dari restoran MANGIAMO, setelah itu menampilkan konten pilihan menu makannan jenis buffet, lalu menampilkan konten komentar chef, setelah itu menampilkan konten testimonial. Rancangan antarmuka dapat dilihat pada Gambar 3.9 .
29 Gambar 3. 9 Rancangan Antarmuka halaman Home
B. Rancangan Antarmuka Fitur Sidebar
Rancangan antarmuka fitur sidebar merupakan sebuah halaman baru yang akan menampilkan navigasi untuk kembali ke halaman home dengan
30 menggunakan logo dari restoran MANGIAMO, lalu di bawahnya ada navigasi untuk ke halaman about us, setelah itu menampilkan navigasi untuk kehalaman menu, lalu di bawahnya menampilkan navigasi untuk halaman gallery, setelah itu menampilkan navigasi untuk ke halaman promotion, setelah itu menampilkan navigasi untuk ke halaman blog, lalu di bawahnya menampilkan navigasi untuk ke halaman contact.
Gambar 3. 10 Rancangan Antarmuka Fitur Sidebar
31 C. Rancangan Antarmuka Halaman Menu
Rancangan antarmuka halaman menu menampilkan Gambar makanan restoran MANGIAMO, lalu di bawahnya terdapat combo box yang berisikan jenis jenis menu restoran, setelah itu menampilkan gambar menu makanan yanga disediakan oleh restoran MANGIAMO.
Gambar 3. 11 Rancangan Antarmuka halaman Menu
32 D. Rancangan Antarmuka Halaman Menu Detail
Rancangan antarmuka halaman menu detail menampilkan tombol untuk kembali ke halaman menu dengan nama jenis menu yanga dipilih, lalu menampilkan gambar dan nama makanan, setelah itu di bawahnya menampilkan subjudul dan penjelasan tentangan makan tersebut. Di antara subjudul dan pejelasan dipisahkan dengan garis lurus berwarna, lalu di bawahnya menampilkan gambar makanan.
Gambar 3. 12 Rancangan Antarmuka halaman Menu Detail
33 E. Rancangan Antarmuka Halaman About Us
Rancangan antarmuka halaman about us menampilkan konten a long history yang berisikan cerita tentang restoran MANGIAMO, lalu di bawahnnya menapilkan konten gambar restoran MANGIAMO, setelah itu menampilkan konten pelayanan restoran MANGIAMO, lalu di bawahnya menampilkan gambar restoran MANGIAMO, setelah itu menampilkan konten atmosphare dalam konten ini menjelaskan tentang atmosphare dari restoran MANGIAMO, lalu menampilkan konten tentang out standarts dari restoran MANGIAMO, di antara konten atmosphare dan our standarts terdapat pemisah berupa garis putus putus.
Menampilkan konten meet our team yang berisikan penjelasan, gambar dan pada konten ini terdapat tombol our team. Lalu di bawahnya menampilkn konten gallery yang menampilkan gambar, penjelasan dan tombol gallery, setelah itu menampilkan konten galley yang menampilkan judul, penjelasan dan terdapat tombol careers.
34 Gambar 3. 13 Rancangan Antarmuka halaman About Us
35 F. Rancangan Antarmuka Halaman Promo
Rancangan antarmuka halaman promo menampilkan gambar dan judul promo dari restoran MANGIAMO. Pada konten promo ini terdapat garis putus- putus sebagai pemisah diantar promo promo yang ada di restoran MANGIAMO.
Gambar 3. 14 Rancangan Antarmuka halaman Promo
36 3.3.4. Implementasi Aplikasi
Dalam pengimplementasian web mobile Mangiamo penulis Mengacu pada handphone android SAMSUNG Galaxy S5 yang memiliki resolusi 360 640 untuk pengimplementasian.
A. Implementasi Halaman Home
Implementasi halaman Home terjadi beberapa perubahan. Sebagian perubahan terjadi karena hasil evaluasi dari tim desain Merah Putih Media dengan client.
Berikut hasil perubahan implementasi :
1. Poster pada halaman home berubah bentuk yang semula vertikal pada mockup menjadi horizontal pada hasil implementasi
2. Gambar pada pilihan jenis menu berubah menjadi gambar yang vertikal pada hasil implementasi, perubahan ini bertujuan untuk kenyamanan user experience
3. Formasi pada gambar konten pelayanan restoran di rubah menjadi formasi gambar dua kali dua demi kenyamanan UI/UX mobile.
4. Pada sesi buffet menu yang semula menampilkan semua makanan menu buffet di rubah hanya menampilkan satu item menu dan dapat di slide ke kanan maupun ke kiri.
5. Pada sesi testimonial background gambar diganti oleh team desain Merah Putih Media.
37 Gambar 3. 15 Implementasi halaman Home
38 B. Implementasi Fitur Sidebar
Pada implementasi fitur sidebar terjadi perubahan cara implementasinya yang semula merupakan sebuah halaman baru pada mockup menjadi animasi slide tanpa berpindah halaman.
Gambar 3. 16 Implementasi Fitur Sidebar
39 C. Implementasi Halaman Menu
Pada implementasi halaman menu tidak terjadi perubah bentuk dari mockup yang dibuat oleh tim desain Merah Putih Media.
Gambar 3. 17 Implementasi halaman Menu
40 D. Implementasi Halaman Detail Menu
Pada implementasi halaman Detail Menu tidak terjadi perubah bentuk dari mockup yang dibuat oleh tim desain Merah Putih Media.
Gambar 3. 18 Implementasi halaman Detail Menu
41 E. Implementasi Halaman About Us
Implementasi halaman About Us terjadi beberapa perubahan. Sebagian perubahan terjadi karena hasil evaluasi dari tim desain Merah Putih Media dengan client.
Berikut hasil perubahan implemntasi :
1. Konten A long history pada halaman About Us berubah bentuk yang semula horizontal pada mockup menjadi vertikal pada hasil implementasi
2. Konten Atmosphare pada halaman About Us berubah bentuk yang semula horizontal pada mockup menjadi vertikal pada hasil implementasi
3. Konten Out Standart pada halaman About Us berubah bentuk yang semula horizontal pada mockup menjadi vertikal agar sesuai dengan device mobile yang digunakan user.
4. Konten Meet our team pada halaman About Us berubah bentuk yang semula horizontal pada mockup menjadi vertikal agar sesuai dengan device mobile yang digunakan user dan menghilangkan tombol our team.
5. Konten Gallery pada halaman About Us berubah bentuk yang semula horizontal pada mockup menjadi vertikal. Perubahan tejadi pada posisi gambar menjadi di atas penjelasan.
42 Gambar 3. 19 Implementasi halaman About Us
43 F. Implementasi Halaman Promo
Pada implementasi halaman Promo terjadi sedikit perubahan pada size gambar yang semula full pada mockup menjadi menggunakan padding kanan kiri pada hasil implementasi dan menghilangkan pembatas garis putus-putus pada halaman promo.
Gambar 3. 20 Implementasi halaman Promo
44 3.3.6 Kendala yang Dihadapi
Selama proses kerja magang berlangsung, terdapat kendala yang dihadapi yaitu kesulitan mengimplementasikan tampilan halaman Home mirip seperti rancangan antarmuka karena asset yang diberikan selama proses pengerjaan adalah asset untuk tampilan desktop sehingga sulit untuk digunakan di tampilan web mobile.
3.3.7 Solusi atas Kendala yang Dihadapi
Solusi dari kendala yang dialami adalah, berdiskusi untuk meminta perubahan asset pada tampilan halaman Home dengan pembimbing lapangan yaitu Bapak Rusmanto selaku Head IT Merah Putih Media dan supervisi magang yaitu Ahmad Rifki selaku Front End Developer IT Merah Putih Media.
