Cara Membuat CRUD Phonegap dengan PHP MYSQL
Cara Membuat CRUD Phonegap dengan PHP MYSQL - PhoneGap digunakan untuk mengembangkan aplikasi mobile hybrid dan aplikasi asli/native. Sekarang, sebagian besar pengguna suka mengembangkan aplikasi seluler. PhoneGap adalah salah satu kerangka kerja terbaik untuk mengembangkan aplikasi seluler hybrid dan asli.
Kali ini, saya akan berbagi cara membuat CRUD di PhoneGap menggunakan PHP dan MySQL. Ini adalah aplikasi sederhana dan efisien untuk yang mencari sistem kasar dalam penggunaannya sendiri atau penggunaan resmi. Saya telah menggunakan Eclipse untuk mengembangkan aplikasi phonegap, tetapi ada banyak alternatif yang akan ada seperti android studio juga salah satu kerangka kerja terbaik untuk mengembangkan aplikasi mobile.
index.html
Seluruh detail formulir diproses dalam file indeks dan diakses untuk sisi server.
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/demo.css">
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("#insert").click(function(){
var name=$("#name").val();
var position=$("#position").val();
var salary=$("#salary").val();
var dataString="name="+name+"&position="+position+"&salary="+salary+"&insert=";
if($.trim(name).length>0 & $.trim(position).length>0 & $.trim(salary).length>0)
{
$.ajax({
type: "POST",
url:"http://localhost/crud/php/insert.php",
data: dataString,
crossDomain: true,
cache: false,
beforeSend: function(){ $("#insert").val('Connecting...');},
success: function(data){
if(data=="success")
{
alert("inserted");
$("#insert").val('submit');
}
else if(data=="error")
{
alert("error");
}
}
});
}return false;
});
});
</script>
</head>
<body>
<div class="bar bar-header bar-positive" style="margin-bottom:80px;">
<h1 class="title">Employee Details</h1>
<a class="button button-clear" href="view.html">Read the Data</a>
</div>
<div class="list">
<input type="hidden" id="id" value=""/>
<div class="item">
<label>Employee Name</label>
<input type="text" id="name" value=""/>
</div>
<div class="item">
<label>Employee Position</label>
<input type="text" id="position" value=""/>
</div>
<div class="item">
<label>Employee Salary</label>
<input type="text" id="salary" value=""/>
</div>
<div class="item">
<input type="button" id="insert" class="button button-block" value="Insert"/>
</div>
</div>
</body>
</html>
Ini adalah metode sederhana dalam memasukkan nilai dalam basis data, selanjutnya kita telah membuat satu file dengan nama main.html dalam membuat skrip pemrosesan dalam basis data.
main.html
Sekarang kita beralih pada opsi untuk menyertakan Update dan Delete data.
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/demo.css">
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript" src="js/sample.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var id = decodeURI(getUrlVars()["id"]);
var name = decodeURI(getUrlVars()["name"]);
var position = decodeURI(getUrlVars()["position"]);
var salary = decodeURI(getUrlVars()["salary"]);
$("#id").val(id);
$("#name").val(name);
$("#position").val(position);
$("#salary").val(salary);
$("#update").click(function(){
var id=$("#id").val();
var name=$("#name").val();
var position=$("#position").val();
var salary=$("#salary").val();
var dataString="id="+id+"&name="+name+"&position="+position+"&salary="+salary+"&update=";
$.ajax({
type: "POST",
url:"http://localhost/crud/php/update.php",
data: dataString,
crossDomain: true,
cache: false,
beforeSend: function(){ $("#update").val('Connecting...');},
success: function(data){
if(data=="success")
{
alert("Updated");
$("#update").val("Update");
}
else if(data=="error")
{
alert("error");
}
}
});
});
$("#delete").click(function(){
var id=$("#id").val();
var dataString="id="+id+"&delete=";
$.ajax({
type: "GET",
url:"http://localhost/crud/php/delete.php",
data: dataString,
crossDomain: true,
cache: false,
beforeSend: function(){ $("#delete").val('Connecting...');},
success: function(data){
if(data=="success")
{
alert("Deleted");
$("#delete").val("Delete");
}
else if(data=="error")
{
alert("error");
}
}
});
});
});
</script>
</head>
<body>
<div class="bar bar-header bar-positive" style="margin-bottom:80px;">
<a href="index.html" class="button button-clear">Home</a>
<h1 class="title">Update Database</h1>
<a class="button button-clear" href="view.html">Read the Data</a>
</div>
<div class="list">
<input type="hidden" id="id" value=""/>
<div class="item">
<label>Employee Name</label>
<input type="text" id="name" value=""/>
</div>
<div class="item">
<label>Employee Position</label>
<input type="text" id="position" value=""/>
</div>
<div class="item">
<label>Employee Salary</label>
<input type="text" id="salary" value=""/>
</div>
<div class="item">
<input type="button" id="update" class="button button-block" value="Update"/>
<input type="button" id="delete" class="button button-block" value="Delete"/>
</div>
</div>
</body>
</html>
view.html
Dalam file ini mengintegrasikan sisi server dan mendapatkan nilai dalam format json.
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/demo.css">
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
var url="http://localhost/crud/php/json.php";
$.getJSON(url,function(result){
console.log(result);
$.each(result, function(i, field){
var id=field.id;
var name=field.name;
var position=field.position;
var salary=field.salary;
$("#listview").append("<a class='item' href='main.html?id="+id+"&name="+name+"&position="+position+"&salary="+salary+"'><span class='item-note'>$"+salary+"</span><h2&>"+ name + " </h2><p>"+ position +"</p>&</a>");
});
});
});
</script>
</head>
<body>
<div class="bar bar-header bar-positive" style="margin-bottom:80px;">
<a href="index.html" class="button button-clear">Home</a>
<h1 class="title">Read the Data</h1>
</div>
<ul class="list" id="listview">
</ul>
</body>
</html>
Pertama, kita harus membuat satu database dan tabel untuk menyimpan nilai-nilai, dan kemudian membuat koneksi database. Buat file config.php
config.php
<?php
$dbconnection=mysqli_connect("localhost","root","","crud");
if(!$dbconnection)
{
echo"gagal terkoneksi ke server";
}
?>
Kemudian buat file php baru untuk memasukkan nilai dalam database, jadi di sini buat file insert.php .
insert.php
Masukkan beberapa data detail karyawan dan baca nilainya melalui JSON.
<?php
include "config.php";
if(isset($_POST['insert']))
{
$name=$_POST['name'];
$position=$_POST['position'];
$salary=$_POST['salary'];
$q=mysqli_query($con,"INSERT INTO `crud_demo` (`name`,`position`,`salary`) VALUES ('$name','$position','$salary')");
if($q)
echo "success";
else
echo "error";
}
?>
update.php
File ini melihat nilai yang diberikan dalam database dan kita juga telah memodifikasi beberapa nilai di bidang yang diperlukan.
<?php
include "config.php";
if(isset($_POST['update']))
{
$id=$_POST['id'];
$name=$_POST['name'];
$position=$_POST['position'];
$salary=$_POST['salary'];
$q=mysqli_query($con,"UPDATE `crud_demo` SET `title`='$name',`position`='$position',`salary`='$salary' where `id`='$id'");
if($q)
echo "success";
else
echo "error";
}
?>
delete.php
Sintak ini,untuk menghapus nilai yang diberikan dalam database.
<?php
include "config.php";
if(isset($_GET['id']))
{
$id=$_GET['id'];
$q=mysqli_query($con,"delete from `crud_demo` where `id`='$id'");
if($q)
echo "success";
else
echo "error";
}
?>
view.php
Sintak ini, untuk melihat nilai yang diberikan dalam database melalui json.
<?php
include "config.php";
$data=array();
$q=mysqli_query($con,"select * from `crud_demo`");
while ($row=mysqli_fetch_object($q)){
$data[]=$row;
}
echo json_encode($data);
?>
Saya harap Anda menikmati kode ini, dan konten di atas sepenuhnya gratis dan Anda juga telah mengunduh itu tetapi itu tidak dijalankan di aplikasi seluler.
Kali ini, saya akan berbagi cara membuat CRUD di PhoneGap menggunakan PHP dan MySQL. Ini adalah aplikasi sederhana dan efisien untuk yang mencari sistem kasar dalam penggunaannya sendiri atau penggunaan resmi. Saya telah menggunakan Eclipse untuk mengembangkan aplikasi phonegap, tetapi ada banyak alternatif yang akan ada seperti android studio juga salah satu kerangka kerja terbaik untuk mengembangkan aplikasi mobile.
Baca Juga
Cara Membuat CRUD Phonegap dengan PHP MYSQL
Mari kita mulai tutorial untuk membuat operasi crud di phonegap. Pertama, Anda harus membuat satu file dengan nama index.html untuk memasukkan nilai yang diberikan.index.html
Seluruh detail formulir diproses dalam file indeks dan diakses untuk sisi server.
<head>
<link rel="stylesheet" type="text/css" href="css/demo.css">
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("#insert").click(function(){
var name=$("#name").val();
var position=$("#position").val();
var salary=$("#salary").val();
var dataString="name="+name+"&position="+position+"&salary="+salary+"&insert=";
if($.trim(name).length>0 & $.trim(position).length>0 & $.trim(salary).length>0)
{
$.ajax({
type: "POST",
url:"http://localhost/crud/php/insert.php",
data: dataString,
crossDomain: true,
cache: false,
beforeSend: function(){ $("#insert").val('Connecting...');},
success: function(data){
if(data=="success")
{
alert("inserted");
$("#insert").val('submit');
}
else if(data=="error")
{
alert("error");
}
}
});
}return false;
});
});
</script>
</head>
<body>
<div class="bar bar-header bar-positive" style="margin-bottom:80px;">
<h1 class="title">Employee Details</h1>
<a class="button button-clear" href="view.html">Read the Data</a>
</div>
<div class="list">
<input type="hidden" id="id" value=""/>
<div class="item">
<label>Employee Name</label>
<input type="text" id="name" value=""/>
</div>
<div class="item">
<label>Employee Position</label>
<input type="text" id="position" value=""/>
</div>
<div class="item">
<label>Employee Salary</label>
<input type="text" id="salary" value=""/>
</div>
<div class="item">
<input type="button" id="insert" class="button button-block" value="Insert"/>
</div>
</div>
</body>
</html>
Ini adalah metode sederhana dalam memasukkan nilai dalam basis data, selanjutnya kita telah membuat satu file dengan nama main.html dalam membuat skrip pemrosesan dalam basis data.
main.html
Sekarang kita beralih pada opsi untuk menyertakan Update dan Delete data.
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/demo.css">
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript" src="js/sample.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var id = decodeURI(getUrlVars()["id"]);
var name = decodeURI(getUrlVars()["name"]);
var position = decodeURI(getUrlVars()["position"]);
var salary = decodeURI(getUrlVars()["salary"]);
$("#id").val(id);
$("#name").val(name);
$("#position").val(position);
$("#salary").val(salary);
$("#update").click(function(){
var id=$("#id").val();
var name=$("#name").val();
var position=$("#position").val();
var salary=$("#salary").val();
var dataString="id="+id+"&name="+name+"&position="+position+"&salary="+salary+"&update=";
$.ajax({
type: "POST",
url:"http://localhost/crud/php/update.php",
data: dataString,
crossDomain: true,
cache: false,
beforeSend: function(){ $("#update").val('Connecting...');},
success: function(data){
if(data=="success")
{
alert("Updated");
$("#update").val("Update");
}
else if(data=="error")
{
alert("error");
}
}
});
});
$("#delete").click(function(){
var id=$("#id").val();
var dataString="id="+id+"&delete=";
$.ajax({
type: "GET",
url:"http://localhost/crud/php/delete.php",
data: dataString,
crossDomain: true,
cache: false,
beforeSend: function(){ $("#delete").val('Connecting...');},
success: function(data){
if(data=="success")
{
alert("Deleted");
$("#delete").val("Delete");
}
else if(data=="error")
{
alert("error");
}
}
});
});
});
</script>
</head>
<body>
<div class="bar bar-header bar-positive" style="margin-bottom:80px;">
<a href="index.html" class="button button-clear">Home</a>
<h1 class="title">Update Database</h1>
<a class="button button-clear" href="view.html">Read the Data</a>
</div>
<div class="list">
<input type="hidden" id="id" value=""/>
<div class="item">
<label>Employee Name</label>
<input type="text" id="name" value=""/>
</div>
<div class="item">
<label>Employee Position</label>
<input type="text" id="position" value=""/>
</div>
<div class="item">
<label>Employee Salary</label>
<input type="text" id="salary" value=""/>
</div>
<div class="item">
<input type="button" id="update" class="button button-block" value="Update"/>
<input type="button" id="delete" class="button button-block" value="Delete"/>
</div>
</div>
</body>
</html>
Read Nilai melalui JSON
Di sini, saya telah mengintegrasikan json untuk membaca nilai database. pertama-tama kita harus mengonversi array dalam format json kemudian menyandikan json dan melihat nilai yang diberikan. Jadi sekarang buat satu file html view.html untuk melihat nilainya.view.html
Dalam file ini mengintegrasikan sisi server dan mendapatkan nilai dalam format json.
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/demo.css">
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
var url="http://localhost/crud/php/json.php";
$.getJSON(url,function(result){
console.log(result);
$.each(result, function(i, field){
var id=field.id;
var name=field.name;
var position=field.position;
var salary=field.salary;
$("#listview").append("<a class='item' href='main.html?id="+id+"&name="+name+"&position="+position+"&salary="+salary+"'><span class='item-note'>$"+salary+"</span><h2&>"+ name + " </h2><p>"+ position +"</p>&</a>");
});
});
});
</script>
</head>
<body>
<div class="bar bar-header bar-positive" style="margin-bottom:80px;">
<a href="index.html" class="button button-clear">Home</a>
<h1 class="title">Read the Data</h1>
</div>
<ul class="list" id="listview">
</ul>
</body>
</html>
Sekarang gunakan Layanan Web agar Dinamis
Kami telah menggunakan layanan web PHP untuk membuat halaman web yang dinamis untuk aplikasi web dan seluler saya.Pertama, kita harus membuat satu database dan tabel untuk menyimpan nilai-nilai, dan kemudian membuat koneksi database. Buat file config.php
config.php
<?php
$dbconnection=mysqli_connect("localhost","root","","crud");
if(!$dbconnection)
{
echo"gagal terkoneksi ke server";
}
?>
Kemudian buat file php baru untuk memasukkan nilai dalam database, jadi di sini buat file insert.php .
insert.php
Masukkan beberapa data detail karyawan dan baca nilainya melalui JSON.
<?php
include "config.php";
if(isset($_POST['insert']))
{
$name=$_POST['name'];
$position=$_POST['position'];
$salary=$_POST['salary'];
$q=mysqli_query($con,"INSERT INTO `crud_demo` (`name`,`position`,`salary`) VALUES ('$name','$position','$salary')");
if($q)
echo "success";
else
echo "error";
}
?>
update.php
File ini melihat nilai yang diberikan dalam database dan kita juga telah memodifikasi beberapa nilai di bidang yang diperlukan.
<?php
include "config.php";
if(isset($_POST['update']))
{
$id=$_POST['id'];
$name=$_POST['name'];
$position=$_POST['position'];
$salary=$_POST['salary'];
$q=mysqli_query($con,"UPDATE `crud_demo` SET `title`='$name',`position`='$position',`salary`='$salary' where `id`='$id'");
if($q)
echo "success";
else
echo "error";
}
?>
delete.php
Sintak ini,untuk menghapus nilai yang diberikan dalam database.
<?php
include "config.php";
if(isset($_GET['id']))
{
$id=$_GET['id'];
$q=mysqli_query($con,"delete from `crud_demo` where `id`='$id'");
if($q)
echo "success";
else
echo "error";
}
?>
view.php
Sintak ini, untuk melihat nilai yang diberikan dalam database melalui json.
<?php
include "config.php";
$data=array();
$q=mysqli_query($con,"select * from `crud_demo`");
while ($row=mysqli_fetch_object($q)){
$data[]=$row;
}
echo json_encode($data);
?>
Saya harap Anda menikmati kode ini, dan konten di atas sepenuhnya gratis dan Anda juga telah mengunduh itu tetapi itu tidak dijalankan di aplikasi seluler.
Jika link diatas terjadi error jangan sungkan untuk memberi komentar dibawah. Terimakasih
#membuat crud phonegap
#crud phonegap php mysql
#tutorial crud phonegap
#tutorial crud phonegap php mysql
0 Response to "Cara Membuat CRUD Phonegap dengan PHP MYSQL"
Posting Komentar