putra: Struktur Navigasi Aplikasi

Perancangan Struktur Navigasi

Untuk proses pembuatan Website ini, penulis melakukan beberapa tahapan. Yang paling utama adalah menentukan struktur navigasi. Menentukan struktur navigasi merupakan hal yang sangat penting dalam pembuatan sebuah website, struktur navigasi yang digunakan oleh penulis adalah struktur navigasi campuran (composite) yaitu campuran antara struktur navigasi non liner dan struktur navigasi hierarki yang digambarkan sebagai berikut :

Gambar Struktur Navigasi Composite

Rancangan Halaman Tampilan Website

Rancangan halaman tampilan mutlak harus dilakukan. Pada proses pembuatan website, rancangan halaman tampilan adalah bagian dari program yang berhubungan langsung dengan pemakai, yaitu segala sesuatu yang muncul pada layar (screen). Rancangan halaman tampilan bertujuan agar website yang dihasilkan terlihat lebih sederhana, mudah digunakan dan menarik. Hal ini perlu karena setiap interaksi dari pemakai pasti melalui objek yang ada pada halamannya. Rancangan halaman tampilan pada website ini adalah sebagai berikut :

Halaman Tampilan Home

Pada halaman tampilan home terdapat menu home, profil, cara pesan, pemesanan dan kontak. Menu-menu tersebut dalam setiap halaman web akan selalu tampil. Halaman tampilan home terdiri dari tampilan slider yang mendeskripsikan gambar-gambar sebuah suku cadang yang dijual. Pada posisi bawah slider terdapat gambar spare part baru yang menampilkan informasi judul, gambar dan keterangan stok dari suku cadang.

Gambar Halaman Tampilan Home

Halaman Tampilan Profil

Pada halaman tampilan menu profil terdapat text yang mendeskripsikan tentang visi dan misi bengkel Adi Jaya Motor.

Gambar Halaman Tampilan profil

Halaman Tampilan Cara Pesan

Pada halaman tampilan menu cara pesan terdapat langkah–langkah untuk pemesanan pada website penjualan suku cadang motor pada bengkel Adi Jaya Motor.

Gambar Halaman Tampilan Cara Pesan

Halaman Tampilan Pemesanan

Pada halaman tampilan menu pemesanan terdiri dari judul, gambar suku cadang, stok barang, pesan, dan detail yang menjelaskan fungsi dari sparepart tersebut.

Gambar Halaman Tampilan Pemesanan

Halaman Tampilan Keranjang

Pada halaman tampilan keranjang terdapat rincian barang yang di pesan beserta harganya.

Gambar Halaman Tampilan Keranjang

Halaman Tampilan Input Data

Pada halaman tampilan input data terdapat kolom nama, email, alamat, dan nomor telepon untuk pembeli dan tombol order untuk memesan.

Gambar Halaman Tampilan Input Data

Halaman Tampilan Kontak

Pada halaman tampilan kontak terdiri dari nomor telepon, alamat e-mail dan alamat bengkel Adi Jaya Motor.

Gambar Halaman Tampilan Kontak

Rancangan Entity Relationship Diagram (ERD)

Berikut ini adalah gambaran tentang penggambaran ERD dari tabel-tabel yang digunakan dalam pembuatan basis data. Berikut gambar 3.9 yang merupakan rancangan ERD.

Gambar Entity Relational Diagram (ERD)

Proses Normalisasi

Bentuk Tidak Normal (Unnormalized Form)

Dalam unnormalisasi semua atribut yang dipakai dimasukkan semua dan belum ada keterhubungan antara atribut yang satu dengan yang lain.

Gambar Rancangan Unnormalisasi

Normal Pertama 1NF (1^stNormal Form)

Dalam bentuk pertama ini, baru dipisahkan dengan memberi tabel masing-masing untuk membedakan atribut satu dengan yang lain. Pada tabel ini, terdapat atribut yang dijadikan sebagai primary key.

Gambar Rancangan Bentuk 1NF

Normal kedua 2NF (2^NDNormal Form)

Dalam bentuk normalisasi yang kedua ada keterhubungan antara tabel satu dengan tabel yang lain.

Gambar Rancangan Bentuk 2NF

Struktur Database

Pembuatan database dengan nama Adi Jaya Motor mempunyai 3 tabel, yaitu tabel Order_Barang, tabel Barang dan tabel Konsumen.

Tabel Order_Barang yang terdiri dari 5 field yaitu Id_Order, Id_Barang, Tgl_Order, Jumlah_PerBarang, Total_Harga.

Tabel Tabel Order_Barang

Berikutnya tabel Barang yang terdiri dari 6 field yang terdiri dari Id_Barang, Nama_Barang, Stok, Harga, Gambar, dan Deskripsi. Dengan ketentuan sebagai berikut.

Tabel Tabel_Barang

Dan yang terakir adalah tabel user yang terdiri dari 4 field yaitu Nama_Konsumen, Email, Alamat, No_Tlp. Dengan ketentuan sebagai berikut.

Tabel Tabel_Konsumen

Pembuatan Halaman Website

Langkah-langkah pembuatan halaman website adalah sebagai berikut :

1. Pilih program dari menu start.

2. Ketik Dreamweaver pada kolom pencarian.

3. Tunggu beberapa saat setelah itu akan muncul tampilan logo Adobe

Dreamweaver Cs6.

4. Klik Adobe Dreamweaver cs6.

Gambar Tampilan Logo Adobe Dreamweaver cs6

Gambar Halaman awal Adobe Dreamweaver cs6

5. Pilih dan klik PHP maka akan langsung masuk ke halaman kerja kosong.

Gambar Tampilan halaman kerja pada Adobe Dreamweaver cs6

6. Pertama buatlah folder adijaya.com dan kemudian buat file index.php dan simpan didalam folder adijaya.com

7. Kemudia bikin kembali folder gambar, css dan database di dalam folder adijaya.com.

Gambar Tampilan isi foder adijaya.com

8. Kemudian buatlah tabel dengan cara mengklik perintah common kemudian pilih tabel, maka akan muncul form untuk mengisi ukuran tabel. Isi kotak row dengan 14 dan collumns dengan 3 dan pixell 1000 kemudian ok.

Gambar Tampilan tabel

9. Untuk mensinkronisasikan css dengan index.php dengan cara mengklik attach external style kemudian pilih browser kemudian css style dan pilih ok.

Gambar Hasil sinkronisasi tabel dengan css

10. Kemudian untuk memasukan header dan footer dengan cara klik insert div tag kemudian pilih class header kemudian pilih ok. Lakukan hal yang sama dengan footer.

Gambar Tampilan Header dan Footer

11. Kemudian untuk memasukan pilihan icon menu dengan cara mengklik insert div tag pilih class menjadi menu kiri, kemudian lakukan hal yang sama kepada 5 icon yang lain.