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

x Pengenalan lingkungan kantor x Rapat dengan pembimbing x Instalasi framework dan aplikasi yang dibutuhkan untuk bekerja x Pembagian tugas project dari perushaan x Mengerjakan html home x Mengerjakan html menu side bar x Mengerjakan html about x Mengerjakan html promo

11

2

x Mengerjakan html menu x Mengerjakan html menu detail x Memindahkan html ke framework laravel x Mengerjakan header & footer laravel mobile apps x Revisi html home, about us mobile x Membuat router link di setiap buttom

3 x Membuat router link di setiap halaman detail x Memperbaiki link menu & menu detail x Menambahkan route link about us & home

4 x Menambahakan link untuk home.php x Menghubungkan database halaman menu dan menu detail

5 x Mengatur posisi header app x Memperbaiki carosel menu di index/home x Membuat link carosel agar bisa ke halaman menu

6 x Merapihkan menu buffet di halaman index/ home & mengatur link ke halaman menu

x Fixing coloum pada tampilan menu 7 x Membuat file js dan css baru utuk mobile apps

x Memperbaiki home.css

8 x Memperbaiki css header dan menu sidebar x Membuat css look galery x Memperbaiki detail update

9 x Merapihkan halaman menu x Merapihkan halaman career header x Membuat galery di detail blog

10 x Membuat html banner kamibijak.com x Membuat html banner merahputih.com x Membuta html banner kabaroto.com

11 x Membuat html banner side.id x Membuat UI infografis merahputih.com x Merapihkan html banner kamibijak

12 x Merapihkan html banner kabaroto.com x Merapihkan html banner meraputih.com x Membuat policy and privacy page beangasm.com

13 x Memasukan image social&media beangasm.com x Create contact page beangasm.com x Merapihkan card artikel list beangasm.com x Membuat terms & condition page beangasm.com

12

14

x Testing web lemerebeauty.id x Testing web & apps meraputih.com x Testing web side.id x Testing web acquaree spa x Testing web & apps bolaskor.com x 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.