Tutorial101

tutorial101 is the one place for high quality web development, Web Design and software development tutorials and Resources programming. Learn cutting edge techniques in web development, design and software development, download source components and participate in the community.

article

Friday, March 11, 2022

Vuejs Vue CLI File Upload with Axios and PHP

Vuejs Vue CLI File Upload with Axios and PHP

//src/main.js import < createApp >from 'vue' import App from './App.vue' import axios from 'axios' // C:\vuejs\myapp>npm install --save axios vue-axios import VueAxios from 'vue-axios' createApp(App).use(VueAxios, axios).mount('#app')

//src/components/fileUpload.vue   

//src/App.vue   

Источник

Fetch records from MySQL Database with Vue.js and PHP

Data selection is one of the basic requirements when creating a dynamic website.

Mainly data is fetched from the database on page refresh but without page refresh require to send AJAX request.

I am using the Axios package to send the AJAX request.

In this tutorial, I show how you can fetch records from MySQL database using Vue.js and PHP with the Axios package.

Contents

1. Table structure

I am using users table in the example.

CREATE TABLE `users` ( `id` int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT, `username` varchar(100) NOT NULL, `name` varchar(100) NOT NULL, `email` varchar(100) NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=latin1;

2. Configuration

Create a new config.php file for the database configuration.

Completed Code

So, this is complete step by step guide for upload file using Vue.js with PHP script and Axios package. I hope you have understand this file uploading process using VueJS with PHP script.

Источник

Tutorial101

tutorial101 is the one place for high quality web development, Web Design and software development tutorials and Resources programming. Learn cutting edge techniques in web development, design and software development, download source components and participate in the community.

article

Saturday, November 13, 2021

Vue.js Axios CRUD (Create, Read, Update and Delete) using PHP MySQLi

Vue.js Axios CRUD (Create, Read, Update and Delete) using PHP MySQLi

//index.php       
Vue.js Axios CRUD (Create, Read, Update and Delete) using PHP MySQLi
 
 
 
 
Member List Member 
 
 
 
× >
 
× >
 
 
Firstname
 
Lastname
 
Action
 
 
 
>
 
>
 
 Edit Delete 
 
 
 
 
 
     

//app.js var app = new Vue(< el: '#vuejscrudmembers', data:< showAddModal: false, showEditModal: false, showDeleteModal: false, errorMessage: "", successMessage: "", members: [], newMember: , clickMember: <> >, mounted: function()< this.getAllMembers(); >, methods: < getAllMembers: function()< axios.get('api.php') .then(function(response)< //console.log(response); if(response.data.error)< app.errorMessage = response.data.message; >else < app.members = response.data.members; >>); >, saveMember: function()< //console.log(app.newMember); var memForm = app.toFormData(app.newMember); axios.post('api.php?crud=create', memForm) .then(function(response)< //console.log(response); app.newMember = ; if(response.data.error) < app.errorMessage = response.data.message; >else < app.successMessage = response.data.message app.getAllMembers(); >>); >, updateMember()< var memForm = app.toFormData(app.clickMember); axios.post('api.php?crud=update', memForm) .then(function(response)< //console.log(response); app.clickMember = <>; if(response.data.error) < app.errorMessage = response.data.message; >else < app.successMessage = response.data.message app.getAllMembers(); >>); >, deleteMember()< var memForm = app.toFormData(app.clickMember); axios.post('api.php?crud=delete', memForm) .then(function(response)< //console.log(response); app.clickMember = <>; if(response.data.error) < app.errorMessage = response.data.message; >else < app.successMessage = response.data.message app.getAllMembers(); >>); >, selectMember(member)< app.clickMember = member; >, toFormData: function(obj) < var form_data = new FormData(); for(var key in obj)< form_data.append(key, objVue js axios php); >return form_data; >, clearMessage: function() < app.errorMessage = ''; app.successMessage = ''; >> >);

//api.php connect_error) < die("Connection failed: " . $conn->connect_error); > $out = array('error' => false); $crud = 'read'; if(isset($_GET['crud'])) < $crud = $_GET['crud']; >if($crud == 'read')< $sql = "select * from members"; $query = $conn->query($sql); $members = array(); while($row = $query->fetch_array()) < array_push($members, $row); >$out['members'] = $members; > if($crud == 'create')< $firstname = $_POST['firstname']; $lastname = $_POST['lastname']; $sql = "insert into members (firstname, lastname) values ('$firstname', '$lastname')"; $query = $conn->query($sql); if($query) < $out['message'] = "Member Added Successfully"; >else < $out['error'] = true; $out['message'] = "Could not add Member"; >> if($crud == 'update')< $memid = $_POST['memid']; $firstname = $_POST['firstname']; $lastname = $_POST['lastname']; $sql = "update members set firstname='$firstname', lastname='$lastname' where memid='$memid'"; $query = $conn->query($sql); if($query) < $out['message'] = "Member Updated Successfully"; >else < $out['error'] = true; $out['message'] = "Could not update Member"; >> if($crud == 'delete')< $memid = $_POST['memid']; $sql = "delete from members where memid='$memid'"; $query = $conn->query($sql); if($query) < $out['message'] = "Member Deleted Successfully"; >else < $out['error'] = true; $out['message'] = "Could not delete Member"; >> $conn->close(); header("Content-type: application/json"); echo json_encode($out); die(); ?>

//modal.php  
 
 
Add New Member × 
 
 
Firstname: 
Lastname: 
 
 
 
 Cancel Save 
 
 
 
  
 
 
Edit Member × 
 
 
Firstname: 
Lastname: 
 
 
 
 Cancel Save 
 
 
 
  
 
 
Delete Member × 
 
Are you sure you want to Delete
 
> >
 
 
 
 
 Cancel Yes 
 
 
 
 

//style.css .myModal < 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:50px; >.modalHeader < padding:10px; background: #008CBA; color: #FFFFFF; height:50px; font-size:20px; padding-left:15px; >.editHeader < padding:10px; background: #4CAF50; color: #FFFFFF; height:50px; font-size:20px; padding-left:15px; >.deleteHeader < padding:10px; background: #f44336; color: #FFFFFF; height:50px; font-size:20px; padding-left:15px; >.modalBody < padding:40px; >.modalFooter < height:36px; >.footerBtn < margin-right:10px; margin-top:-9px; >.closeBtn < background: #008CBA; color: #FFFFFF; border:none; >.closeEditBtn < background: #4CAF50; color: #FFFFFF; border:none; >.closeDelBtn

Источник