3.4.5.1 Rancangan Halaman Tambah Client
Halaman ini dimaksudkan atau diperuntukkan untuk kegiatan menambah pengunjung baru yang digunakan dalam otorisasi hak akses menggunakan web aplikasi single sign
on credential pengunjung yang ciri khasnya menggunakan username dan password di ganti sesuai dengan model workflow otentikasi OAuth 2 yakni client id dan client
secret. Pada gambar 3.9 di bawah ini adalah halaman perancangan tambah client yang terdapat pada web aplikasi single sign on.
Gambar 3.9 Rancangan Tampilan Halaman Tambah Client
Keterangan : 1.
Canvas yang memuat logo dari aplikasi web aplikasi dengan link - link halaman
2. Canvas yang memuat dari slogan web
1 2
3 4
5 6
7
Universitas Sumatera Utara
3. Label yang berisikan “masukan client id” lengkap dengan input text
4. Label yang berisikan “masukan client secret” lengkap dengan input text
5. Label yang berisikan “redirect uri” lengkap dengan input text
6. Tombol button yang terdiri dari tombol tambah dan batal
7. Bagian footer berisi tentang hak cipta dan tahun aplikasi dilaunchingkan
3.4.5.2 Rancangan Halaman Sign In
Halaman ini diperuntukkan bagi pengunjung untuk melakukan “sign-in” menuju halaman utama aplikasi. Tersedia inputan yang terdiri dari client id dan client secret.
Pada gambar 3.10 di bawah ini adalah model rancangan dari halaman “sign-in”. Tersedia link jika pengunjung belum mendaftar, silahkan melakukan pendaftaran.
Gambar 3.10 Rancangan Tampilan Halaman Sign-In
1 2
3 4
5 6
7
Universitas Sumatera Utara
Keterangan : 1.
Canvas yang memuat logo dari aplikasi web dengan link - link halaman 2.
Canvas yang memuat dari slogan web 3.
Label yang berisikan “client id” lengkap dengan input text 4.
Label yang berisikan “client secret” lengkap dengan input text 5.
Label keterangan “Belum Terdaftar, silahkan klik disini” 6.
Tombol button yang terdiri dari tombol Kirim dan Batal 7.
Bagian footer berisi tentang hak cipta dan tahun aplikasi dilaunchingkan
3.4.5.3 Rancangan Halaman Utama
Gambar 3.11 Rancangan Tampilan Halaman Utama
1 2
3
4
5
6
Universitas Sumatera Utara
Keterangan : 1.
Canvas yang memuat logo dari aplikasi web dengan link - link halaman 2.
Canvas yang memuat dari slogan web 3.
Image slider yang terdiri dari 3 image yang melakukan animasi transisi 4.
Image feature sebagai image keterangan kondisi web 5.
Isi dari halaman utama sisi kiri dan sisi kanan 6.
Bagian footer berisi tentang hak cipta dan tahun aplikasi dilaunchingkan
3.4.5.4 Rancangan Halaman Menu Dan Harga
Kategori