By GokiSoft.com| 20:07 22/02/2022|
Học JS

[Video] Quản lý sản phẩm bằng javascript - lập trình javascript - C2110L

Quản lý sản phẩm bằng javascript - lập trình javascript



#index.html


<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Quan Ly San Pham</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
	<div class="card">
		<div class="card-header">
			Nhap thong tin san pham
		</div>
		<div class="card-body">
			<form method="post" onsubmit="return saveData()">
				<div class="form-group">
					<label>Ten San Pham</label>
					<input required type="text" name="product_name" id="product_id" placeholder="Nhap ten san pham" class="form-control">
				</div>
				<div class="form-group">
					<label>Nha San Xuat</label>
					<select required name="manufacturer_name" id="manufacturer_id" class="form-control" onchange="changeManufacturer()">
						<option value="">-- Lua Chon --</option>
					</select>
				</div>
				<div class="form-group">
					<label>Danh Muc San Pham</label>
					<select required name="category_name" id="category_id" class="form-control">
						<option value="">-- Lua Chon --</option>
					</select>
				</div>
				<div class="form-group">
					<label>Gia</label>
					<input required type="number" name="price_name" id="price_id" placeholder="Nhap gia" class="form-control" onkeyup="updateTotalPrice()">
				</div>
				<div class="form-group">
					<label>So Luong</label>
					<input required type="number" name="quanlity_name" id="quanlity_id" placeholder="Nhap so luong" class="form-control" onkeyup="updateTotalPrice()">
				</div>
				<div class="form-group">
					<label>Tong Gia</label>
					<input type="number" name="total_price_name" id="total_price_id" placeholder="Tinh tong gia" class="form-control" disabled>
				</div>
				<div class="form-group">
					<button type="submit" class="btn btn-success">Save Product</button>
					<button type="reset" class="btn btn-warning">Reset</button>
				</div>
			</form>
		</div>
	</div>
</div>

<div class="container" style="margin-top: 20px">
	<div class="card">
		<div class="card-header">
			Quan ly danh sach san pham
		</div>
		<div class="card-body">
			<table cellspacing="0">
				<thead>
					<tr>
						<th>STT</th>
						<th>Ten SP</th>
						<th>NSX</th>
						<th>Danh Muc</th>
						<th>Gia</th>
						<th>So Luong</th>
						<th>Tong Tien</th>
						<th style="width: 60px"></th>
						<th style="width: 60px"></th>
					</tr>
				</thead>
				<tbody id="result">
					
				</tbody>
			</table>
		</div>
	</div>
</div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>


#script.js


// B1. Binding toan bo tag input & tbody -> object trong JS
var productTag = document.getElementById('product_id')
var manufacturerTag = document.getElementById('manufacturer_id')
var categoryTag = document.getElementById('category_id')
var priceTag = document.getElementById('price_id')
var quantityTag = document.getElementById('quanlity_id')
var totalPriceTag = document.getElementById('total_price_id')
var resultTag = document.getElementById('result')

// B2. Tu dong tinh tong gia cua tung san pham
function updateTotalPrice() {
	var price = priceTag.value
	var quantity = quantityTag.value

	totalPriceTag.value = price * quantity
}

// B3. Hien thi du lieu len nsx + danh muc san pham -> js -> hien thi nsx + danh muc san pham
// Y tuong ve quan ly du lieu
var dataList = [
	{
		"name": "Apple",
		"categoryList": ["Iphone"]
	}, {
		"name": "Sam Sung",
		"categoryList": ["S01", "S02", "S03", "S04", "S05"]
	}, {
		"name": "LG",
		"categoryList": ["LG01", "LG02"]
	}
]

// Tu du lieu tren -> hien thi thong tin nsx len select
for(var item of dataList) {
	manufacturerTag.innerHTML += `<option value="${item.name}">${item.name}</option>`
}

// Hien thi dc danh muc san pham tuong ung cua tung nsx
function changeManufacturer() {
	var nsx = manufacturerTag.value

	var categoryList = []

	categoryTag.innerHTML = ''
	for(var item of dataList) {
		if(item.name == nsx) {
			categoryList = item.categoryList
			break
		}
	}

	if(categoryList.length > 1) {
		categoryTag.innerHTML = '<option value="">-- Lua Chon --</option>'
	}

	for(var v of categoryList) {
		categoryTag.innerHTML += `<option value="${v}">${v}</option>`
	}
}

// B4: Them/sua/xoa san pham
var productList = []

function saveData() {
	// product object
	var product = {
		"productName": productTag.value,
		"manufacturerName": manufacturerTag.value,
		"category": categoryTag.value,
		"price": priceTag.value,
		"quantity": quantityTag.value
	}

	if(currentIndex >= 0) {
		//update
		productList[currentIndex] = product
		currentIndex = -1
	} else {
		productList.push(product)
	}

	showData()
	saveStorage()

	return false
}

function showData() {
	// Xoa het noi dung du lieu trong tbody
	resultTag.innerHTML = ''

	// Hien thi lai du lieu
	var index = 0
	for(var item of productList) {
		resultTag.innerHTML += `<tr>
				<td>${index + 1}</td>
				<td>${item.productName}</td>
				<td>${item.manufacturerName}</td>
				<td>${item.category}</td>
				<td>${item.price}</td>
				<td>${item.quantity}</td>
				<td>${item.price * item.quantity}</td>
				<td>
					<button type="button" class="btn btn-warning" onclick="editProduct(${index})">Sua</button>
				</td>
				<td>
					<button type="button" class="btn btn-danger" onclick="removeProduct(${index})">Xoa</button>
				</td>
			</tr>`
		index++
	}
}

function removeProduct(index) {
	var option = confirm('Ban co chac chan muon xoa san pham nay khong?')
	if(!option) return

	productList.splice(index, 1)

	showData()

	saveStorage()
}

var currentIndex = -1
function editProduct(index) {
	// index >= 0 -> vi tri cua san pham trong mang productList
	currentIndex = index

	productTag.value = productList[index].productName
	manufacturerTag.value = productList[index].manufacturerName
	changeManufacturer()

	categoryTag.value = productList[index].category

	priceTag.value = productList[index].price
	quantityTag.value = productList[index].quantity
	totalPriceTag.value = productList[index].price * productList[index].quantity
}

// Luu lai thong tin san pham -> sau khi reload + bat lai web -> van hien thi du lieu cu
// Ung dung localStorage -> luu tru thong tin du lieu
// Can luu toan bo thong tin productList -> localStorage
// Chu y: localStorage -> chi cho phep luu kieu du lieu int, float, char, string & nhung productList -> array object
// Do vay => khong the luu truc tiep productList -> localStorage
// Giai phap:
// chuyen productList -> json string -> luu xuong localStorage
// Doc noi dung tu localStorage -> json string -> chuyen array object -> hien thi la len website
function saveStorage() {
	var json = JSON.stringify(productList)

	localStorage.setItem('productList', json)
}

readStorage()

function readStorage() {
	var json = localStorage.getItem('productList')

	if(json != null && json != "") {
		productList = JSON.parse(json)
	}

	showData()
}


#style.css


.container {
	width: 700px;
	margin: 0px auto;
	border: solid #337ab7 2px;
}

.card-header {
	background-color: #337ab7;
	padding: 8px;
	color: white;
	font-weight: bold;
	text-transform: uppercase;
}

.card-body {
	padding: 10px;
}

.form-group {
	margin-bottom: 10px;
}

.form-group label {
	display: block;
	font-weight: bold;
	margin-bottom: 6px;
}

.form-control {
	width: 96%;
	margin: 0px;
	font-size: 16px;
}

.btn {
	border: none;
	font-size: 16px;
	padding: 8px;
	cursor: pointer;
	color: white;
}

.btn-success {
	background-color: #5cb85c;
}

.btn-success:hover {
	background-color: #72da72;
}

.btn-warning {
	background-color: #f1ad4d;
}

.btn-warning:hover {
	background-color: #f8b658;
}

.btn-danger {
	background-color: #d9534f;
}

.btn-danger:hover {
	background-color: #f06f6b;
}

table {
	width: 100%;
}

table th, table td {
	border: solid #e3e4e6 1px;
}


Tags:



Phản hồi từ học viên

5

(Dựa trên đánh giá ngày hôm nay)

Đăng nhập để làm bài kiểm tra

Chưa có kết quả nào trước đó