Rancangan Pembuatan Aplikasi Pendataan Alamat Fitness di Batam Berbasis JQuery Mobile

Sebelum menuju proses pembuatan program / aplikasi, alangkah baiknya kita membuat desain rancangan program/aplikasi kita. Berikut ini adalah contoh desain Pembuatan Apliakasi Pendataan Alamat tempat fitness di Batam yang saya namai J_Gymmobile. Dan ini adalah tahapan pertamanya

3.1              Entity Relathionship Diagram

Entity Relathionship Diagram pada database j_gymmobile adalah sebagai berikut:

Gambar 1 Entity Relathionship Diagram alamat

EDR diagram pada tabel alumni terdiri dari:

1. Entitas = Lokasi
2. Atribut = Nama, Id, Img,Email/Situs Web, Alamat

3.2              Data Flow Diagram

1.      DFD Level 0

Diagram level 0 merupakan dekomposisi dari diagram konteks, berikut adalah diagram level 0 dari sistem yang dirancang :

Gambar 2      Data Flow Diagram level 0

Penjelasan proses diagram diatas ( Gambar 2 ) dijabarkan sebagai berikut:

1.      Proses Login

Input

User dan Admin terlebih dahulu harus memberikan password untuk masuk ke dalam sistem yang dirancang ini, apabila password sesuai maka dapat mengakses sistem ini jika password tidak sesuai akan kembali ke tampilan login.

Output

Tampilan keseluruhan sistem untuk menjalankan proses selanjutnya. Admin dapat mengakses sepenuhnya sistem ini, sedangkan User akan diberikan batasan untuk dapat masuk pada sistem selanjunya.

Deskripsi proses

Untuk menjalankan program user dan admin harus melakukan proses login. Username dan password yang diinput akan diperiksa pada database. Apabila sesuai dapat dilanjutkan ke proses berikutnya.

2.    Proses Pengolahan Data Alamat

Input:       Status akses user dan admin

Data Alamat

Output :   Data Alamat

    Tampilan keseluruhan data

Deskripsi proses

2. DFD Level 1 Proses Login

DFD Level 1 proses login digambarkan sebagai

Gambar 3 Data Flow Diagram level 1 Proses Login

3. DFD Level 1 Proses Tambah Data Alamat

     DFD Level 1 proses Tambah Data Alamat digambarkan sebagai berikut :

Gambar 4 Data Flow Diagram level 1 Proses Tambah Alamat

3.1.            Desain Mockup

1. Desain Tampilan Awal Program

Gambar 5 Tampilan Awal Program

2. Desain account jquerymobilegym

Gambar 6 Tampilan Account j_gymmobile

3. Desain Login Admin

Gambar 7 Tampilan Login admin

4. Desain Halaman Utama Admin

            Gambar 8 Tampilan Menu Utama Admin

5. Desain Halaman Insert Alamat

Gambar 9 Tampilan Halaman Insert Alamat

Jangan Lupa juga kunjungi kampus saya STT Ibnu Sina Batam.

Klik link atau gambar berikut untuk mengunjungi websitenya.

STT Ibnu Sina Batam