3.2 Analisis Perancangan dan Pembuatan Aplikasi
Dalam merancang aplikasi Bandung Toast Coffee, diperlukan bentukan inputan untuk berinteraksi yang mudah digunakan antara pengguna dengan sistem yang
dirancang Penggunaan bahasa pemrograman PHP menjadi pilihan utama dalam pembuatan
aplikasi ini serta juga menggunakan bahasa pemrograman pendukung yaitu HTML hypertext markup language, CSS cascading style sheet, javascript dan
jquery. Semua bahasa pemrograman dapat mendukung pembuatan aplikasi agar menjadi lebih dinamis dan memiliki tampilan yang lebih menarik untuk
digunakan oleh user.
3.3 Perancangan Halaman dan Antarmuka Aplikasi
Perancangan tampilan antarmuka atau User Interface merupakan media komunikasi antara user dengan sistem aplikasi apakah sistem ini dapat digunakan
dengan mudah dan dapat memberikan informasi yang dicari oleh user
3.3.1 Rancangan Tampilan Halaman awal index
Tampilan ini adalah tampilan halaman awal atau yang sering disebut dengan index pada saat membuka aplikasi ini. Halaman ini juga berupa tatapmuka antar
peguna atau user interface. Pada halaman ini untuk menampilkan fitur slide show tersebut maka digunakan teknologi javascript yang berupa platform yang telah
tersedia pada
bahasa pemrograman
tersebut.
Universitas Sumatera Utara
Gambar 3.1 Sketsa rancangan tampilan halaman awal index
3.3.2 Rancangan Tampilan Halaman Produk
Halaman ini berisikan product yang ditawarkan terdapat beraneka ragam,yaitu Coffee dan Snack. Masing-masing terdapat beraneka ragam jenis
makanana dan minuman yang ditawarkan. Sehingga user dapat melihat apa saja yang ditawarkan dan harga dicantumkan juga agar para user dapat
memiliki informasi yang aktual. Sketsa tampilan halaman akan ditunjukkan pada
gambar dibawah
ini.
Universitas Sumatera Utara
Gambar 3.2 Sketsa rancangan tampilan halaman product
3.3.3 Rancangan Tampilam Halaman Detail Product
Gambar 3.3 Sketsa rancangan tampilan halaman detail product
Universitas Sumatera Utara
3.3.4 Rancangan Tampilan Halaman News
Halaman ini berisi berita atau informasi baru mengenai kopi atau menu yang baru dikeluarkan dan diskon yang dihadirkan. Sehingga user lebih dapat up to date.
Yang ditampilkan dengan tampilan menarik
Gambar 3.4 Sketsa rancangan tampilan halaman news
Universitas Sumatera Utara
3.3.5 Rancangan Tampilan Halaman Detail News
Pada tampilan ini akan menerangkan informasi yang dipilih secara jelas dan keseluruhan. Beserta foto dan sumber
Gambar 3.5 Sketsa rancangan tampilan halaman news
Universitas Sumatera Utara
3.3.6 Rancangan Tampilan About
Halaman ini berisi informasi alamat coffee shop tersebut dan awal berdirinya Bandung Toast Coffee beserta tampilan map. Jika gambar rumah ditunjuk akan
mengeluarkan sebuah panel kecil hover yang berisi nama saja dari tempat yang ditunjuk dan jika nama tersebut klik maka akan keluar panel berupa modal
window yang berisikan informasi tentang tentang tempat tersebut.
Gambar 3.7 rancangan tampilan halaman abaout
Universitas Sumatera Utara
3.4 Perancangan Flowchart Aplikasi
Flowchart dibawah ini akan membahas cara kerja sistem yang dibuat pada web Bandung Toast Coffee pada masing
– masing halaman.
Gambar 3.8 Flowchart Detail Aplikasi
Universitas Sumatera Utara
Gambar 3.8 adalah flowchart tentang gambaran secara detail cara kerja aplikasi ini . pertama sekali pada saat diakses program akan mencari file halaman awal
atau index, pada halaman tersebut terdapat sebuah menu navigasi untuk mengakses fitur
– fitur yang ada pada aplikasi ini. Jika salah satu menu pada navigasi di tekan atau di click maka akan pindah halaman sesuai dengan halaman yang diklik dan pada
masing – masing halaman terdapat sebuah fitur untuk membantu user mencari
informasi yang ada pada aplikasi ini.
Gambar 3.9 Flowchart Pada Halaman Home
Gambar 3.9 menampilkan flowchart tentang cara kerja pada halaman home. Jika user mengklik slider image pada gambar i maka akan muncul Shadow box. Pada
gambar juga terdapat dua buah tombol yang jika diakses atau diklik maka akan berpindah gambar sesuai gambar yang ditetapkan pada dua tombol tersebut.
Universitas Sumatera Utara
Gambar 3.10 Flowchart Pada Halaman Product
Gambar 3.10 adalah flowchart tentang cara kerja pada halaman product. Jika user mengakses menu coffee pada navigasi pada halaman product maka tidak
berpindah, namun jika memilih halaman snack akan berpindah ke halaman snack. Pada halaman product ini terdapat dua fitur yaitu fitur yang menampilkan menu
coffee dan snack,dimana masing masing fitur menyediakan gambar dan informasi lengkap tentang coffee atau snack yang ada di Bandung Toast Coffee.
Universitas Sumatera Utara
Gambar 3.11 Flowchart pada Halaman News
Gambar 3.11 adalah halaman pada news yang ini menampilkan berita dan informasi baru yang ditawarkan Bandung Toast Coffee. Yang ditammpilkan
dengan gambar dan asal sumber berita atau informasi tersebut.
Gambar 3.12 Flowchart Pada Halaman About
Gambar 3.12 adalah halaman pada about yang ini menampilkan berita informasi berdirinya dan alamat beserta mapBandung Toast Coffee.
Universitas Sumatera Utara
3.5 Database
Kategori