TUTORIAL MEMBUAT APLIKASI WEB TOKO OFFLINE DENGAN DREAMWEAVER

TUTORIAL MEMBUAT TOKO WEB OFFLINE DENGAN DREAMWEAVER

Hallo assalamualaikum sobat iteng, berjumpa lagi dengan saya. Sudah beberapa hari tidak posting artikel, akhirnya saya menemukan sebuah projek saya sewaktu SMK tepatnya Waktu Ujian Praktik Kejuruan. Kebetulan saya Jurusan Rekayasa Perangkat Lunak, nah pada ujian praktik kejuruan itu setiap peserta diwajibkan membuat toko web offline dengan dreamweaver.

blog tutorial web PHP MYSQL CSS HTML
tutorial membuat aplikasi toko web offline dengan dreamweaver


Bisa sobat lihat gambar diatas, itu semua sudah mewakili apa saja yang akan kita buat pada aplikasi toko web offline. Nah, sebenarnya saya ingin membagikan projek saya dalam bentuk rar tapi berhubung saya ingin  menjelaskan dari awal cara membuat toko web offline dengan dreamweaver, maka saya buatkan artikelnya. Projek website saya, bisa kamu gunakan sesuai fungsi yang akan kamu gunakan dalam website toko kamu, terkhusus yang lagi UPK alias ujian praktik hehe.

Oiya saya sebut offline, karena memang aplikasi berbasis web ini targetnya untuk Toko - toko konvensional biasa, kalau ingin mengembangkan ke online juga bisa :) yang penting tau alur dan dasar pemrograman terlebih dahulu.

Sebenarnya ada banyak tutorial cara membuat toko web offline dengan dreamweaver, tapi kebanyakan mulainya dari tengah - tengah tidak dari awal, sehingga banyak yang bingung harus mulai dari mana. Dulu saya membuat projek ini juga cari tutorial dan itupun masih bingung, tapi alhamdulilah bisa jadi juga dan mendapat nilai 95 (bukan sombong ya) hehe.

Berhubung saya baik hati dan saya tidak ingin teman - teman menjadi bingung seperti saya, maka saya bagi cara membuat toko web offline dengan dreamweaver menjadi beberapa part. InsyaAllah jika sobat mengikuti setiap part, web toko offline bisa kamu buat.
Alasan saya tidak membagikan secara langsung adalah karena saya tidak ingin 'membodohi' sobat, karena dengan saya share langsung sama saja saya akan membuat sobat malas untuk belajar koding PHP. 

Hal yang menjadi pedoman saya adalah "Bukan hanya bisa membuat tapi juga bisa mengatasi kesalahan yang terjadi" Maksudnya, sobat tidak hanya bisa membuat website dengan menunjukkan hasil web, tetapi kamu dianggap menguasai ilmu web jika bisa mengatasi kesalahan yang terjadi.

Nah, berikut adalah beberapa part yang bisa kamu ikuti langkah - langkah nya, supaya bisa tercapai membuat toko web offline dengan hasil sendiri :) Oke langsung simak aja ya. Dan Saya anggap sobat sudah punya aplikasi dreamweaver CS3 atau versi berapapun dan XAMPP tentunya. Kalau pun belum silakan baca artikel cara install Dreamweaver dan cara install XAMPP.

1. Pengenalan tata letak folder dan file Web Offline.

Hal pertama adalah mengenal tata letak folder dan file di web toko offline ini. Dikarenakan salah letak folder, akan membuat file web kamu akan 'amburadul'. Kenapa saya bilang begitu ? Karena setiap file yang memiliki link ke suatu file .php akan melewati folder tertentu, jadinya jika salah letak makan akan membuat error nantinya. Silakan simak lengkap pengenalan tata letak folder dan file toko web offline

2. Membuat data base Pada Aplikasi toko Web offline 

Data base adalah hal penting yang harus ada pada website dinamis. Database digunakan untuk menyimpan semua data yang diinputkan oleh user. Silakan simak artikel ini

3. Membuat Form desain halaman index toko web offline

Sudah mengenal tata letak folder dan file - file Web offline dan membuat database ? Oke, masuk ke tahap selanjutnya yaitu membuat tampilan design halaman index Web Toko Offline. Banyak yang salah langkah dengan membuat systemnya dahulu tapi akhirnya menjadi rumit karena design nya belum dibuat. Maka dari itu saya sarankan untuk membuat design tampilan telebih dahulu. Silakan simak tutorial ini.

4. Membuat Tampilan Menu utama aplikasi toko web offline

Setelah log in, seorang user (Admin atau kasir) diarahkan ke suatu menu utama, yang nantinya semua form terhubung dengan tampilan menu utama yang berada di halaman awal setelah halaman login. Silakan ikuti disini.

5. Membuat Form inputan data distributor toko web offline

Untuk Form ini, digunakan untuk mendata siapa saja yang memberi pasokan barang. Tentu saja data distributor dirahasiakan, dan hanya bisa dilihat oleh admin saja. Kalaupun ada masalah mengenai barang yang di pasok bisa menghubungi distributornya. silakan simak disini

6. Membuat Tampilan Form inputan kasir pada aplikasi toko web offline

Ingat, disini sobat bertindak sebagai admin. Sehingga sobat bisa mengetahui semua system yang ada di aplikasi toko web offline ini. Nah untuk itu, data - data mengenai kasir pun di inputkan oleh admin sendiri. Jika didalam toko ada beberapa kasir, maka setiap kasir bisa log in dengan Nomor ID yang berbeda satu sama lain. simak disini

7. Membuat Tampilan Form inputan barang aplikasi toko web offline

Halaman index saya langsung ke log in saja, karena memang aplikasi ini ditujukan untuk toko konvensional yang websitenya dipakai oleh kasir, admin, maupun admin gudang. Part 3 adalah membuat tampilan Form Inputan barang. Ingat, disini kita masih membuat tampilan belum masuk ke system ya sobat. simak disini

8. Membuat Tampilan Form inputan Pasok pada aplikasi toko web offline

Seperti yang sudah saya katakan, seorang admin bisa melakukan semua hal yang berkaitan dengan system aplikasi toko web offline. Maka dari itu, aplikasi web toko offline ini, seorang admin bisa melakukan input pemasokan barang. simak disini

9. Membuat Tampilan Form lihat data pada aplikasi toko web offline

Setelah terinput data - data (Seperti distributor, barang, kasir, pasok dan penjualan), saatnya kita membuat tampilan lihat data. Nah, disini kita akan memakai fungsi table dengan memperindah tampilan table dengan menggunakan CSS. Kalaupun tidak memakai table, sobat pasti akan mengerti bagaimana kode dengan tampilan seperti itu. Lihat data ini saya gabungkan dalam setiap form inputan diatas (nomor 4 sampai 7) dan saya letakkan disebelah form inputannya, sehingga ketika kita menginput data, otomatis datanya bisa langsung dilihat. Jika kamu ingin memperdalam pemahaman tentang cara menampilkan data dari database silakan simak disini

10. Membuat Tampilan Form edit barang pada aplikasi

Kesalahan penginputan data memang seringkali terjadi, oleh karena itu website yang user friendly pastinya akan memberikan sebuah 'layanan' dimana seorang penginput barang bisa mengubah data yang telah diinputkan. Jadi penting ada fitur edit seperti ini.

11. Membuat Tampilan Form Lihat Penjualan barang pada aplikasi toko web offline

Kenapa form ini saya sendirikan ? Karena prosesnya pun cukup panjang dan rumit, sehingga untuk langkah ini saya sendirikan dan lebih baik menjadi langkah yang terakhir. Soalnya, di form ini, setiap data di beberapa form digabungkan / direlasikan dan nantinya akan menjadi struk penjualan.

Ke 11 langkah membuat tampilan Cara Membuat Aplikasi Web Toko Offline dengan Dreamweaver bisa kamu lakukan terlebih dahulu dengan menggunakan kode html dan css. Untuk mengembangkan systemnya, digunakan bahasa PHP. Untuk yang sudah berhasil dan selesai membuat tampilannya, silakan kamu lanjut ke tahap berikutnya. klik disini.

Oktober 20, 2017 - tanpa komentar

0 komentar untuk TUTORIAL MEMBUAT APLIKASI WEB TOKO OFFLINE DENGAN DREAMWEAVER.


Perlihatkan Semua Komentar Tutup Semua Komentar