By GokiSoft.com| 19:51 25/03/2021|
Học JQuery

[Share Code] Chương trình quản lý xe cộ - Lập trình Bootstrap/jQuery

#guideline.txt


- Viết chương trình quản lý xe cộ:
- Thông tin quản lý:
	- Tên xe
	- Hãng xe
	- Hình ảnh
	- Giá tiền
	- Mô tả chức năng
- Chức năng:
	- Thêm/sửa/xóa
	- Tìm kiếm
	- Hiển thị danh sách xe cộ


#product.js


$(function() {
	//Bat su kien khi nguoi dung submit form
	$('#MyForm').submit(function() {
		addProduct()
		//Huy gui du lieu len Server -> quan tam nhieu khi hoc PHP (Hoac 1 ngon ngu Backend - NodeJS, Scala, Java Web, ASP, ...)
		return false
	})

	//active summernote
	// $('#description').summernote();
	$('#description').summernote({
        height: 300
      });
})

var productList = []
var currentIndex = -1
var searching = ""

function addProduct() {
	//B1. Lay duoc noi dung tu form ra
	name = $('#name').val()
	thumbnail = $('#thumbnail').val()
	price = $('#price').val()
	manufacturer = $('#manufacturer').val()
	description = $('#description').val()

	//Save du lieu duoi 1 object -> product
	product = {
		"name": name,
		"thumbnail": thumbnail,
		"price": price,
		"manufacturer": manufacturer,
		"description": description
	}

	//Luu vao mang productList
	if(currentIndex >= 0) {
		//edit
		productList[currentIndex] = product
		currentIndex = -1
	} else {
		productList.push(product)
	}

	//Hien thi du lieu ra man hinh
	showData()

	//Xoa du lieu trong form.
	//$('#MyForm [type=reset]').click()
}

function deleteItem(index) {
	option = confirm('Bạn có chắc chắn muốn xóa dữ liệu này không?')
	if(!option) return

	productList.splice(index, 1)
	showData()
}

function showData() {
	$('#result').empty()
	for (var i = 0; i < productList.length; i++) {
		product = productList[i]
		if(searching != "" && !product.name.includes(searching)) {
			continue
		}

		arr = product.name.split(searching)
		name = arr.join(`<label style="background-color: yellow">${searching}</label>`)

		$('#result').append(`
			<tr>
				<td>${i + 1}</td>
				<td><img src="${product.thumbnail}" style="width: 120px"></td>
				<td>${name}</td>
				<td>${product.manufacturer}</td>
				<td>${product.price}</td>
				<td><button class="btn btn-warning" onclick="editItem(${i})">Sửa</button></td>
				<td><button class="btn btn-danger" onclick="deleteItem(${i})">Xóa</button></td>
			</tr>`)
	}
}

function editItem(index) {
	currentIndex = index

	product = productList[index]

	$('#name').val(product.name)
	$('#thumbnail').val(product.thumbnail)
	$('#price').val(product.price)
	$('#manufacturer').val(product.manufacturer)
	$('#description').val(product.description)
}

function funcSeaching(searchTag) {
	searching = $(searchTag).val()
	showData()
}


#vidu.html


<!DOCTYPE html>
<html>
<head>
	<!-- https://icons.getbootstrap.com/ -->
	<!-- https://www.w3schools.com/bootstrap4/bootstrap_navbar.asp -->
	<title>Sinh ngau nhien N sinh vien - Bootstrap/jQuery</title>
	<meta charset="utf-8">

	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.0/font/bootstrap-icons.css">

	<!-- include summernote css/js -->
	<link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.css" rel="stylesheet">
	<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.js"></script>
</head>
<body>
	<div class="container">
		<div class="row">
			<div class="col-md-5">
				<div class="card">
					<div class="card-header bg-info text-light text-uppercase" style="font-weight: bold;">
						Nhập thông tin xe cộ
					</div>
					<div class="card-body">
						<form method="post" id="MyForm">
							<div class="form-group">
								<label class="name">Tên Xe:</label>
								<input required="true" type="text" id="name" class="form-control">
							</div>
							<div class="form-group">
								<label class="thumbnail">Hình Ảnh:</label>
								<input required="true" type="text" id="thumbnail" class="form-control">
							</div>
							<div class="form-group">
								<label class="manufacturer">Hãng Xe:</label>
								<select class="form-control" id="manufacturer">
									<option>-- Hãng Xe --</option>
									<option class="Honda">Honda</option>
									<option class="Toyota">Toyota</option>
								</select>
							</div>
							<div class="form-group">
								<label class="price">Giá Tiền:</label>
								<input required="true" type="number" step="0.01" id="price" class="form-control">
							</div>
							<div class="form-group">
								<label class="description">Mô Tả:</label>
								<textarea id="description" class="form-control" rows="5"></textarea>
							</div>
							<button type="submit" class="btn btn-success">Lưu</button>
							<button type="reset" class="btn btn-warning">Xóa</button>
						</form>
					</div>
				</div>
			</div>
			<div class="col-md-7">
				<div class="card">
					<div class="card-header bg-info text-light text-uppercase">
						Quản Lý Dánh Sách Xe Cộ
					</div>
				</div>
				<input type="text" class="form-control" style="margin-top: 10px; margin-bottom: 10px; float: right;" placeholder="Tìm kiếm ..." onkeyup="funcSeaching(this)">
				<table class="table table-bordered table-striped">
					<thead>
						<tr>
							<th>STT</th>
							<th>Hình Ảnh</th>
							<th>Tên Xe</th>
							<th>Hãng Xe</th>
							<th>Giá Tiền</th>
							<th></th>
							<th></th>
						</tr>
					</thead>
					<tbody id="result">
					</tbody>
				</table>
			</div>
		</div>
	</div>

	<script type="text/javascript" src="product.js"></script>
</body>
</html>


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 đó