Vue.js ve PHP İle MySQL Database İşlemleri

Yazının son bölümünde de belirttiğim üzere, PHP işlemlerini biraz daha detaylandırıp Vue.js içerisinde anlamlı eylemler gerçekleştireceğiz. Bu yazının konusu olarak, uzak bir MySQL veritabanına bağlanacak (PDO ile), listeleme, ekleme, silme ve düzenleme işlemlerini örneklendirmeye çalışacağım. Mümkün olduğu kadar kodları basit tutmaya çalışacağım. İlerleyen zaman içerisinde ilgili işlemi bir başka yazı altında (benzer örneği MySQL yerine Firebase ile yineleyeceğim) yeniden ele alacağım (refactoring).

PHP İle MySQL Database İşlemleri

MySQL işlemlerini PHP Veri Nesneleri (PDO) eklentisi ile sağlayacağız. PDO arayüzü tanımı bir veri erişimli soyutlama katmanı sağlar. Bu sayede kullandığımız veritabanından bağımsız olarak sorguları çalıştırmak ve sonuçları döndürmek için aynı işlevleri kullanabiliriz. DB işlemlerini db4free.net uzak bağlantı (remote) ile gerçekleştirebiliriz. Aşağıda konu ile ilgili daha önce yayınlanmış bazı yazıları görebilirsiniz.

Gelim PDO ile veritabanı erişiminin sağlanmasına. PDO, hatalarla ilgili istisnalar atabilir. Bu nedenle işlemler genellikle try / catch bloğunda tutulur.

try {
      $db = new PDO("mysql:host=db4free.net:3306;dbname=vuedb_01;charset=utf8", "vuedbuser", "vuedbproject_01");
  } catch ( PDOException $e ){
      print $e->getMessage();
  }

Bir sonraki aşamada method bilgisini edinmemiz gerekir ki POST ve GET‘e göre tanılamalar yapabilelim; $_SERVER['REQUEST_METHOD'] bize ihtiyaç duyduğumuz request method bilgisini verecektir.

switch ($method) {
   case 'GET':
    ...
   break;
   case 'POST':
    ...
   break;
   defaut:
    http_response_code(404);
}

Switch ile method’lara göre tanımlamalarımızı oluşturabiliriz. PHP ile PUT ve DELETE için ayrı işlemler gerçekleştirmek gerekiyor¹. Örnekte işlemleri GET ve POST üzerinden yürütmeye devam edeceğim. Listeleme ile başlayalım. rowCount() ile kayıt olup olmadığını kontrol edip $query ile edindiğim verileri $json‘a aktaralım. $id bir değere sahipse ilgili satırı, değilse tüm satırları listelesin.

$query = $db->query("SELECT * FROM contacts".($id ? " WHERE id=$id" : ''), PDO::FETCH_OBJ);

if ( $query->rowCount() ){
      foreach ($query as $row) {
            $json[] = [
                  'id' => $row->id,
                  'name' => $row->name,
                  'email' => $row->email,
                  'country' => $row->country,
                  'city' => $row->city,
                  'job' => $row->job
            ];
      }
}

$query‘de yer alan PDO::FETCH_OBJ özellik isimlerinin sınıf isimlerine denk düştüğü bir anonim nesne örneği döndürür². Dönen nesneyi $json‘a aktarmıştık. Son adımda json_encode($json) ile json formatı dönüştürme işlemini gerçekleştirmiş oluruz.

Şimdi bu bilgileri bir dosyada toplamamız lazım. Dosyamızın adı api.php olsun. Dosyamız bir json dökümanı gibi değerlendirilmeli. Dolayısıyla Content-type: application/json kullanacağız. Son olarak, tüm bu işlemlerin yanı sıra veritabanıyla işimiz bittiğinde oluşturduğumuz bağlantıyı sonlandırmayı unutmamalıyız. Dosyamızı bu bilgiler ışığında toparlayalım.

Şimdi, Postman ile GET request gerçekleştirelim ve api.php‘nin (endpoint) bize ne gibi bilgiler döneceğini görelim.

Her şey yolunda. O halde, api.php dosyasının POST request durumunda edindiği form verilerini (Content-Type': 'multipart/form-data) insert etmesini sağlayalım.

if ($name && $email) {
        $query = $db->prepare("INSERT INTO contacts (name, email, country, city, job) VALUES (:name, :email, :country, :city, :job)");
        $query->execute(['name' => $name, 'email' => $email, 'country' => $country, 'city' => $city, 'job' => $job]);
        if($query) {
                $json[] = [
                  'id' => $db->lastInsertId(),
                  'name' => $name,
                  'email' => $email,
                  'country' => $country,
                  'city' => $city,
                  'job' => $job,
                  'message' => "Contact added successfully"
                ];
          } else {
            $json[] = ['error' => "Contact insert failed!"];
          }
        } else{
          $json[] = ['error' => 'Error: Name and E-mail are required!'];
        }

POST request kontrolü için Postman body / form-data ile çeşitli veriler göndererek nasıl dönüşler alacağımıza bir bakalım.

Evet, görüldüğü üzere form üzerinden gönderdiğimiz veriler veritabanına kayıt edilmekte. İlgili dosyanın güncel halini görüntülemek için burayı tıklayabilirsiniz.

Şimdi, tüm bu adımları Vue ve Axios ile yürütmeye başlayabiliriz.

Vue.js ve Axios Kullanımı

Bir önceki örnekte Axios ile get ve post işlemleri gerçekleştirmiştik. Bu yazıda var olan işlemleri genişletecek ve MySQL veritabanında kayıtlı olan verileri işleyeceğiz. Instance’imiz şu şekilde:

var app = new Vue({
  el: '#app',
  data() {
    return {
      isActive: false,
      contact: {
        id: '',
        name: '',
        email: '',
        country: '',
        city: '',
        job: ''
      },
      contacts: [],
      currentContact: [],
      fields: ['Position', 'ID', 'Name', 'E-mail', 'Country', 'City', 'Job', 'Manage'],
    }
  },
});

Mümkün olduğu kadar örneği farklı tanımlamalara gerçekleştirmeye çalıştım. Bazı alanlarda kod tekrarları mevcut. Hatta UPDATE ve INSERT işlemleri tek method ile işlenebilir. Şimdilik anlatımı kolay tutabilmek için ayrı tutacağım. Yazının girişinde de bahsettiğim gibi, Firebase kullanım örneğinde kod yeniden ele alınacağı için karşılaştırma da yapılabilir.

Arayüz işlemlerini Bulma CSS ile gerçekleştireceğim. Listelemeyi bu framework’ün tablo yapısı çerçevesinde şu şekide sunabiliriz.

      <table class="table is-bordered is-hoverable is-fullwidth">
        <thead><tr><th v-for="field in fields" v-text="field"></th></tr></thead>
        <tbody>
          <tr v-if="!contacts.length"><td colspan="7">Veriler getiriliyor...</td></tr>
          <tr v-for="(contact, index) in contacts" :key="index" v-else>
            <th>{{ index+1 }}</th>
            <td>{{ contact.id }}</td>
            <td>{{ contact.name }}</td>
            <td>{{ contact.email }}</td>
            <td>{{ contact.country }}</td>
            <td>{{ contact.city }}</td>
            <td>{{ contact.job }}</td>
          </tr>
        </tbody>
        <tfoot><tr><th v-for="field in fields" v-text="field"></th></tr></tfoot>
      </table>

Yeni contact ekleme işlemini bir modal üzerinden sağlayacağım. data içeriğindeki isActive modal’in is-active class’ını kontrol etmekte.

<div class="modal" :class="{'is-active': isActive}">...</div>

Modal içeriğinde yer alan form contact nesnesi ile bind edilmekte ve son olarak addContact() metotu ile axios aracılığıyla POST olarak api.php dosyasına iletilmekte.

addContact: function () {
      let formData = new FormData();

      formData.append('name', this.contact.name)
      formData.append('email', this.contact.email)
      formData.append('city', this.contact.city)
      formData.append('country', this.contact.country)
      formData.append('job', this.contact.job)

      var contact = {};
      formData.forEach(function (value, key) {
        contact[key] = value;
        console.log(contact[key]);
      });

      axios({
          method: 'post',
          url: 'api/test.php',
          data: formData,
          config: {
            headers: {
              'Content-Type': 'multipart/form-data'
            }
          }
        })
        .then(function (response) {
          console.log(response)
          app.contacts.push(app.contact)
          app.resetForm();
          app.getContacts();
        })
        .catch(function (response) {
          console.log(response)
        });
    },
});

getContacts() ise hem mounted olarak hem de ekleme işlemi başarılı olduğunda çağırılan bir diğer metotumuz.

   getContacts: function () {
      axios.get('api/test.php')
        .then(function (response) {
          console.log(response.data);
          app.contacts = response.data;
        })
        .catch(function (error) {
          console.log(error);
        });
    }

Yukarıdaki işlemleri app.js adında bir dosya üzerinden yürütebilirsiniz. Oluşturulan dosyanın son haline burayı tıklayarak ulaşabilirsiniz.

Evet, uygulamamız hazır. İlgili uygulamayı (CRUD) Gitlab üzerinden görüntüleyebilir, git clone ile indirerek hemen test edebilirsiniz. Daha fazla örneğe ise Vue-Examples üzerinden ulaşabilirsiniz.

Vue.js ve PHP İle MySQL Database İşlemleri

PHP İle MySQL Database İşlemleri

Vue.js ve Axios Kullanımı

İleri Okumalar