NodeJS 26: Project2: Online Music store
Requirement:
-------------------------------------
1. Page 1: Add music to cart
2. Page 2: Verify list of musics added.
Used: below database to push added musics and retrieve.
mongodb://test123:Pass123@ds257752.mlab.com:57752/todopavanmr
###################################################################################################
package.json
###################################################################################################
{
"name": "shoppingcart",
"version": "1.0.0",
"description": "shopping cart for music tracker",
"main": "app.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "pavan",
"license": "ISC",
"dependencies": {
"body-parser": "^1.18.3",
"ejs": "^2.6.1",
"express": "^4.16.3",
"mongoose": "^5.2.15",
"nodemon": "^1.18.4"
}
}
###################################################################################################
app.js
###################################################################################################
var express=require('express');
var todoController=require('./controller/todoController');
var app=express();
app.use(express.static('./public'));
app.set('view engine','ejs');
todoController(app);
app.listen(3000);
console.log('listening on 3000');
###################################################################################################
todoController.js
###################################################################################################
var bodyParser=require('body-parser');
var mongoose=require('mongoose');
//connect to Mongodb on the cloud
mongoose.connect('mongodb://test123:Pass123@ds257752.mlab.com:57752/todopavanmr',{useNewUrlParser: true});
//create database schema as an object | ORM
var todoSchema=new mongoose.Schema({
item:String
});
//Set the schema as the Model in the MVC Pattern
var Todo=mongoose.model('Todo',todoSchema);
//var data=[{item:'get milk'},{item:'walk the dog'},{item:'learn Nodejs'}];
var urlencodedParser=bodyParser.urlencoded({extended:false});
module.exports=function(app){
app.get('/todo',function(req,resp){
console.log("Inise get todo.....");
Todo.find({},function(err,data){
if (err) throw err;
resp.render('todo',{todos:data});
});
});
app.post('/todo',urlencodedParser,function(req,resp){
console.log("Inise post todo.....");
//data.push(req.body);
var newTodo=Todo(req.body).save(function(err,data){
if(err) throw err;
resp.render('todo',{todos:data});
});
});
app.delete('/todo/:item',function(req,resp){
console.log("Inise delete todo.....");
Todo.find({item:req.params.item.replace(/\-/g," ")}).remove(function(err,data){
if(err) throw err;
resp.render('todo',{todos:data});
});
});
app.get('/checkout',function(req,resp){
console.log("Inise get checkout.....");
//resp.render('checkoutList',{todos:data});
Todo.find({},function(err,data){
if (err) throw err;
resp.render('checkoutList',{todos:data});
});
});
};
###################################################################################################
todo.ejs
###################################################################################################
<html>
<head>
<title>Music Shopping</title>
<script
src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"></script>
<script src="/assets/todo-list.js"></script>
<link href="/assets/todostyles.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<h1>My Todo List</h1>
<h4></h4>
<div id="todo-table">
<form>
<input type="text" name="item" placeholder="Add music track...." required/>
<button type="submit">Add to cart</button>
</form>
<ul>
<% for(var i=0; i < todos.length ;i++) { %>
<li><%=todos[i].item%></li>
<% } %>
</ul>
<!-- <form id="contact-form" method="GET" action="/checkout"></form> -->
<table>
<tr>
<button ><a href="/checkout" style="color:white">Checkout</a></button>
<!-- <input type="submit" name="submit" value="Checkout"/> -->
<!-- <span>You have added <%=todos.length%> items in your cart</span> -->
</tr>
</table>
<!-- </form> -->
</div>
</body>
</html>
###################################################################################################
checkoutList.ejs
###################################################################################################
<html>
<head>
<title>Checkout List</title>
<script
src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"></script>
<script src="/assets/todo-list.js"></script>
<link href="/assets/todostyles.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<h4></h4>
<div id="todo-table">
<h2>You have added <%=todos.length%> items in your cart </h2>
<ul>
<% for(var i=0; i < todos.length ;i++) { %>
<li><%=todos[i].item%></li>
<% } %>
</ul>
<button type="submit"><a href="/todo" style="color:white">Back</a></button>
<button type="submit">Continue Payment</button>
</div>
</body>
</html>
###################################################################################################
todo-list.js
###################################################################################################
$(document).ready(function(){ //wait for the page to load
$('form').on('submit',function(){ //resgister for submit button click in form
var item= $('form input'); //get ref to the text box on the form
var todo={item: item.val()}; //custom obj (item)= textbox value enteretd by the user
$.ajax({ //Async scope starts to fire async request to the server
type: 'POST', //send data in the body
url: '/todo',
data: todo, //data to be inserted (comes from textbox)
success: function (data){ //if all ok, refresh the page to display inserted data
location.reload(); //refreshes the page
}
});
return false; //return false on faliure
});
$('li').on('click',function(){
var item=$(this).text().replace(/ /g,"-");//clean the data of spaces
$.ajax({
type: 'DELETE',
url: '/todo/' + item, //append the item the user has clicked on to the url
success: function (data){
location.reload(); //refreshes the page
}
});
});
// $('a').on('click',function(){
// //var item=$(this).text().replace(/ /g,"-");//clean the data of spaces
// $.ajax({
// type: 'GET',
// url: '/checkout', //append the item the user has clicked on to the url
// success: function (data){
// location.reload(); //refreshes the page
// }
// });
// });
});
###################################################################################################
todostyles.css
###################################################################################################
body{
background: #fefeff;
font-family: tahoma;
color: #f0f0f0;
}
#todo-table{
position: relative;
width: 95%;
background: #495f81;
margin: 0 auto;
padding: 20px;
box-sizing: border-box;
}
#todo-table form:after{
margin: 0;
content: '';
display: block;
clear: both;
}
input[type="text"]{
width: 70%;
padding: 20px;
background:#a2bce2;
border: 0;
float: left;
font-size: 20px;
color: #d4d3d3;
}
button{
padding: 20px;
width: 30%;
float: left;
background: #2e6650;
border: 0;
box-sizing: border-box;
color: #fff;
cursor: pointer;
font-size: 20px;
}
ul{
list-style-type: none;
padding: 0;
margin: 0;
}
li{
width: 100%;
padding: 20px;
box-sizing: border-box;
font-family: arial;
font-size: 20px;
cursor: pointer;
letter-spacing: 1px;
}
li:hover{
text-decoration: line-through;
background: rgba(0,0,0,0.2);
}
h1{
background: url(/assets/logo2.jpg) no-repeat center;
margin-bottom: 5;
text-indent: -10000px;
height:90px;
width: 1200px;
}
h4{
background: url(/assets/navigation.png) no-repeat center;
position:relative;
display: inline-block;
margin:0 25px;
padding:0 10px;
height:110px;
width: 1200px;
}
###################################################################################################
No comments:
Post a Comment