Tutorial Crud Part 1 Insert Data menggunakan ajax jquery dengan framework phalcon dan database mysql

CRUD JQUERY AJAX

Setelah sebelumnya membuat tutorial mengenai "Memadukan Template Bootstrap dengan Framework Phalcon " bisa dilihat sebelumnya :
http://antzstudioblog.blogspot.co.id/2016/01/memadukan-template-bootstrap-dengan.html

Sekarang saya akan membuat tutorial mengenai CRUD(CREATE,READ,UPDATE,DELETE) menggunakan metode ajax dengan framework phalcon dan mysql.

Download projek terlebih dahulu di tutorial sebelumnya :
http://antzstudioblog.blogspot.co.id/2016/01/memadukan-template-bootstrap-dengan.html

Dimana nanti kita akan menggunakan projek tersebut sebagai projek yang nanti kita akan lakukan untuk tutorial ajax.
Persiapan yang harus kita lakukan :

Projek phalcon. bisa di buka pada link sebelumnya atau langsung download disini :https://drive.google.com/file/d/0B-NWqiDMG2MQTURicG9CTGhXYWc/view?usp=sharing
Database : DROP TABLE IF EXISTS `pegawai`;
CREATE TABLE `pegawai` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`nip` varchar(10) DEFAULT NULL,
`nama` varchar(100) DEFAULT NULL,
`alamat` varchar(255) DEFAULT NULL,
`nohp` varchar(14) DEFAULT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=5 DEFAULT CHARSET=latin1;
Jquery (sebagai library nantinya akan kita panggil untuk keperluan ajax) .bisa langsung download di website resmi atau download disini (jquery yg saya gunakan): https://drive.google.com/file/d/0B-NWqiDMG2MQblYya2lPaENGZkE/view?usp=sharing
download file image loading.gif : https://drive.google.com/file/d/0B-NWqiDMG2MQTjhkYi1zSHZhdEk/view?usp=sharing

Ok setelah bahan bahan sudah dipersiapkan , saatnya kita mulai. Copy project yang sudah didownload tadi ke htdocs anda. setelah itu pindahkan file jquery.min.js yang sudah didownload ke folder public/js . Sehingga strukturnya sbb :

Lalu copy juga file image yg sudah didownload lagi pindahkan ke folder public/img.
setelah itu kita buka file index.volt pada folder app/views/template. Lalu tambahkan script ini :

{{ javascript_include('js/jquery.min.js') }}

untuk memanggil library jquery,sehinnga isi dari dari index.volt tersebut menjadi :

<html>
 <head>
  <title>Tutorial Bootstrap dan Phalcon</title>
  {{ stylesheet_link('css/bootstrap.min.css') }}
  {{ javascript_include('js/jquery.min.js') }}
  {{ javascript_include('js/bootstrap.min.js') }}
  
 </head>
 <body>
 <nav id="myNavbar" class="navbar navbar-default navbar-inverse navbar-fixed-top" role="navigation">
     <!-- Brand and toggle get grouped for better mobile display -->
     <div class="container-fluid">
         <div class="navbar-header">
             <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbarCollapse">
                 <span class="sr-only">Toggle navigation</span>
                 <span class="icon-bar"></span>
                 <span class="icon-bar"></span>
                 <span class="icon-bar"></span>
             </button>
             <a class="navbar-brand" href="#">ANTZ Studio</a>
         </div>
         <!-- Collect the nav links, forms, and other content for toggling -->
         <div class="collapse navbar-collapse" id="navbarCollapse">
             <ul class="nav navbar-nav">
                 <li><a href="{{ url('Home/index') }}">Home</a></li>
                 <li><a href="{{ url('Pegawai/index') }}" >Pegawai</a></li>
                 
             </ul>
         </div>
     </div>
 </nav>
  {% block content %}
  {% endblock %}
 </body>
</html>

Setelah kita merubah template sekarang kita akan merubah file view pada folder pegawai . Langkah yang akan kita lakukan adalah menginsert data ke database. Oke langsung saja buka file index.volt pada folder pegawai lalu ganti semuanya menjadi :

{% extends 'template/index.volt' %}

{% block content %}

<style>
    #overlay {
      z-index: 1000;
      display:none;
      position: fixed;
      top: 0px;
      left: 0px;
      width: 100%;
      height: 100%;
      background: rgba(4, 10, 30, 0.8);
    }   

    #tengah{
        width: 250px;
        height: 30px;
        position: absolute;
        top:0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
    }
    </style>

    <div id="overlay">
            <div id="tengah">
                <center>
                    <br>
                    <span style="color:#ffffff">Please wait ....</span>
                    {{ image("img/loading.gif") }}
                </center>
            </div>
        </div>

<div class="container-fluid" style="margin-top:100px">
    <div class="row">
        <div class="col-md-4">
            
            <h2>Form</h2>

                <div class="form-group">
            <label>NIP</label>
            <input type="text" class="form-control" id="txtnip" placeholder="NIP">
        </div>
        <div class="form-group">
            <label>Nama</label>
            <input type="text" class="form-control" id="txtnama" placeholder="NAMA">
        </div>
        <div class="form-group">
            <label>Alamat</label>
            <input type="text" class="form-control" id="txtalamat" placeholder="ALAMAT">
        </div>
        <div class="form-group">
            <label>No Hp</label>
            <input type="text" class="form-control" id="txtnohp" placeholder="NO HP">
        </div>
        <button type="button" onclick="doSave()" class="btn btn-primary"  id="btnsimpan">Simpan</button>
         
        </div>
        <div class="col-md-8">
            <h2>Data</h2>
            <button class="btn btn-info" onclick="doLoad()">Lihat Data</button>
            <div id="dv_data">

            </div>
             
        </div>
        
    </div>
    <hr>
    <div class="row">
        <div class="col-xs-12">
            <footer>
                <p>&copy; Tutorial Memadukan Template Bootstrap dengan Phalcon </p>
            </footer>
        </div>
    </div>
</div>

<script type="text/javascript">
     
    function doSave(){
        var txtnip=document.getElementById("txtnip");
        var txtnama=document.getElementById("txtnama");
        var txtalamat=document.getElementById("txtalamat");
        var txtnohp=document.getElementById("txtnohp");
        
        if($("#btnsimpan").text()=="Simpan")
        {
            $.ajax({
                type: "POST",
                url:"{{ url('Pegawai/insertData') }}",
                    data:"txtnip="+txtnip.value+"&txtnama="+txtnama.value+"&txtalamat="+txtalamat.value+"&txtnohp="+txtnohp.value,
                beforeSend: function(){
                    document.getElementById("overlay").style.display="inherit";
                },
                success: function (response) {
                    document.getElementById("overlay").style.display="none";
                    if(response==1)
                    {
                        alert("data berhasil disimpan")

                    }
                    else
                    {
                        alert("data gagal disimpan")   
                    }
                },
                error:function(){
                    alert("data gagal disimpan")  ;
 document.getElementById("overlay").style.display="none";
  
                }
            });
        }

            
        
    }
 </script>
{% endblock %}

Penjelasan mengenai script javascript :
            $.ajax({
                type: "POST",
                url:"{{ url('Pegawai/insertData') }}",

kode diatas menunjukan bahwa kita memanggil fungsi jquery ajax dimana method dari form yang akan kita kirimkan bertipe post dan url yg akan kita arahkan menujukan pada :

Controller : PegawaiController
Fungsi : insertDataAction

data:"txtnip="+txtnip.value+"&txtnama="+txtnama.value+"&txtalamat="+txtalamat.value+"&txtnohp="+txtnohp.value

kode diatas adalah data yang kita kirim dari form melalui metode post dimana nantinya controller akan menerima data2 tersebut dan akan mengolahnya.

beforeSend: function(){
                    document.getElementById("overlay").style.display="inherit";
                },

kode diatas maksudnya adalah hal yang dilakukan sebelum proses dikirim . Pada proses ini kita melakukan proses menampilkan loading data
success: function (response) {
                    document.getElementById("overlay").style.display="none";
                    if(response==1)
                    {
                        alert("data berhasil disimpan")
                        doLoad();
                    }
                    else
                    {
                        alert("data gagal disimpan")
                    }
                },

kode diatas maksdnya adalah hal yang dilakukan saat proses berhasil dilakukan disini hal yang dilakukan adalah menghilangkan kembali tampilan loading dan proses pengecekan dari variable response 1 artinya berhasil dan selain satu adalah gagal.
error:function(){
                    alert("data gagal disimpan") ;
    document.getElementById("overlay").style.display="none";

                }
kode diatas maksudnya adalah jika saat proses pengeriman ke server terjadi masalah entah itu lost koneksi atau masalah jaringan maka hal yang dilakukan adalah menampilkan pesan peringatan dan menghilangkan loading.

Setelah itu pada index.volt kita rubah selanjutnya pada controller pegawai kita tambahkan fungsi :

public function insertDataAction()
 {
  
  $pgw = new Pegawai();
  $pgw->nip = $this->request->getPost("txtnip");
  $pgw->nama = $this->request->getPost("txtnama");
  $pgw->alamat = $this->request->getPost("txtalamat");
  $pgw->nohp = $this->request->getPost("txtnohp");
  
  if (!$pgw->save()) {
   echo 0;
  }
  else
  {
   echo 1;
  }
   
  
 }

sehingga isi dari PegawaiController :

<?php

class PegawaiController extends ControllerBase
{

    public function indexAction()
    {

    }

    public function insertDataAction()
 {
  
  $pgw = new Pegawai();
  $pgw->nip = $this->request->getPost("txtnip");
  $pgw->nama = $this->request->getPost("txtnama");
  $pgw->alamat = $this->request->getPost("txtalamat");
  $pgw->nohp = $this->request->getPost("txtnohp");
  
  if (!$pgw->save()) {
   echo 0;
  }
  else
  {
   echo 1;
  }
   
  
 }

Setelah itu kita simpan lalu selanjutnya kita harus menghapus sebuah file index.volt yang ada di folder views. mengapa file ini dihapus ? karena kita membuat sebauh fungsi pada controller yang tidak memiliki view, jadi jika sebuah fungsi tidak memiliki file view maka dengan otomatis itu akan mengarah pada file yang tersimpan di folder views. Berikut file index.volt yang harus kita hapus.

oke setelah penghapusan file tadi sekarang kita harus membuat file di dalam folder model.Kita buat file beranama Pegawai.php didalam model isinya sbb :
Pegawai.php

<?php

class Pegawai extends \Phalcon\Mvc\Model
{

    /**
     *
     * @var integer
     */
    public $id;

    /**
     *
     * @var string
     */
    public $nip;

    /**
     *
     * @var string
     */
    public $nama;

    /**
     *
     * @var string
     */
    public $alamat;

    /**
     *
     * @var string
     */
    public $nohp;
}

Setelah itu kita simpan. lalu kita run aplikasinya melalui browser . Saya jalankan aplikasi dengan url sbb :
http://localhost:8012/phalconprojbootstrap/Pegawai

Setelah diklik tombol simpan maka muncul pesan :

Setelah di cek ke database data sudah muncul :

Oke tutorial crud part 1 telah selesai , selanjutnya saya akan membahas mengenai penampilan data pada phalcon.

Projek part1 bisa anda download disini:
https://drive.google.com/file/d/0B-NWqiDMG2MQbGlLeTI2MkpzcVE/view?usp=sharing

Tutorial Selanjutnya adalah menampilkan data dengan ajax jquery menggunakan framework phalcon dan database mysql
Silahkan beri komentar untuk masukan dan diskusi