Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Ecommerce Layout Haidar #12

Open
wants to merge 25 commits into
base: master
Choose a base branch
from
+120,366 −0
Open

Ecommerce Layout Haidar #12

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
25 commits
Select commit Hold shift + click to select a range
e85d08e
Index page and assets
haidarafif0809 Mar 12, 2018
0ef8a11
Detail product page
haidarafif0809 Mar 12, 2018
687fa8b
Cart page
haidarafif0809 Mar 12, 2018
76fdca3
checkout page
haidarafif0809 Mar 12, 2018
ee18094
Success Checkout page
haidarafif0809 Mar 12, 2018
7efb85d
Add footer on index page
haidarafif0809 Mar 12, 2018
31728f4
Add Cart Icon
haidarafif0809 Mar 12, 2018
6b65ebf
Add Carousel
haidarafif0809 Mar 12, 2018
dcf81b5
Add products to cart , update and remove
haidarafif0809 Mar 13, 2018
b5cc318
Give sum of cart to nav-item my cart
haidarafif0809 Mar 13, 2018
de0ba5d
Add backend express api
haidarafif0809 Mar 17, 2018
ad29606
Change index route to json
haidarafif0809 Mar 17, 2018
2f3149e
Admin page, login and manage product
haidarafif0809 Mar 17, 2018
729c5b8
Search Product feature
haidarafif0809 Mar 17, 2018
3344a88
Display product from backend to home page
haidarafif0809 Mar 17, 2018
b89eddf
Change compare same product with _id
haidarafif0809 Mar 17, 2018
dfd17dc
Upload image to GCS
haidarafif0809 Mar 17, 2018
ba2f558
Ignore chate eleon secret api
haidarafif0809 Mar 17, 2018
99fb11d
change card product to vue component
haidarafif0809 Mar 17, 2018
2785c3a
Add online demo link in readme
haidarafif0809 Mar 17, 2018
b707162
Change URL Base condition axios
haidarafif0809 Mar 17, 2018
10b0660
Add rest api link
haidarafif0809 Mar 17, 2018
361d473
Give alert when fail login admin
haidarafif0809 Mar 17, 2018
054a20d
Redirect to product page when login admin success
haidarafif0809 Mar 17, 2018
0a12471
Change Ecommerce Layout to vue cli
haidarafif0809 Mar 27, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@

server/chat-eleon-a39fb2899cf3.json
5 changes: 5 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,2 +1,7 @@
# e-commerce
layouting e-commerce web app

## Online Demo
[ekom.geekosta.com](http://ekom.geekosta.com)
REST API
[ekom-api.geekosta.com](http://ekom-api.geekosta.com)
80 changes: 80 additions & 0 deletions admin/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Ekom</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="/js/jquery.js"></script>

<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>


<!-- Latest compiled JavaScript -->
<script src="/js/bootstrap.min.js"></script>
<style type="text/css" media="screen">
.container {
margin-top: 20px
}
.material-icons {
display: inline-flex;
align-items: center;
justify-content: center;
vertical-align: middle;
}

.card {
margin-top: 20px;
}
.list-group {
margin-top: 10px;
}

</style>
</head>
<body>
<div id="app">

<!-- A grey horizontal navbar that becomes vertical on small screens --> <!-- A grey horizontal navbar that becomes vertical on small screens --> <nav class="navbar navbar-expand-sm navbar-dark bg-dark"> <a class="navbar-brand" href="/index.html">Ekom</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample03" aria-controls="navbarsExample03" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarsExample03">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="../index.html">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="./product.html">Product <span class="sr-only">(current)</span></a>
</li>
</ul>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-md-4 offset-md-4">
<div class="alert alert-danger" v-if="loginFail">
<b>Fail!</b> Wrong Credentials
</div>
<div class="form-group">
<label for="alamat">Username:</label>
<input type="text" name="username" id="username" v-model="username" value="" class="form-control" />
</div>
<div class="form-group">
<label for="password">Password:</label>
<input type="password" name="passwordword" id="password" v-model="password" value="" class="form-control" />
</div>
<button type="button" @click="login" class="btn btn-primary" >Login</button>
</div>
<div class="col-md-8">
</div>
</div>
</div>
</div>
<!-- end div app -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<script src="../js/axios-core.js" charset="utf-8"></script>
<script src="../js/vue-login.js" charset="utf-8"></script>
</body>
</html>
98 changes: 98 additions & 0 deletions admin/product.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,98 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Ekom</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="/js/jquery.js"></script>

<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>


<!-- Latest compiled JavaScript -->
<script src="/js/bootstrap.min.js"></script>
<style type="text/css" media="screen">
.container {
margin-top: 20px
}
.material-icons {
display: inline-flex;
align-items: center;
justify-content: center;
vertical-align: middle;
}

.card {
margin-top: 20px;
}
.list-group {
margin-top: 10px;
}

</style>
</head>
<body>
<div id="app">

<!-- A grey horizontal navbar that becomes vertical on small screens --> <!-- A grey horizontal navbar that becomes vertical on small screens --> <nav class="navbar navbar-expand-sm navbar-dark bg-dark"> <a class="navbar-brand" href="/index.html">Ekom</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample03" aria-controls="navbarsExample03" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarsExample03"> <ul class="navbar-nav mr-auto"> <li class="nav-item"> <a class="nav-link" href="../index.html">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="./product.html">Product <span class="sr-only">(current)</span></a>
</li>
</ul>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label for="alamat">Name:</label>
<input type="text" name="name" id="name" v-model="product.name"value="" class="form-control" />
</div>
<div class="form-group">
<label for="price">Price:</label>
<input type="text" name="price" id="price" v-model="product.price"value="" class="form-control" />
</div>
<div class="form-group">
<label for="image">Image:</label>
<input type="file" name="image" id="image" value="" class="form-control" />
</div>
<button type="button" @click="addProduct" class="btn btn-primary" v-if="!isEdit">Create Product</button>
<button type="button" @click="updateProduct" class="btn btn-warning" v-if="isEdit">Edit Product</button>
<button type="button" @click="cancelEdit" class="btn btn-danger" v-if="isEdit">Cancel Edit</button>
</div>
<div class="col-md-8">
<table class="table">
<thead>
<th>Name</th>
<th>Price</th>
<th>Image</th>
<th>Action</th>
</thead>
<tbody>
<tr v-for="product in products">
<td>{{product.name}}</td>
<td>{{product.price}}</td>
<td>{{product.image}}</td>
<td>
<button class="btn btn-danger btn-sm" @click="deleteProduct(product._id)" >Delete</button>
<button class="btn btn-warning btn-sm" @click="editProduct(product)" >Edit</button></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<!-- end div app -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<script src="../js/axios-core.js" charset="utf-8"></script>
<script src="../js/vue-product.js" charset="utf-8"></script>
</body>
</html>
123 changes: 123 additions & 0 deletions cart.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,123 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Ekom</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="/js/jquery.js"></script>

<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>



<!-- Latest compiled JavaScript -->
<script src="/js/bootstrap.min.js"></script>
<style type="text/css" media="screen">
.container {
margin-top: 20px
}
.material-icons {
display: inline-flex;
align-items: center;
justify-content: center;
vertical-align: middle;
}

.card {
margin-top: 20px;
}
.list-group {
margin-top: 10px;
}
</style>
</head>
<body>
<!-- A grey horizontal navbar that becomes vertical on small screens -->
<!-- A grey horizontal navbar that becomes vertical on small screens -->
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
<a class="navbar-brand" href="/index.html">Ekom</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample03" aria-controls="navbarsExample03" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>

<div class="collapse navbar-collapse" id="navbarsExample03">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="/index.html">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item active">
<a class="nav-link" href="/cart.html">My Cart</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/login.html">Login</a>
</li>
</ul>
<form class="form-inline my-2 my-md-0">
<input class="form-control" type="text" placeholder="Search">
</form>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-md-8">
<h4>Troli Belanja Saya</h4>
<ul class="list-group">
<li class="list-group-item">
<div class="row">
<div class="col-md-2">
<img class="img-fluid" src="/images/product.jpg" alt="" />
</div>
<div class="col-md-4">
<h5>Macbook Air</h5>
</div>
<div class="col-md-3">
<h5>RP 100.000</h5>
</div>
<div class="col-md-3">
<h5>x 1</h5>
</div>
</div>
<!-- end row product -->
</li>
<li class="list-group-item">
<div class="row">
<div class="col-md-2">
<img class="img-fluid" src="/images/product.jpg" alt="" />
</div>
<div class="col-md-4">
<h5>Macbook Air</h5>
</div>
<div class="col-md-3">
<h5>RP 100.000</h5>
</div>
<div class="col-md-3">
<h5>x 1</h5>
</div>
</div>
<!-- end row product -->
</li>
</ul>
</div>
<div class="col-md-4">
<ul class="list-group">
<li class="list-group-item">Rincian Pesanan</li>
<li class="list-group-item">
<p>Subtotal : RP. 100.000</p>
<p>Biaya Pengiriman : RP. 100.000</p>
</li>
<li class="list-group-item">
<p>Total : RP. 200.000</p>
</li>
<li class="list-group-item">
<a href="/checkout.html" class="btn btn-primary">Lanjut Ke Pembayaran</a>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
Loading