Skip to content

tetiana yaremko / web-app-group2

Go to a project
Commit f758115d by tetiana yaremko
Options

pagination and products sort wit AJAX implemented

parent 2a95773e
Inline Side-by-side
Showing with 446 additions and 85 deletions
application/config/config.php
......@@ -466,7 +466,7 @@ $config['csrf_regenerate'] = false;
$config['csrf_exclude_uris'] = array(
'cart/add_to_cart', 'cart/load_cart',
'home/products', 'cart/delete_product_from_cart', 'cart/increase_qty', 'cart/decrease_qty',
'auth/resetpassword','auth/email_availability'
'auth/resetpassword','auth/email_availability', 'home/filter_products/1', 'home/filter_products/2','home/filter_products/3', 'home/all_products'
);
......
application/controllers/home.php
......@@ -25,5 +25,59 @@ class Home extends CI_Controller {
}
public function all_products() {
$this->load->model('Admin_model', 'admin');
$data=$this->admin->get_data();
$this->load->view('templates/header');
$this->load->view('all_products', array('data'=>$data));
}
function filter_products() {
$this->load->model('Admin_model', 'admin');
sleep(1);
$minimum_price = $this->input->post('minimum_price');
$maximum_price = $this->input->post('maximum_price');
$genre = $this->input->post('genre');
$this->load->library('pagination');
$config = array();
$config['base_url'] ='#';
$config['total_rows'] = $this->admin->count_all($minimum_price, $maximum_price, $genre);
$config['per_page'] = 12;
$config['uri_segment'] = 3;
$config['use_page_numbers'] = TRUE;
$config['full_tag_open'] = '<ul class="pagination">';
$config['full_tag_close'] = '</ul>';
$config['first_tag_open'] = '<li>';
$config['first_tag_close'] = '</li>';
$config['last_tag_open'] = '<li>';
$config['last_tag_close'] = '</li>';
$config['next_link'] = '&gt;';
$config['next_tag_open'] = '<li>';
$config['next_tag_close'] = '</li>';
$config['prev_link'] = '&lt;';
$config['prev_tag_open'] = '<li>';
$config['prev_tag_close'] = '</li>';
$config['cur_tag_open'] = "<li class='active'><a href='#'>";
$config['cur_tag_close'] = '</a></li>';
$config['num_tag_open'] = '<li>';
$config['num_tag_close'] = '</li>';
$config['num_links'] = 3;
$this->pagination->initialize($config);
$page = $this->uri->segment(3);
$start = ($page-1) * $config['per_page'];
$output = array(
'pagination_link' => $this->pagination->create_links(),
'product_list' => $this->admin->fetch_data($config["per_page"], $start, $minimum_price, $maximum_price, $genre)
);
echo json_encode($output);
//echo 'hello';
}
}
application/hooks/acl.php
......@@ -15,6 +15,8 @@
$allowAll['auth']['email_availability'] =true;
$allowAll['home']['products']=true;
$allowAll['home']['all_products']=true;
$allowAll['home']['filter_products']=true;
$allowAll['cart']['add_to_cart']=true;
$allowAll['cart']['show_cart']=true;
$allowAll['cart']['load_cart']=true;
......
application/models/Admin_model.php
......@@ -6,13 +6,14 @@ class Admin_model extends CI_Model
//gets all data from the product table
public function get_data() {
$this->db->select('product.id, product.artist, product.title, product.genre, product.description, product.price, product.q_ty, product.image, status.status');
$this->db->select('product.id, product.artist, product.title, product.genre, product.description, product.price, product.q_ty, product.image, status.status, product.feature');
$this->db->from('product');
$this->db->join('status', 'product.status_id = status.id_status');
$query = $this->db->get();
return $query->result();
}
//insert input product data into array
public function product_item_array() {
......@@ -35,6 +36,7 @@ class Admin_model extends CI_Model
'price' => $this->input->post('price'),
'description' => $this->input->post('description'),
'image' =>$image['file_name'],
'feature' =>$this->input>post('feature'),
'status_id'=>(int)$status_id->id_status
);
return $data;
......@@ -50,7 +52,7 @@ class Admin_model extends CI_Model
//get product item data in order to update
public function get_product($item_id) {
$this->db->select('product.id, product.artist, product.title, product.genre, product.description, product.price, product.q_ty, product.image, status.status');
$this->db->select('product.id, product.artist, product.title, product.genre, product.description, product.price, product.q_ty, product.image, status.status, feature.feature');
$this->db->from('product');
$this->db->join('status', 'product.status_id = status.id_status');
$this->db->where('id', $item_id);
......@@ -72,6 +74,104 @@ class Admin_model extends CI_Model
$this->db->delete('product', array('id' => $item_id));
}
function make_query($minimum_price, $maximum_price, $genre)
{
$query = "
SELECT * FROM product
WHERE status_id = '2' OR status_id = '1'
";
if(isset($minimum_price, $maximum_price) && !empty($minimum_price) && !empty($maximum_price))
{
$query .= "
AND price BETWEEN '".$minimum_price."' AND '".$maximum_price."'
";
}
if(isset($genre))
{
$brand_filter = implode("','", $genre);
$query .= "
AND genre IN('".$brand_filter."')
";
}
return $query;
}
function count_all($minimum_price, $maximum_price, $genre)
{
$query = $this->make_query($minimum_price, $maximum_price, $genre);
$data = $this->db->query($query);
return $data->num_rows();
}
function fetch_data($limit, $start, $minimum_price, $maximum_price, $genre) {
$query = $this->make_query($minimum_price, $maximum_price, $genre);
$query .= ' LIMIT '.$start.', ' . $limit. ';';
$data = $this->db->query($query);
$output = '';
if($data->num_rows() > 0)
{
foreach($data->result_array() as $row)
{
$output .= '<div class="shop-item">
<div class="image">
';
if($row['feature']=="exclusive") {
$output.='
<span class="badge rounded-0">Exclusive</span>';
}
$output .='
<a href="<?php echo base_url(); ?>index.php/items/item1">
<img class="shop-item-image" src="'.base_url('uploads/'.$row['image']).'" alt=""/>
</a>
';
if($row['status_id']=="1") {
$output .='
<p class="sold-btn">Sold out</p>';
} else {
$output .=' <button class="cart-btn" id="'.$row['id'].'" data-butnid="'.$row['id'].'" data-productid="'.$row['id'].'" data-productartist="'.$row['id'].'"
data-producttitle="'.$row['title'].'" data-productprice="'.$row['price'].'" data-productimage="'.$row['image'].'" value="add to cart" >
<i class="fa fa-shopping-cart"></i>
Add to cart
</button>';
}
$output .='
</div>
<a class="artist" href="#">
<div class="shop-item-details">
<span class="brand">'.$row['artist'].'</span>
</div>
</a>
<div class="title">
<span class="format double-vinyl-lp">'.$row['title'].'</span>
</div>
<div>
<span class="price">€'.$row['price'].'</span>
</div>
</div>
';
}
}
else
{
$output = '<h3>No Data Found</h3>';
}
return $output;
}
}
application/views/admin/product_inventory.php
......@@ -70,6 +70,7 @@
<th>Quantity</th>
<th>Image</th>
<th>Status</th>
<th>Feature</th>
<th>Update</th>
<th>Delete</th>
</tr>
......@@ -88,6 +89,7 @@
<td><?php echo $item->q_ty; ?></td>
<td><img src="<?php echo base_url("uploads/".$item->image) ?>"></td>
<td><?php echo $item->status; ?></td>
<td><?php echo $item->feature; ?></td>
<td><?php echo anchor('admin/update_item/'.$item->id, 'Update', array('class'=>'btn btn-success')); ?></td>
<td><?php echo anchor('admin/delete_item/'.$item->id, 'Delete', array('class'=>'btn btn-danger')); ?></td>
</tr>
......
application/views/register.php
......@@ -216,6 +216,8 @@
</form>
</div>
</div>
</div>
......@@ -251,6 +253,9 @@
})
}
})
$(document).ready(function() {
})
</script>
</body>
......
application/views/templates/header.php
......@@ -4,6 +4,7 @@
<link rel="stylesheet" href="<?php echo base_url(); ?>asset/css/home.css" type="text/css">
<link rel="stylesheet" href="<?php echo base_url(); ?>asset/css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<div class="container">
......@@ -22,28 +23,7 @@
<a href="<?php echo base_url(); ?>index.php/user/user_profile" >
<i class="fa fa-user-circle-o"></i>
</a>
<!--
<ul class="active-nav" style="display: block;">
<li class="profile">
<a href="/profile.html" title="Profile">
Profile
</a>
</li>
<li class="orders">
<a href="/orders.html" title="Order History">
Order History
</a>
</li>
<li class="logout">
<form method="post" action="/">
<button type="submit" title="Log Out" name="logout">
Log Out
</button>
</form>
</li>
</ul> -->
</div>
......@@ -75,19 +55,16 @@
</div>
<div class="user-access">
<a href="<?php echo base_url(); ?>index.php/auth/register">Register</a>
<a href="<?php echo base_url(); ?>index.php/auth/login" class="in">Log in</a>
<a href="<?php echo base_url(); ?>index.php/auth/logout" class="out">Log Out</a>
</div>
<div class="about-menu">
<a href="">About</a>
</div>
<div class="contact-menu">
<a href="">Contact</a>
<a class="pr-2" href="<?php echo base_url(); ?>index.php/home/products">Home</a>
<a class="pr-4" href="<?php echo base_url(); ?>index.php/home/all_products">All</a>
<a class="pr-2" href="<?php echo base_url(); ?>index.php/auth/register">Register</a>
<a class="pr-2" href="<?php echo base_url(); ?>index.php/auth/login" class="in">Log in</a>
<a class="pr-4" href="<?php echo base_url(); ?>index.php/auth/logout" class="out">Log Out</a>
</div>
</div>
</div>
<nav>
<!-- <nav>
<ul id="navigation" class="navigation">
<li >
......@@ -119,7 +96,7 @@
<a class="parent-cat parent-cat-0" href="">Ska + Reggae</a>
</ul>
</nav>
</nav> -->
</header>
......@@ -133,14 +110,11 @@
<!-- <script src="--><?php //echo base_url(); ?><!--asset/js/scrypt.js"></script>-->
<!-- Header Info Begin -->
<script src="<?php echo base_url(); ?>asset/js/jquery-3.3.1.min.js"></script>
<script src="<?php echo base_url(); ?>asset/js/bootstrap.min.js"></script>
<script src="<?php echo base_url(); ?>asset/js/jquery.js"></script>
<script src="<?php echo base_url(); ?>asset/js/jquery-ui.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
</html>
\ No newline at end of file
application/views/templates/home_t.php
......@@ -12,6 +12,7 @@
<link rel="stylesheet" href="<?php echo base_url(); ?>asset/css/home.css" type="text/css">
<link rel="stylesheet" href="<?php echo base_url(); ?>asset/css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
......@@ -31,7 +32,7 @@
</a>
</li>
<li>
<a href="" class="">
<a href="#exclusives" class="">
<h4>EXCLUSIVES</h4>
<p>SHOP NOW</p>
</a>
......@@ -88,63 +89,114 @@
<div class="shop-items">
<?php if(count($data)): ?>
<?php $i=0; ?>
<?php foreach ($data as $item) { ?>
<div class="shop-item">
<div class="image">
<a href="<?php echo base_url(); ?>index.php/items/item1">
<img class="shop-item-image" src="<?php echo base_url("uploads/".$item->image) ?>" alt="Ariana Grande: thank u, next exclusive clear/pink lp"/>
</a>
<?php if($item->status=='sold'): ?>
<p class="sold-btn">Sold out</p>
<?php else: ?>
<button class="cart-btn" id="<?php echo $item->id;?>" data-butnid="<?php echo $item->id;?>" data-productid="<?php echo $item->id;?>" data-productartist="<?php echo $item->artist;?>"
data-producttitle="<?php echo $item->title;?>" data-productprice="<?php echo $item->price;?>" data-productimage="<?php echo $item->image;?>" value="add to cart" >
<i class="fa fa-shopping-cart"></i>
Add to cart
</button>
<?php endif; ?>
</div>
<a class="artist" href="#">
<div class="shop-item-details">
<span class="brand"><?php echo $item->artist; ?></span>
<?php if($item->feature=='recommended') { ?>
<div class="shop-item">
<div class="image">
<a href="<?php echo base_url(); ?>index.php/items/item1">
<img class="shop-item-image" src="<?php echo base_url("uploads/".$item->image) ?>" alt="Ariana Grande: thank u, next exclusive clear/pink lp"/>
</a>
<?php if($item->status=='sold'): ?>
<p class="sold-btn">Sold out</p>
<?php else: ?>
<button class="cart-btn" id="<?php echo $item->id;?>" data-butnid="<?php echo $item->id;?>" data-productid="<?php echo $item->id;?>" data-productartist="<?php echo $item->artist;?>"
data-producttitle="<?php echo $item->title;?>" data-productprice="<?php echo $item->price;?>" data-productimage="<?php echo $item->image;?>" value="add to cart" >
<i class="fa fa-shopping-cart"></i>
Add to cart
</button>
<?php endif; ?>
</div>
</a>
<div class="title">
<span class="format double-vinyl-lp"><?php echo $item->title; ?></span>
</div>
<div>
<span class="price">€<?php echo $item->price; ?></span>
</div>
</div>
<a class="artist" href="#">
<div class="shop-item-details">
<span class="brand"><?php echo $item->artist; ?></span>
</div>
</a>
<div class="title">
<span class="format double-vinyl-lp"><?php echo $item->title; ?></span>
</div>
<div>
<span class="price">€<?php echo $item->price; ?></span>
</div>
</div>
<?php } ?>
<?php } ?>
<?php endif; ?>
</div>
<div id="detail-cart" class="mini-cart-item">
<div class="container mb-4">
<div class="row d-flex justify-content-end">
<button type="button" class="btn btn-light py-2 px-8">See All</button>
</div>
</div>
<div class="h_sec">
<h3 class="section-header"><span>RECOMMENDED PRE-ORDERS</span></h3>
<h3 class="section-header" id="exclusives"><span>EXCLUSIVES</span></h3>
</div>
<div class="shop-items">
<?php if(count($data)): ?>
<?php $i=0; ?>
<?php foreach ($data as $item) { ?>
<?php if($item->feature=='exclusive') { ?>
<div class="shop-item">
<div class="image">
<span class="badge rounded-0">Exclusive</span>
<a href="<?php echo base_url(); ?>index.php/items/item1">
<img class="shop-item-image" src="<?php echo base_url("uploads/".$item->image) ?>" alt="Ariana Grande: thank u, next exclusive clear/pink lp"/>
</a>
<?php if($item->status=='sold'): ?>
<p class="sold-btn">Sold out</p>
<?php else: ?>
<button class="cart-btn" id="<?php echo $item->id;?>" data-butnid="<?php echo $item->id;?>" data-productid="<?php echo $item->id;?>" data-productartist="<?php echo $item->artist;?>"
data-producttitle="<?php echo $item->title;?>" data-productprice="<?php echo $item->price;?>" data-productimage="<?php echo $item->image;?>" value="add to cart" >
<i class="fa fa-shopping-cart"></i>
Add to cart
</button>
<?php endif; ?>
</div>
<a class="artist" href="#">
<div class="shop-item-details">
<span class="brand"><?php echo $item->artist; ?></span>
</div>
</a>
<div class="title">
<span class="format double-vinyl-lp"><?php echo $item->title; ?></span>
</div>
<div>
<span class="price">€<?php echo $item->price; ?></span>
</div>
</div>
<?php } ?>
<?php } ?>
<?php endif; ?>
</div>
</div>
<script type="text/javascript">
baseUrl = '<?php echo base_url(); ?>';
// csrf_value = '<?php echo $this->security->get_csrf_hash(); ?>';
</script>
<script src="<?php echo base_url(); ?>asset/js/scrypt.js"></script>
<script src="<?php echo base_url(); ?>asset/js/scrypt.js"></script>
<script src="<?php echo base_url(); ?>asset/js/jquery-3.3.1.min.js"></script>
<script src="<?php echo base_url(); ?>asset/js/bootstrap.min.js"></script>
<script src="<?php echo base_url(); ?>asset/js/hceader-top.js"></script>
<script>
</script>
</body>
......
asset/css/home.css
......@@ -63,7 +63,7 @@ div {
display: flex;
flex-direction: row-reverse;
width: 40%;
justify-content: space-between;
align-items: center;
......@@ -90,11 +90,11 @@ div {
text-decoration: none;
transition: all .4s ease;
}
.fa {
/* .fa {
font-weight: 900;
font-size: 1.4rem;
}
} */
.cart-box, .toggle-account, .user-access, .about-menu, .contact-menu {
display: inline-block;
list-style: none;
......@@ -151,7 +151,7 @@ div {
/* home page*/
.head-offer {
margin-top: 200px;
margin-top: 132px;
background-color: #2D473A;
box-shadow: 5px 10px 8px #4c7762;
}
......@@ -163,6 +163,12 @@ div {
justify-content: space-around;
background-color: #2D473A;
}
.row .see-all-btn {
font-size: 1.3rem;
font-weight: bold;
background-color: #2D473A;
color: #AE860D;
}
@media (max-width: 950px) {
.offer{
font-size: 0.6em;
......@@ -294,6 +300,18 @@ div {
overflow: hidden; /* clip the excess when child gets bigger than parent */
}
.image .badge {
position: absolute ;
z-index: 10;
left:0;
font-size: 1.1rem !important;
font-weight: bold !important;
background-color: #3a3a3a;
color: #FFF;
box-shadow: 0 1px 5px rgba(0,0,0,.53);
}
.cart-btn, .sold-btn {
position: absolute;
top: 80%;
......@@ -499,3 +517,65 @@ display: grid;
/*grid-column-gap: 1.5rem;*/
/*margin: 1.5rem 0;*/
}
.jumbotron {
height: 60vh;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
background-position:center;
margin-top: 132px;
background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url('https://vmp-www.imgix.net/images/Screen_Shot_2020-05-05_at_7.22.32_PM.original.png?auto=format&fit=crop&w=1090&h=660&bri=-10');;
color: whitesmoke;
}
.jumbotron-content,
.filter-section {
max-width: 1405px;
margin:0 auto;
}
.jumbotron h1 {
font-weight: bold;
}
.filter-section a {
font-weight:700;
text-transform: uppercase;
text-decoration:none;
color: #3a3a3a;
}
.filter-section a:hover {
background-color: white;
color: #626262 ;
}
.filter-list {
transition: 2000ms ease-in-out;
}
.genre-section {
max-width: 1405px;
margin: 0 auto;
padding: .5em;
}
.genre-section input {
visibility: hidden;
}
.genre-section [type="checkbox"] + label {
cursor: pointer;
text-transform: capitalize;
border: 1px solid #3a3a3a ;
color: #3a3a3a;
padding: 5px 10px;
border-radius: 10px;
box-shadow: 0 1px 5px rgba(0,0,0,.53);
}
.genre-section [type="checkbox"]:checked + label {
background-color: #3a3a3a;
color: #ffffff;
}
asset/js/scrypt.js
$(document).ready(function() {
//filter
filter_data(1);
function filter_data(page)
{
var action = 'filter_products';
var minimum_price = $('#hidden_minimum_price').val();
var maximum_price = $('#hidden_maximum_price').val();
var genre = get_filter('genre');
$.ajax({
url: baseUrl+'index.php/home/filter_products/'+ page,
method:"POST",
dataType:"JSON",
data:{action:action, minimum_price:minimum_price, maximum_price:maximum_price, genre:genre},
success:function(data)
{
//$('#shop-items').html(data);
$('#shop-items').html(data.product_list);
$('#pagination_link').html(data.pagination_link);
$('.cart-btn').click(function (event) {
var product_id = $(this).data("productid");
var product_artist = $(this).data("productartist");
var product_title = $(this).data("producttitle");
var product_price = $(this).data("productprice");
var image = $(this).data("productimage");
var buttonId=$(this).data("btnid");
var quantity = 1;
$.ajax({
url : baseUrl+'index.php/cart/add_to_cart',
method : "POST",
data : {product_id: product_id, product_artist: product_artist, product_title: product_title, product_price: product_price, quantity:quantity, image:image},
success: function(data){
$('.cart-btn').val(data.token);
load_cart_data();
showCart();
},
});
//el.stopImmediatePropagation();
})
}
})
}
function get_filter(class_name)
{
var filter = [];
$('.'+class_name+':checked').each(function(){
filter.push($(this).val());
});
console.log(filter);
return filter;
}
$('.common_selector').click(function(){
filter_data(1);
});
$(document).on('click', '.pagination li a', function(event){
console.log('hello')
event.preventDefault();
var page = $(this).data('ci-pagination-page');
filter_data(page);
});
$('#price_range').slider({
range:true,
min:0,
max:100,
values:[5,200],
step:10,
stop:function(event, ui)
{
$('#price_show').html(ui.values[0] + ' - ' + ui.values[1]);
$('#hidden_minimum_price').val(ui.values[0]);
$('#hidden_maximum_price').val(ui.values[1]);
filter_data(1);
}
});
// cart
const cartOverlay = document.querySelector('.cart-overlay');
const cart = document.querySelector('.cart');
const cartBtn =document.querySelector('.cart-link');
......@@ -39,6 +129,7 @@ $(document).ready(function() {
$('.cart-btn').click(function (event) {
var product_id = $(this).data("productid");
var product_artist = $(this).data("productartist");
var product_title = $(this).data("producttitle");
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment