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
Kategori