Pendahuluan
Aplikasi Web
Kegunaan Web Aplikasi
Keunggulan dan Kekurangan Web Aplikasi
Keunggulan Web Aplikasi
Kekurangan Web Aplikasi
Cara Kerja Web
Bagian Pokok Web Aplikasi
- Mengenal Bahasa Pemrograman Web
HTML
CSS
Javascript
PHP
SQL
Tahapan Pembuatan Website
Pemilihan Template
Sebelum Anda mulai membuat website toko online, hal pertama yang perlu Anda lakukan adalah membuat atau mencari template (tampilan) agar website yang kita buat lebih menarik. Model yang kita gunakan tentunya dalam format HTML, lebih bagus lagi jika kita pasangkan dengan CSS dan Javascript. Dalam hal ini saya mendownload template gratis dari website https://all-free-download.com/free-website-templates/simple-website-template.html.
Hal pertama yang harus dilakukan adalah mengubah format HTML ke PHP, mengubah tampilan, membagi file menjadi beberapa bagian dan mengemas template. Selanjutnya saya akan membagikan template yang sudah jadi yang bisa diunduh di halaman berikut https://all-free-download.com/free-website-templates/simple-website-template.html.
Perancangan Database
Ketika pengguna memilih produk yang akan dibeli, data produk akan ditambahkan ke tabel keranjang. Setelah detail produk dimasukkan ke dalam keranjang belanja, pengguna harus memilih checkout pada proses selanjutnya agar detail tersebut dapat dimasukkan ke dalam tabel transaksi. Jika pengguna memilih menu Kontak dan mengisi informasi, maka informasi tersebut akan masuk ke tabel kotak masuk.
Perancangan Menu
Perancangan Model Sistem
Buka file kategori-add.php dan buat judul, letakkan kursor di bawah judul dan pilih menu Sisipkan – Objek Data – Sisipkan Catatan – Wizard Formulir Penyisipan Pendaftaran dan lakukan pengaturan berikut. Buka file categorie-edit.php lalu buat title dan buat Recordset dengan pengaturan sebagai berikut. Buka file product-added.php dan buat recordset rec-category, rec-brand dan recadmin dengan setting seperti di bawah ini.
Buka file template-kiri.php lalu buat recordset reccategori dan recpromo dengan pengaturan sebagai berikut. Buka file product-category.php lalu buat judul (Produk per Kategori) dan buat Recordset dengan pengaturan sebagai berikut. Buka file login.php dan tambahkan kode di bawah ini dan login pengguna dari awal.
Langkah selanjutnya membuat halaman Proses Transaksi dengan cara copy paste file template-home.php dan beri nama transaksi-edit.php. Buka file transaksi-edit.php lalu buat title dan buat rectransaction dan recadmin Recordset dengan setting sebagai berikut.
Instal Aplikasi
XAMPP
X = Cross Platform, Merupakan kode penanda perangkat lunak yang bersifat lintas platform atau dapat berjalan di beberapa sistem operasi. A = Apache, Apache merupakan aplikasi web server yang gratis dan dapat dikembangkan oleh banyak orang (open source). P = PHP, huruf pertama “P” dari akronim XAMPP merupakan inisial untuk menunjukkan keberadaan bahasa pemrograman PHP.
Perl dapat berjalan di banyak sistem operasi, sehingga sangat fleksibel dan banyak digunakan. Aplikasi XAMPP berfungsi sebagai server lokal untuk mengolah berbagai jenis data website yang sedang dikembangkan. Kapasitas penyimpanan pada menu htdocs sendiri tergantung pada hard disk yang terpasang pada perangkat komputasi.
Di dalam control panel kita juga dapat mengatur aplikasi XAMPP untuk berhenti dan memulai, sehingga tidak memberatkan kinerja komputer. Sama seperti fungsi PhpMyAdmin di web hosting sebenarnya, peran PhpMyAdmin di XAMPP muncul sebagai manajer konfigurasi MySQL.
Notepad++
Untuk membuka folder project di XAMPP, Anda bisa langsung mengetikkan URL http://localhost/namafolder. Seperti namanya, Control Panel memberikan kita akses yang lebih leluasa ketika mengelola database, mengupload file atau melakukan pengaturan lebih detail terkait bagian dalam website. Notepad++ juga memiliki fitur yang sangat memudahkan dalam membedakan baris sintaks, yaitu fitur highlight.
Lainnya, tersedianya fitur tab yang dapat membantu Anda mengelola banyak kode sekaligus. Terdapat juga fitur penomoran baris yang membantu Anda menemukan kode yang error saat dijalankan.
Adobe Dreamweaver
Kemudian kita kembali ke file home.php dan membuat recordset dengan masuk ke tab BINDINGS, klik (+) dan pilih Recordset (Query). Buka file Kontak.php lalu buat judul dan deskripsi, letakkan kursor di bawah judul dan pilih menu Sisipkan - Objek Data - Sisipkan Rekam - Sisipkan Rekam Formulir Wizard dan lakukan pengaturan berikut.
Membuat Website Toko Online
Membuat Database
Untuk membuat database Anda perlu menjalankan XAMPP lalu menjalankan phpMyAdmin di web browser (misalnya Mozilla Firefox) dengan mengetikkan alamat http://localhost/phpmyadmin/. Pilih menu Database di bagian atas, lalu ketikkan nama database tokoonline di bagian Nama database lalu pilih tombol Buat. Selanjutnya kita perlu membuat beberapa tabel, tepatnya 10 tabel sesuai dengan desain database pada Bab 2, sesuai tabel 1 sampai 11.
Kemudian coba tuliskan tb_product pada kolom Nama dan Nomor kolom 14 pada tab Buat Tabel, lalu klik Buka. Selanjutnya Anda perlu mengisi kolom dari tb_product sesuai tabel 3 pada Bab 2 sehingga hasilnya seperti gambar di bawah ini, lalu klik Simpan. Pilih tabel tb_admin, lalu pilih menu Sisipkan di bagian atas, lalu isi datanya seperti gambar di bawah ini.
Instalasi Template
Membuat New Site (Projek Baru)
Selanjutnya, buka tab Pengaturan Lanjutan - Informasi Lokal dan atur pengaturan folder gambar default seperti yang ditunjukkan di bawah ini.
Koneksi Database
Membuat Halaman Administrator
Login
Selanjutnya kita bisa langsung membuat fungsi login otomatis dengan memilih menu Sisipkan - Objek Data - Otentikasi Pengguna - Login Pengguna.
Logout
Kita bisa mengujinya dengan langsung mengetikkan alamat localhost/tokoonline/admin/logout.php, atau bisa juga dengan mengklik menu Logout di halaman beranda yang akan kita buat nanti.
Resricted Access
Pada langkah selanjutnya, kita akan menempatkan kode di bawah ini di bagian atas setiap halaman halaman admin, kecuali untuk login.php, logout.php, access.php dan file template.
Halaman Home (Admin)
CRUD
Tempatkan kursor di bawah judul dan pilih menu Sisipkan - Objek data - Data dinamis - Tabel dinamis dan lakukan pengaturan berikut. Tempatkan kursor di bawah judul dan pilih menu Sisipkan - Objek Data - Perbarui Catatan - Panduan Pembaruan Catatan dan buat pengaturan berikut. Hampir mirip dengan halaman unsubscribe, kita bisa membuat halaman ini dengan mudah, yaitu kita perlu membuat halaman PHP kosong dan beri nama kategori-delete.php, lalu hapus semua kode yang ada.
Kemudian Anda dapat mencoba semua fungsi menambah data, mengedit data dan menghapus data kategori.
Halaman Merk dan Ongkir
Halaman Produk
Buat judul, letakkan kursor di bawah judul dan pilih menu Sisipkan - Objek Data - Sisipkan Catatan - Sisipkan Panduan Formulir Catatan dan lakukan pengaturan berikut. Buka file product-edit.php, buat title dan buat recordset recproduct, reccategory, recmerk dan recadmin dengan pengaturan sebagai berikut. Buat halaman PHP kosong dan beri nama product-remove.php, lalu hapus semua kode yang ada.
Kemudian Anda dapat mencoba semua fungsi menambah data, mengedit data dan menghapus data produk.
Halaman Tentang (About Us)
Halaman Admin
- Membuat Halaman Publik
Pengguna tidak dapat melakukan transaksi pembelian, untuk melakukan transaksi pembelian pengguna harus melakukan registrasi dan login untuk kemudian masuk ke halaman pengguna.
Halaman Kiri (Kategori dan Promo)
Buka tab Code dan kita akan drag and drop dari dataset ke kode dengan list seperti di bawah ini. Selanjutnya link produk akan kita perulangan berdasarkan kategori dengan memblokir kode pada baris 49 lalu pilih menu Sisipkan – Objek Data – Iterasi Wilayah dengan pengaturan dan hasil seperti di bawah ini.
Halaman Produk per Kategori (Publik)
Selanjutnya kita akan loop link produk berdasarkan kategori dengan cara blok kode baris 56-64 lalu pilih menu Insert - Data Objects - Repeat Region dengan setting dan hasil seperti di bawah ini.
Halaman Kanan (Merk dan Produk Termurah)
Halaman Produk per Merk (Publik)
Halaman Produk Terbaru/Halaman Home (Publik)
Pencarian Produk
Halaman Tentang (Publik)
Halaman Kontak (Publik)
- Membuat Halaman User
Register User
Login User
Logout dan Resricted Access User
Acak Kode Pembelian
Halaman Home (Produk terbaru)
Halaman Kiri (Kategori dan Promo)
Halaman Kanan (Merk dan Produk Termurah)
Halaman User Lainnya
Halaman Detail Produk
Tempatkan kursor pada kode kosong setelah menghilangkan form di atas, lalu buat fungsi Insert Record dengan pengaturan sebagai berikut.
Transaksi Pembelian (Keranjang Belanja)
Selanjutnya kita membuat Insert Record untuk memasukkan data ke dalam Data Transaksi dengan membuat recuser dan mengkonfigurasi ulang kumpulan record dengan pengaturan sebagai berikut.
Transaksi Pembelian (Checkout)
PILIH tb_transactions.id_transactions, tb_transactions.tgl_transactions, tb_transactions.jml_price, tb_transactions.weight, tb_transactions.kota, tb_transactions.ongkir, tb_transactions.total, tb_transactions.address, tb_transactions.status. Buat tabel keranjang belanja sama persis dengan tabel keranjang pada halaman cart.php. Copy Paste kode di basket.php dari baris 104-135 dan paste ke file checkout.php di baris 81.
Langkah terakhir seperti biasa tambahkan kode di baris ke-2.
Data Transaksi
Letakkan kursor di bawah judul dan deskripsi, lalu pilih menu Sisipkan – Objek Data – Data Dinamis – Tabel Dinamis dan lakukan pengaturan sebagai berikut.
Halaman Akun
Ubah kolom teks kata sandi untuk menulis kata sandi dan seperti biasa tambahkan kode pada baris ke-2.
Halaman Tentang (User)
Halaman Kontak (User)
Widget Keranjang
- Pengelolaan Data Transaksi
Kami akan membuat proses pengelolaan data transaksi agar seluruh transaksi pembelian yang dilakukan Pengguna dapat diproses oleh admin.
Data Transaksi
Data Keranjang Belanja
Data Inbox
Data User
Konversi Harga ke Format Rupiah
