Tutorial Pemrograman

Tutorial Membuat Toko Online Menggunakan Codeigniter: Halaman Utama [Bagian 1]

Artikel kali ini penulis akan membuat website toko online menggunakan framework codeigniter. Nanti, di setiap akhir artikel ini penulis membagikan source code program supaya pembaca dapat dengan mudah mengikuti proses pembuatannya.

Sebelumnya penulis mau membahas pengertian online shop atau toko online. Toko online adalah  bisnis yang dilakukan seorang secara online atau menggunakan media internet dan komputer untuk berinteraksi dengan customer dan menjual barang atau produk melalui dunia maya. Nah, toko online ini juga termasuk bisnis e-commerce

Langsung saja penulis bahas proses pembuatan website ini dimulai dari halaman utama. Pembaca juga dapat melihat cara instalasi dan konfigurasi codeigniter melalui link dibawah ini:

Baca Juga:

PEMBUATAN HALAMAN UTAMA

1. Membuat database toko.sql kemudian membuat table products di MySQL.

Struktur dari table products:

table products

2. Membuat file Welcome.php di dalam folder C:\xampp\htdocs\toko-online\application\controllers.

Logika program:

  • public function index berfungsi untuk menampikan file welcome_message.php yang terdapat di dalam folder viewSehingga costumer dapat melihat produk apa saja yang dijual oleh toko online ini.
  • public function add_to_cart berfungsi membuat array untuk menambahkan data. Pada kasus ini data yang diolah berupa produk dari toko online.
  • public function cart berfungsi untuk menampilan file show_cart.php yang terdapat di folder view. Tampilan dari file ini  berupa table hasil dari produk yang akan dibeli oleh custumer.
  • public clear_cart berfungsi untuk menghapus list produk yang tidak jadi dibeli customer.

3. Membuat file Model_products di dalam folder C:\xampp\htdocs\toko-online\application\models.

Logika Program:

  • public function all berfungsi untuk mengambil data dari table products yang nantinya digunakan untuk menampilkan semua record di file welcome_message.php.
  • public function find berfungsi untuk mencari query atau record yan ada di table products berdasarkan field id.

4. Membuat file top_layout.php di dalam folder C:\xampp\htdocs\toko-online\application\views\layout.

Logika Program:

  • File ini nantinya akan sangat digunakan untuk tampilan website toko online ini, karena menampilkan menu-menu yang tersedia. Seperti Home, Shopping Cart dan Login. Ibarat tubuh manusia, potongan program ini adalah kepala yang berperan penting untuk mengaktifkan fitur menu website.

5. Membuat file welcome_message.php di dalam folder C:\xampp\htdocs\toko-online\application\views.

Logika Program:

  • Potongan program diatas berfungsi untuk menampilkan list produk yang dijual oleh toko online ini. Sehingga customer dapat melihat dan membeli barang yang mereka inginkan.

Berikut ini tampilan dari welcome_message atau halaman utama yang menampilkan produk dari toko online.

Halaman Utama Website Toko Online

6. Membuat file show_cart.php di dalam folder C:\xampp\htdocs\toko-online\application\views.

Logika Program:

  • Hadirnya potongan program ini akan menampilkan daftar list produk yang telah dibeli oleh customer. Di dalamnya juga terdapat 3 tombol pilihan yaitu: Clear Cart (untuk menghapus daftar belanja), Continue Shopping (untuk melanjutkan pembelanjaan oleh customer jika mereka masih ingin belanja barang lain) dan Check Out (Untuk ke proses selanjutnya yaitu pemesanan).

Berikut ini tampilan dari show_cart yang berguna untuk menampilkan daftar belanja dari customer.

Menampilkan list belanja customer

Nah, itu tadi proses pembuatan halaman utama dari website toko online ini. Harap diperhatikan javascript dan css untuk tampilan website ini dikarenakan penulis menggunakan pemanggilan assets secara online. Artinya, jika pembaca tidak terkoneksi internet pada saat menjalankan program ini, penulis pastikan bahwa tampilan yang dihasilkan akan berbeda.

Untuk artikel selanjutnya, penulis akan membahas proses pembuatan register dan login untuk member. Maka dari itu terus ikuti perkembangan pembuatan website ini ya, sahabat setia inwepo. 😀

DOWNLOAD

products.sql

Welcome.php (Controllers)

Model_product.php (Models)

top_layout.php (Views)

show_cart.php (Views)


nulis di inwepo


Yunan Helmi Al Anbarry
Hello, I’m a UI/UX Designer & Front End Developer from Jakarta, Indonesia. I hold a Bachelor of Informatics Engineering from Gunadarma University.



3 Comments

3 Comments

  1. AhmadHasyim

    at

    mas itu function total_items() di top_layout.php diambil dari mana?
    terima kasih

  2. catur

    at

    sangat membantu mas, pertanyaannya itu css dan js nya online?
    gak ada template nya kah mas? biar ga online< heee makasih

    • Fadli TN

      Fadli TN

      at

      css dan js nya satu paket ada di templatenya. kalau kamu taruh di localhost bisa, di webhosting juga bisa

Leave a Reply

Your email address will not be published. Required fields are marked *

Trending

Inwepo adalah media platform yang membantu setiap orang untuk belajar dan berbagi tutorial cara penyelesaian suatu masalah di kehidupan sehari-hari dalam bentuk teks, gambar. dan video.

Dengan bergabung bersama kami dan membuat 1 tutorial terbaik yang kamu miliki dapat membantu jutaan orang di Indonesia untuk menyelesaikan masalahnya. Ayo berbagi tutorial terbaikmu.

Download Aplikasi Inwepo

Copyright © 2017 Inwepo. Server by GoCloud

To Top