Skip to content Skip to sidebar Skip to footer

Tutorial on Creating an Online Store Using Codeigniter: Home [Bagian 1]

This article the author will make website shop on line use framework codeigniter. Later, at the end of each article the author shares source code program so that readers can easily follow the manufacturing process.

Previously, the author wanted to discuss the meaning of online shop or shop on line. Shop on line is a business that is carried out by a person on line or use the internet and computers to interact with customer and sell goods or products through cyberspace. Well, shop on line this also includes e business-commerce.

Immediately the author discusses the manufacturing process website it starts from the main page. Readers can also see how to install and configure CodeIgniter via the link below:

Also Read:

HOME PAGE CREATING

1. Create a database of toko.sql then create table products in MySQL.

CREATE TABLE `products` (  `id` int(10) NOT NULL,  `name` varchar(50) NOT NULL,  `description` text NOT NULL,  `price` int(9) NOT NULL,  `stock` int(3) NOT NULL,  `image` text NOT NULL) ENGINE=InnoDB DEFAULT CHARSET=latin1;ALTER TABLE `products`ADD PRIMARY KEY (`id`);

Structure of table products:

2. Make files welcome.php in the folder C:\xampp\htdocs\online-shop\application\controllers.

load->model('model_products');	}	public function index()	{		$data['products'] = $this->model_products->all();		$this->load->view('welcome_message', $data);	}		public function add_to_cart($product_id)	{		$product = $this->model_products->find($product_id);		$data = array(					   'id'      => $product->id,					   'qty'     => 1,					   'price'   => $product->price,					   'name'    => $product->name					);		$this->cart->insert($data);		redirect(base_url());	}		public function cart(){		$this->load->view('show_cart');	}		public function clear_cart()	{		$this->cart->destroy();		redirect(base_url());	}}/* Yunan Helmi Al Anbarry *//* Toko Online*/

Program logic:

  • public function index serves to display files welcome_message.php contained in folder view. So that customer can see what products are sold by the store on line this.
  • public function add_to_cart serves to create an array to add data. In this case, the data processed is in the form of products from stores on line.
  • public function cart function to display files show_cart.php found in folder views. The display of this file is a table of the results of the products that will be purchased by customer.
  • public clear_cart function to delete list unfinished product purchased customers.

3. Create files model_products in the folder C:\xampp\htdocs\online-shop\application\models.

db->get('products');		if($hasil->num_rows() > 0){			return $hasil->result();		} else {			return array();		}	}		public function find($id){		//Query mencari record berdasarkan ID-nya		$hasil = $this->db->where('id', $id)						  ->limit(1)						  ->get('products');		if($hasil->num_rows() > 0){			return $hasil->row();		} else {			return array();		}	}	}

Program Logic:

  • public function all function to retrieve data from table products which will later be used to display all record in files welcome_message.php.
  • public function find function to search query or record which is in table products based on field en.

4. Create files top_layout.php in the folder C:\xampp\htdocs\online-shop\application\views\layout.

Program Logic:

  • File this will later be used for display website shop on line this, because it displays the available menus. Like Home, Shopping Cart and Login. Like the human body, this program piece is the head which plays an important role in activating the menu features website.

5. Make files welcome_message.php in the folder C:\xampp\htdocs\online-shop\application\views.

			Toko Online Inwepo										load->view('layout/top_menu') ?>						
'uploads/' . $product->image, 'style' => 'max-width: 100%; max-height:100%; height:100px' ])?>

name?>

description?>

Rp. price?>

id, 'Buy' , [ 'class' => 'btn btn-primary', 'role' => 'button' ])?>

Program Logic:

  • The program snippet above serves to display list products sold by shop on line this. So that customer can view and buy the items they want.

Here’s a view of welcome_message or the main page featuring products from the store on line.

6. Make files show_cart.php in the folder C:\xampp\htdocs\online-shop\application\views.

			Toko Online | Inwepo										load->view('layout/top_menu') ?>				cart->contents() as $items) : 					$i++;				?>				
No Product Jumlah Price Subtotal
Total cart->total(),0,',','.'); ?>
'btn btn-danger']) ?> 'btn btn-primary']) ?> 'btn btn-success']) ?>

Program Logic:

  • The presence of this program snippet will display a list of list products purchased by customers. It also has 3 options buttons, namely: Clear Cart (to clear shopping list), Continue Shopping (to continue shopping by customer if they still want to shop for other things) and Check Out (To go to the next process, namely ordering).

Here’s a view of show_cart which is useful for displaying shopping lists from customers.

Well, that was the process of making the main page of the store website on line this. Please pay attention javascript and css to display this website because the author uses the calling assets by on line. That is, if the reader is not connected to the internet when running this program, the author makes sure that the resulting display will be different.

For the next article, the author will discuss the manufacturing process register and login for members. Therefore, continue to follow the development of the manufacture website Yes, loyal friend of Inwepo. ️

DOWNLOAD

products.sql

Welcome.php (Controllers)

Model_product.php (Models)

top_layout.php (Views)

show_cart.php (Views)