Insert Data Into Database Using Vue.js With PHP Mysql

Insert Data Into Database using Vue.js with PHP Mysql

Contents

In this Post We Will Explain About is Insert Data Into Database using Vue.js with PHP Mysql With Example and Demo.Welcome on Pakainfo.com – Examples, The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to Insert Data into MySQL Database using PHP Example

In this post we will show you Best way to implement insert data into database in vuejs, hear for how to insert data in database using vuejs in php with Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.

Vue.js CRUD Operations with PHP and MySQL

In this Example,First of all Add or Include External Libs Like as a(jQuery, css etc..), and then create a simple index.php or index.html page.After that crate a simple javascript file like as a index.js or main.js, It is also add your web-application First Header Part to some priority set.After that Include your relevant CSS Class.

Creating simple Add Modal popup using vuejs



	
		
			Add New User
			
		
		
			
				User Firstname:
				
			
			
				User Lastname:

style.css

.liveModal{
	position:fixed;
	bottom:0;
	background: rgba(0, 0, 0, 0.4);
	top:0;
	left:0;
	left:0;
}
 
.lstmodelctn{
	width: 800px;
	background: #3d3d3d;
	margin:auto;
	margin-top:52px;
}
 
.mdlheader{
	font-size:20px;
	padding-left:14px;
	padding:12px;
	background: #008852;
	color: #FFFFFF;
	height:52px;
}
 
 
.mdlBody{
	padding:38px;
}
 
.mdlFooter{
	height:39px;
}
 
.footerBtn{
	margin-left:11px;
	margin-top:-9px;
}
 
.closeBtn{
	background: #c60000;
	color: #3d3d3d;
	border:none;
}

Updating index.php




	Vue.js simple step by step CRUD Operation using PHP and MySQLi
	
	



	simple Vue.js Insert update delete  Operation with PHP and MySQLi
	
		
			
				
					User List
					
					
				
			
 
			
				
				 {{ msgError }}
			
 
			
				
				 {{ msgSuccess }}
			
 
			
				
					User Firstname
					User Lastname
					User Action
				
				
					
						{{ user.userfname }}
						{{ user.userlname }}

User Firstname	User Lastname	User Action
{{ user.userfname }}	{{ user.userlname }}

Add API(api.php)

if($crud == 'create'){
 
	$userfname = $_POST['userfname'];
	$userlname = $_POST['userlname'];
 
	$sql = "insert into users (userfname, userlname) values ('$userfname', '$userlname')";
	$query = $conn->query($sql);
 
	if($query){
		$resOutput['message'] = "User Added Successfully";
	}
	else{
		$resOutput['error'] = true;
		$resOutput['message'] = "Could not add User";
	}
 
}

Updating our Vue source Code( main.js)

var main = new Vue({
	el: '#users',
	data:{
		displaySimpleModal: false,
		msgError: "",
		msgSuccess: "",
		users: [],
		newUser: {userfname: '', userlname: ''}
	},
 
	mounted: function(){
		this.getAllUsers();
	},
 
	methods:{
		getAllUsers: function(){
			axios.get('api.php')
				.then(function(dataRes){
					//console.log(dataRes);
					if(dataRes.data.error){
						main.msgError = dataRes.data.message;
					}
					else{
						main.users = dataRes.data.users;
					}
				});
		},
 
		saveUser: function(){
			//console.log(main.newUser);
			var memForm = main.toFormData(main.newUser);
			axios.post('api.php?crud=create', memForm)
				.then(function(dataRes){
					//console.log(dataRes);
					main.newUser = {userfname: '', userlname:''};
					if(dataRes.data.error){
						main.msgError = dataRes.data.message;
					}
					else{
						main.msgSuccess = dataRes.data.message
						main.getAllUsers();
					}
				});
		},
 
		toFormData: function(obj){
			var liveFrmDta = new FormData();
			for(var key in obj){
				liveFrmDta.append(key, obj[key]);
			}
			return liveFrmDta;
		},
 
		msgCls: function(){
			main.msgError = '';
			main.msgSuccess = '';
		}
 
	}
});

Vue.js CRUD Operations with PHP and MySQL

You are Most welcome in my youtube Channel Please subscribe my channel. and give me FeedBack.
More Details……
Angularjs Example

Example

I hope you have Got What is INSERT DATA INTO DATABASE USING VUEJS AND PHP And how it works.I would Like to have FeedBack From My Blog(Pakainfo.com) readers.Your Valuable FeedBack,Any Question,or any Comments about This Article(Pakainfo.com) Are Most Always Welcome.