Scribd
Upload
13 views15 pages

pr-5 Ronak

The document outlines the creation of a single-page product listing website using AngularJS, featuring functionalities for adding and updating products. It includes HTML templates for adding and editing products, along with a CSS file for styling and a JavaScript file for application logic. The application supports product categorization and utilizes a JSON file for product data.

Uploaded by

24sl03ms010
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
13 views15 pages

pr-5 Ronak

The document outlines the creation of a single-page product listing website using AngularJS, featuring functionalities for adding and updating products. It includes HTML templates for adding and editing products, along with a CSS file for styling and a JavaScript file for application logic. The application supports product categorization and utilizes a JSON file for product data.

Uploaded by

24sl03ms010
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

Practical - 5

Aim: Create a single page website for product (with


multiple categories) based company using AngularJS.
[Product listing (based on category filter) with AngularJS]
Add Product:

Ronak Babariya (200570116007) 61


Update-product(id=1)

Update price before price 179 and after price 499

Ronak Babariya (200570116007) 62


SourceCode:
HTML File:
[Link]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="[Link]
rel="stylesheet" integrity="sha384-
EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
<script src="[Link] crossorigin="anonymous"></script>
<link rel="stylesheet" href="/css/add_product.css">
</head>
<body>
<nav class="navbar navbar-expand navbar-light bg-light">
<div class="container-sm">
<a class="navbar-brand" href="#">Add Panel</a>
<div class="navcontent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0 d-flex justify-content-center">
<li class="nav-item border border-2 ps-3 pe-3">
<a class="nav-link active fs-4" aria-current="page" href="#">Add Products</a>
</li>
<li class="nav-item border border-2 ps-3 pe-3">
<a class="nav-link active fs-4 " aria-current="page" href="#!/edit_product">Update
Products</a>
</li>
<li class="nav-item border border-2 ps-3 pe-3">
<a class="nav-link active fs-4 " href="#" tabindex="-1" aria-disabled="true">Database</a>
</li>

</ul>
Ronak Babariya (200570116007) 63
</div>
<button class="btn btn-success ps-5 pe-5 pt-2 pb-2" ><a href="#!/" style="text-decoration:
none; color: black;">Quit</a> </button>
</div>
</nav>

<div class="container w-50 border mt-5 " id="form" ng-controller="ctrladdproduct">


<form class="mt-5" ng-submit="addproduct()">
<div class="mb-3">
<label for="UrunID" class="form-label">Product ID</label>
<input type="text" ng-model="[Link]" class="form-control" id="UrunID" aria-
describedby="" required>
</div>
<div class="mb-3">
<label for="UrunAdi" class="form-label">Product Name</label>
<input type="text" ng-model="[Link]" class="form-control" id="UrunAdi"
required>
</div>
<div class="mb-3">
<label class="form-label" for="UrunMiktar">Color</label>
<input type="text" ng-model="[Link]" class="form-control" id="UrunMiktar"
required>
</div>
<div class="mb-3">
<label for="Kategori" class="form-label">Product Category</label>
<select name="Kategori" ng-model="[Link]" id="Kategori" class="ms-1 d-
block w-100" required>
<option></option>
<option value="Elektronik">Men's</option>
<option value="Giyim">Women's</option>
<option value="Kirtasiye">Kid's</option>
</select>
</div>
<div class="mb-3">
<label class="form-label" for="UrunMiktar">Product Image</label>
<input type="link" ng-model="[Link]" class="form-control" id="UrunMiktar"
Ronak Babariya (200570116007) 64
required>
</div>
<div class="mb-3">
<label class="form-label" for="UrunMiktar">Product Price</label>
<input type="text" ng-model="[Link]" class="form-control" id="UrunMiktar"
required>
</div>
<div class=" mt-4">
<label for="reminder" class="form-check-label">Send e-mail when stock runs out</label>
<input type="checkbox" class="form-check-input" name="reminder">
</div>
<div class="d-flex justify-content-center">
<button type="submit" class="btn btn-success text-white btn-outline-success form-control w-
50 m-3" id="ekleButton">Add Product</button>
</div>
</form>
</div>
</body>
</html>

[Link]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="[Link]
rel="stylesheet" integrity="sha384-
EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
<script src="[Link] crossorigin="anonymous"></script>
<link rel="stylesheet" href="/css/add_product.css">
</head>
<body>
<nav class="navbar navbar-expand navbar-light bg-light">
<div class="container-sm">
<a class="navbar-brand" href="#">Add Panel</a>

Ronak Babariya (200570116007) 65


<div class="navcontent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0 d-flex justify-content-center">
<li class="nav-item border border-2 ps-3 pe-3">
<a class="nav-link active fs-4" aria-current="page" href="#">Add Products</a>
</li>
<li class="nav-item border border-2 ps-3 pe-3">
<a class="nav-link active fs-4 " aria-current="page" href="#">Update Products</a>
</li>
<li class="nav-item border border-2 ps-3 pe-3">
<a class="nav-link active fs-4 " href="#" tabindex="-1" aria-disabled="true">Database</a>
</li>

</ul>
</div>
<button class="btn btn-success ps-5 pe-5 pt-2 pb-2" ><a href="#!/" style="text-decoration:
none; color: black;">Quit</a> </button>
</div>
</nav>

<div class="container w-50 border mt-5 " id="form" ng-controller="ctrlEdit">


<form class="mt-5" ng-submit="updateproduct()">
<div class="mb-3">
<label for="UrunID" class="form-label">Product ID</label>
<input type="text" ng-model="[Link]" class="form-control" id="UrunID" aria-
describedby="" required>
</div>
<div class="mb-3">
<label for="UrunAdi" class="form-label">Product Name</label>
<input type="text" ng-model="[Link]" class="form-control" id="UrunAdi" required>
</div>
<div class="mb-3">
<label class="form-label" for="UrunMiktar">Color</label>
<input type="text" ng-model="[Link]" class="form-control" id="UrunMiktar"
required>
</div>
<div class="mb-3">
<label for="Kategori" class="form-label">Product Category</label>
<select name="Kategori" ng-model="[Link]" id="Kategori" class="ms-1 d-block
w-100" required>
<option></option>
<option value="Elektronik">Men's</option>
<option value="Giyim">Women's</option>
Ronak Babariya (200570116007) 66
<option value="Kirtasiye">Kid's</option>
</select>
</div>
<div class="mb-3">
<label class="form-label" for="UrunMiktar">Product Image</label>
<input type="link" ng-model="[Link]" class="form-control" id="UrunMiktar"
required>
</div>
<div class="mb-3">
<label class="form-label" for="UrunMiktar">Product Price</label>
<input type="text" ng-model="[Link]" class="form-control" id="UrunMiktar"
required>
</div>
<div class=" mt-4">
<label for="reminder" class="form-check-label">Send e-mail when stock runs out</label>
<input type="checkbox" class="form-check-input" name="reminder">
</div>
<div class="d-flex justify-content-center">
<button type="submit" class="btn btn-success text-white btn-outline-success form-control w-
50 m-3" id="ekleButton">Update Product</button>
</div>
</form>

<!-- <script src=""></script> -->


</div>
</body>
</html>
CSS File:
[Link]
#form {
background-color: #EEF7F1;
}
#Kategori {
height: 38px;
border: 1px solid #CED4D9;
border-radius: 3px;
}
#ekleButton:hover {
box-shadow: -1px 1px 17px 0px rgba(0,0,0,0.75);
}
li {
margin-right: 3.5em;
}

Ronak Babariya (200570116007) 67


li:hover {
box-shadow: -1px 1px 17px 0px rgba(0,0,0,0.75);
}
input:hover {
border-color: rgb(152, 119, 79);
}
#loginform {
border: 10px solid gray;
background-color: rgb(199, 194, 194);
opacity: 0.8;
}
#adminbody {
background: rgb(2,0,36);
background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(89,44,111,1) 46%, rgba(98,29,93,1)
98%);
}
#invalidlogin {
display: none;
}
#loginbutton {
position: absolute;
left: 44.5%;
top: 430px;
}
.btn{
background-color: #f67034;
}

JS File:
[Link]

let app = [Link]("productApp",["ngRoute","[Link]"]);


[Link](function($routeProvider) {
$routeProvider
.when("/", {
templateUrl: "views/[Link]"
})
.when("/about", {
templateUrl: "/views/[Link]"
})
.when("/card/:id", {
templateUrl: "views/[Link]",
controller: "ctrlproductDetails"
})
.when("/add_product", {
templateUrl: "views/add_product.html",
Ronak Babariya (200570116007) 68
controller:"ctrladdproduct"
})
.when("/edit_product/:id", {
templateUrl: "views/edit_product.html",
controller: "ctrlEdit",
})
.otherwise({
template: "<h3>404. Page not found.</h3>"
});
});

[Link](($rootScope,$http)=>{
$[Link]("[Link]")
.then(function(res) {
$[Link] = [Link];
})
});
[Link]
angular
.module("[Link]",[])
.controller("productCtrl", function($rootScope,$http){
// $[Link]("[Link]")
// .then(function(res){
// $[Link] = [Link];
// [Link]([Link]);
// })
})
.controller("ctrlproductDetails",function ($rootScope, $scope, $routeParams, $http,$location) {
let id = $[Link];
$[Link] = $[Link]((product) => {
return [Link] == id;
});
$[Link] = function (id) {
// TODO api call to delete a person
let idx = $[Link]((product) => {
return [Link] == id;
});
$[Link](idx, 1);
$[Link]("/");

};
})
.controller("ctrladdproduct", function($rootScope,$location,$scope){
$[Link]={};

$[Link] = function(){
$[Link]($[Link]);
$[Link]("/");
Ronak Babariya (200570116007) 69
}
})
.controller("ctrlEdit", function ($scope, $rootScope, $routeParams, $location) {
let id = $[Link];
let existingProduct = $[Link]((product) => {
return [Link] == id;
});
$[Link] = [Link](existingProduct);
$[Link] = function () {
// TODO api call to save data
let idx = $[Link]((product) => {
return [Link] == id;
});
$[Link](idx, 1, $[Link]);
$[Link]("/");
};
})
.controller("ctrlfilter", function ($scope, $rootScope){
// $[Link] = $[Link];
$[Link] = '';
$[Link] = function(filter) {
[Link](filter)
if ($[Link] === filter) {
$[Link] = '';
[Link](filter)
} else {
$[Link] = filter;
[Link](filter)
}
};
$[Link] = function(item) {
if ($[Link] === 'men') {
return [Link] == 'men'; }else if
($[Link] === 'women') {
return [Link] == 'women';
}else if($[Link] === 'kids'){
return [Link] == 'kids';
}else{
return true;
}
};
});

[Link]
[
{
"id":1,

Ronak Babariya (200570116007) 70


"name": "Collar Neck Cotton Mens US Polo",
"image":"[Link]
[Link]?q=70",
"color": ["Jet Black","Midnight Blue"],
"price": "179",
"catagory": "men"
},
{
"id":2,
"name": "Men Color Block Polo Neck Dark Blue T-Shirt",
"image":"[Link]
[Link]?q=70",
"color": ["Jet Black","Jade Green","Midnight Blue"],
"price": "269",
"catagory": "men"
},
{
"id":3,
"name": "ESS Cropped Logo Tee Women Solid Crew Neck Pink T-Shirt",
"image":"[Link]
[Link]?q=70",
"color": ["Blue","Rose Quartz","Black"],
"price": "699",
"catagory": "women"
},
{
"id":4,
"name": "Women Typography Round Neck Blue T-Shirt",
"image":"[Link]
[Link]?q=70",
"color": ["Blue"],
"price": "224",
"catagory": "women"
},
{
"id":5,
"name": "Boys Cartoon/Superhero Cotton Blend T Shirt ",
"image":"[Link]
[Link]?q=70",
"color": ["white","yellow","Light Blue"],
"price": "425",
"catagory": "kids"
},
{
"id":6,
"name": "Boys Printed Cotton Blend T Shirt ",
"image":"[Link]
[Link]?q=70",
Ronak Babariya (200570116007) 71
"color": ["Black","Blue","Red","Yellow"],
"price": "499",
"catagory": "kids"
},
{
"id":7,
"name": "Men Printed Round Neck Yellow T-Shirt",
"image":"[Link]
[Link]?q=70",
"color": ["Black","White","Red","Yellow","Maroon"],
"price": "199",
"catagory": "men"
},
{
"id":8,
"name": "Men Solid Round Neck Black T-Shirt",
"image":"[Link]
[Link]?q=70",
"color": ["Black","Midnight Blue","yellow"],
"price": "179",
"catagory": "men"
},
{
"id":9,
"name": "Women Solid Round Neck White T-Shirt",
"image":"[Link]
[Link]?q=70",
"color": ["White"],
"price": "263",
"catagory": "women"
},
{
"id":10,
"name": "Women Solid Round Neck Grey T-Shirt",
"image":"[Link]
[Link]?q=70",
"color": ["oraneg","Lava Blast","Black"],
"price": "1,439",
"catagory": "women"
},
{
"id":11,
"name": "Baby Boys Printed Pure Cotton T Shirt ",
"image":"[Link]
[Link]?q=70",
"color": ["Black","White","Red","Blue"],
"price": "299",
"catagory": "kids"
Ronak Babariya (200570116007) 72
},
{
"id":12,
"name": "Boys Typography Cotton Blend T Shirt",
"image":"[Link]
[Link]?q=70",
"color": ["Grey","Dark Blue","Orange","Red","Blue"],
"price": "730",
"catagory": "kids"
},
{
"id":13,
"name": "Men Printed Round Neck Grey T-Shirt",
"image":"[Link]
[Link]?q=70",
"color": ["Grey","Blue","Black","White","Pink"],
"price": "269",
"catagory": "men"
},
{
"id":14,
"name": "Men Printed Round Neck Yellow T-Shirt",
"image":"[Link]
[Link]?q=70",
"color": ["Orange","Yellow","Black","White","Olive Green"],
"price": "229",
"catagory": "men"
},
{
"id":15,
"name": "Women Printed Round Neck Pink T-Shirt",
"image":"[Link]
[Link]?q=70",
"color": ["Light Pink"],
"price": "279",
"catagory": "women"
},
{
"id":16,
"name": "Women Solid Scoop Neck Dark Blue T-Shirt",
"image":"[Link]
[Link]?q=70",
"color": ["Dark Blue"],
"price": "219",
"catagory": "women"
},
{
"id":17,
Ronak Babariya (200570116007) 73
"name": "Baby Boys & Baby Girls Printed Wool Blend T Shirt ",
"image":"[Link]
[Link]?q=70",
"color": ["Grey","Blue","Pista","Yellow"],
"price": "275",
"catagory": "kids"
},
{
"id":18,
"name": "Baby Graphic Print Pure Cotton T Shirt",
"image":"[Link]
[Link]?q=70",
"color": ["Black","Yellow","Red","White"],
"price": "425",
"catagory": "kids"
},
{
"id":19,
"name": "Men Typography Hooded Neck White T-Shirt",
"image":"[Link]
[Link]?q=70",
"color": ["Black","Grey","Pink","White","Light Green"],
"price": "269",
"catagory": "men"
},
{
"id":20,
"name": "Men Color Block Hooded Neck White T-Shirt",
"image":"[Link]
[Link]?q=70",
"color": ["Black","blue","white","yellow"],
"price": "199",
"catagory": "men"
},
{
"id":21,
"name": "Women Solid High Neck White T-Shirt",
"image":"[Link]
[Link]?q=70",
"color": ["Off White"],
"price": "243",
"catagory": "women"
},
{
"id":22,
"name": "Women Solid V Neck Maroon T-Shirt",
"image":"[Link]
[Link]?q=70",
Ronak Babariya (200570116007) 74
"color": ["Maroon"],
"price": "227",
"catagory": "women"
},
{
"id":23,
"name": "Boys Striped Cotton Blend T Shirt",
"image":"[Link]
[Link]?q=70",
"color": ["White","Red","Orange","Yellow"],
"price": "244",
"catagory": "kids"
},
{
"id":14,
"name": "Boys Animal Print Cotton Blend T Shirt ",
"image":"[Link]
[Link]?q=70",
"color": ["white"],
"price": "399",
"catagory": "kids"
}
]

Ronak Babariya (200570116007) 75

You might also like