আপনারা অনেকেই  Vue.js 2 এর নাম শুনেছেন, আজকে আমি এটার সাথে  php MySQL দিয়ে কিভাবে  CRUD করতে হয় সেটা দেখাবো 

 

টিউটোরিয়ালটি সাজানো হয়েছে তিনটি পর্বে, আজকে আমরা  UI ডিজাইন করবো আর আপনারা জানেন যে আমার মূল টিটোরিয়ালটি তৈরি করেছি ইউটিউবে , এখানে শুধু  Source Code শেয়ার করবো , টিউটোরিয়ালটির লিংক একদম নিচে দেওয়া আছে প্রথমে ইউটিউব থেকে সেটা দেখে আসুন তার পর Source Code গুলো বোঝার চেষ্টা করবেন। 

 

app.js:

var app = new Vue({
	el: "#root",
	data: {
		showingAddModal: false,
		showingEditModal: false,
		showingDeleteModal: false
	},

	mounted: function(){
		console.log("mounted");
	},

	methods: {

	}
});

 

 style.css:

*{
	margin: 0;
	padding: 0;
}

.container{
	width: 960px;
	margin: auto;
	margin-top: 44px;
}

.fleft{
	float: left;
}

.fright{
	float: right;
}

.clear{
	clear: both;
}

h1{
	font-size: 22px;
}

.addNew{
	padding: 2px 9px;
}

table.list{
	width: 100%;
	margin-top: 33px;	
}

table.list th{
	background: #1A68B8;
	color: #FFFFFF;
	padding: 9px;
}

table.list td{
	padding: 9px;
	text-align: center;
}

table.list tr{
	background: #EEEEEE;
}


button{
	padding: 2px 9px;
}


.modal{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0,0,0, 0.4);
}

.modalContainer{
	width: 555px;
	background: #FFFFFF;
	margin: auto;
	margin-top: 44px;
}

.modalHeading{
	padding: 9px;
	background: #06307C;
	color: #FFFFFF;
}

.modalContent{
	min-height: 333px;
	padding: 44px;
}

.close{
	background: #D73131;
	padding: 3px 9px;
	border: none;
	color: #FFFFFF;
}

table.form input, table.form td{
	padding: 6px;
}

 

root div:

<div id="root">
	<div class="container">
		<h1>List of users</h1>
		<button class="add" @click="showingAddModal = true">Add New</button>
		<div class="clear"></div>
		<hr>
		<table class="list">
			<tr>
				<th>ID</th>
				<th>Username</th>
				<th>Email</th>
				<th>Phone</th>
				<th>Edit</th>
				<th>Delete</th>
			</tr>
			<tr>
				<td>1</td>
				<td>myusername</td>
				<td>myemail</td>
				<td>myphone</td>
				<td><button @click="showingEditModal = true">Edit</button></td>
				<td><button @click="showingDeleteModal = true">Delete</button></td>
			</tr>
			
		</table>
	</div>

	<div class="modal" id="addModal" v-if="showingAddModal">
		<div class="modalContainer">
			<div class="modalHeading">
				<p class="fleft"> Add New User </p>
				<button class="fright close" @click="showingAddModal = false">
					X
				</button>
				<div class="clear">					
				</div>
			</div>

			<div class="modalContent">
				<table class="form">
					<tr>
						<th>
							username
						</th>
						<th> : </th>
						<td>
							<input type="text" name="">
						</td>
					</tr>

					<tr>
						<th>
							email
						</th>
						<th> : </th>
						<td>
							<input type="text" name="">
						</td>
					</tr>

					<tr>
						<th>
							Mobile
						</th>
						<th> : </th>
						<td>
							<input type="text" name="">
						</td>
					</tr>

					<tr>
						<th>
						</th>
						<th> </th>
						<td>
							<button @click="showingAddModal = false">Save</button>
						</td>
					</tr>
				</table>
			</div>			
		</div>
	</div>


	<div class="modal" id="editModal" v-if="showingEditModal">
		<div class="modalContainer">
			<div class="modalHeading">
				<p class="fleft"> Edit User </p>
				<button class="fright close" @click="showingEditModal = false">
					X
				</button>
				<div class="clear">					
				</div>
			</div>

			<div class="modalContent">
				<table class="form">
					<tr>
						<th>
							username
						</th>
						<th> : </th>
						<td>
							<input type="text" name="">
						</td>
					</tr>

					<tr>
						<th>
							email
						</th>
						<th> : </th>
						<td>
							<input type="text" name="">
						</td>
					</tr>

					<tr>
						<th>
							Mobile
						</th>
						<th> : </th>
						<td>
							<input type="text" name="">
						</td>
					</tr>

					<tr>
						<th>
						</th>
						<th> </th>
						<td>
							<button @click="showingEditModal = false">Update</button>
						</td>
					</tr>
				</table>
			</div>			
		</div>
	</div>


	<div class="modal" id="deleteModal" v-if="showingDeleteModal">
		<div class="modalContainer">
			<div class="modalHeading">
				<p class="fleft"> Are You Sure? </p>
				<button class="fright close" @click="showingDeleteModal = false">
					X
				</button>
				<div class="clear">					
				</div>
			</div>

			<div class="modalContent">
				You are going to delete ...
				<br><br><br>

				<button @click="showingDeleteModal = false">Yes</button>
				<button @click="showingDeleteModal = false">No</button>

			</div>			
		</div>
	</div>
</div>
 

Youtube Link: Vue 2 CRUD Part-1