Insert Data Ke Mysql Menggunakan VueJs Dengan PHP

date 06 Apr 2021
date Lev Yasin
date 33
date Web Programming
Insert Data Ke Mysql Menggunakan VueJs Dengan PHP

Dalam contoh ini kita akan menunjukkan bagaimana memasukkan data ke Mysql menggunakan VueJs dengan PHP. Kita akan mengirimkan formulir dengan bantuan vuejs dan memasukkan data ke dalam Mysql dengan api PHP. Di bawah ini adalah langkah-langkah untuk menerapkan ini, Kita hanya perlu mengikuti langkah-langkah di bawah ini.

Langkah 1: Buat File HTML Dan Tambahkan Kode Di Bawah Ini.

< html lang = "en" >
< head >
< title > Insert Data Ke Mysql Menggunakan VueJs Dengan PHP 
< meta charset = "utf-8" >
< meta name = "viewport" content = "width = device-width, initial-scale = 1" >
< link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" >
< script src = "https://cdn.jsdelivr.net/npm/vue/dist/vue.js" > 
< script src = "https://unpkg.com/axios/dist/axios.min.js" > 

< body >
< div class = "container" id = "app" >
< div class = "container" >
< h4 class = "text-success" > Masukkan Data Ke Mysql Menggunakan VueJs Dengan PHP 
< div class = "panel panel-primary" >
< div class = "panel-heading" > Masukkan Data Ke Mysql Menggunakan VueJs Dengan PHP 
< form class = "form-horizontal" >
< div class = "panel-body" >

< div class = "form-group" >
< label class = "control-label col-sm-2" > Nama depan: 
< div class = "col-sm-5" >
< input class = "form-control" type = "text" name = "name" v-model = "name" >


< div class = "form-group" >
< label class = "control-label col-sm-2" > Email: 
< div class = "col-sm-5" >
< input class = "form-control" type = "email" name = "email" v-model = "email" >
< div class = "form-group" >
< label class = "control-label col-sm-2" > Mobno: 
< div class = "col-sm-5" >
< input class = "form-control" type = "email" name = "phone" v-model = "phone" >



< div class = "form-group" >
< label class = "control-label col-sm-2" > 
< div class = "col-sm-5" >
< tombol @ click = 'submitForm ();' class = "btn btn-primary" name = "submit" type = "button" > Kirim 


Langkah 2: Tambahkan kode VueJs di file HTML di atas.

< script >
app const = new Vue ( {
el: '#app' ,
data: {
nama: '' ,
email: '' ,
telepon: ''
} ,
metode: {
submitForm: function ( ) {

if ( this . name ! = '' && this . email ! = '' && this . phone ! = '' ) {
axios. post ( 'response.php' , {
request: 2 ,
nama: this . nama ,
email: this . email ,
telepon: this . telepon
} )
. then ( fungsi ( respons ) {
console . log ( response ) ;
if ( data response [ 0 ] . status == 1 ) {

alert ( 'Data berhasil disimpan' ) ;
}

} )
. menangkap ( fungsi ( kesalahan ) {
console . log ( kesalahan ) ;
} ) ;
} else {
alert ( 'Silakan masukkan semua file' ) ;
}
}
}
} )
< / script>

< / html >

Langkah 3: Buat FIle response.php.

$ servername = "localhost" ;
$ username = "username" ;
$ password = "password" ;
$ dbname = "dbname" ;
$ mysqli = new mysqli ( $ hostname, $ username, $ password, $ dbname ) ;
$ data = json_decode ( file_get_contents ( "php: // input" )) ;
$ request = $ data-> request ;
if ( $ request == 2 ) {

$ nama = $ data-> nama ;
$ email = $ data-> email ;
$ telepon = $ data-> telepon ;
$ insert = "INSERT INTO` user` (`name`,` email`, `mobileno`) VALUES ('" . $ name. "', '". $ email. "', '". $ phone. "' ) ";
$ result = $ mysqli-> query ( $ insert ) ;
if ( $ result ) {
$ respon [] = array ( 'status' = > 1 ) ;
} else {
$ respon [] = array ( 'status' = > 0 ) ;
}
echo json_encode ( $ response ) ;
exit ;
}
lev_yasin.png

Lev Yasin

Instruktur Web Programming Mataweb

Sangat tertarik dengan dunia Pemrograman Web & Mobile, saat ini fokus pada bagian Backend Web Developer, menggunakan PHP sebagai bahasa pemrograman utama, biasanya saya menggunakan Laravel.

Artikel Terkait

Halo, ada yang bisa kami bantu?