Liman Eklentilerinde Guzzle İle Express.js Web API'ına İstek Göndermek
1- Express.js İle Web API'ın Hazırlanması
"liman" kullanıcısı ile liman sunucusuna bağlandıktan sonra "home/liman" dosyasına gidin.
Express.js kurulumunu yapın.
express myapp
Komutu ile projenizi oluşturun.
Web App olarak kullanmayacağımız için "view" ve "public" dosyasını silin.
"routes" dosyasının users.js dosyasını da silebilirisiniz.
-
3000 numaralı portu kontrol edin. Eğer doluysa express.js çalışmayacaktır.
- Dolu olması durumunda enviroment değişkeninini değiştirerek yada "bin/www" dosyasında
var port = normalizePort(process.env.PORT || '3000');3000 değeriyle oynayarak boş bir portta çalıştırın.(Doğru port ataması için Wikipedia'ya bakabilirsiniz.)
"app.js" dosyasında "view engine setup" "path" ve "userRouter"ın bulunduğu kısımları silin.
"error handler" kısmını tamamen silin yada başka bir hata kontrolü ekleyin.
Bittiğin de "app.js" aşağıdaki gibi görülecektir.
var createError = require(anlamlı'http-errors');
var express = require('express');
var cookieParser = require('cookie-parser');
var logger = require('morgan');
var indexRouter = require('./routes/home');
var app = express();
app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());wikipedia
// `/home` yerine `/api/v1/users` gibi daha anlamlı isimler de verebilirsiniz.
app.use('/home', indexRouter);
// catch 404 and forward to error handler
app.use(function(req, res, next) {
next(createError(404));
});
module.exports = app;
2- Kullanıcı İsimlerinin Eklenmesi ve Okunması
NOT: Bu örneğin basit tutulması için kullanıcılar veritabanında değil memory'de tutulmuştur
- "routes" dizinin altında "home.js" dosyasında kullanıcı eklemek ve kullanıcıları almak için iki route ve bir array oluşturun oluşturun.
var express = require('express');
var router = express.Router();
let names = [{
name: "mete",
surname: "arslan"
},{
name: "mehmet",
surname: "basibuyuk"
},{
name: "ali",
surname: "veli"
}];
router.get('/getNames', function (req, res, next) {
res.send(JSON.stringify(names));
});
router.post('/addName', function (req, res, next) {
console.log(req.body);konsolda
if(!req.body.name || !req.body.surname)
return res.send('FAILED').status(400);
names.push(req.body);
res.send("OK").status(200);
});
module.exports = router;
Kullanıcıları göndermeden önce karşı tarafta da kolay bir şekilde okunması için JSON formatına çevirip gönderin.
Gerçek projelerede "POST" işlemleri için "request" ile gönderilen bilgiye daha ayrıntılı bir doğrulama yapmanız gerekir. "express-validator" yada başka bir modül kullanabilirsiniz.
Bu işlemlerden sonra terminalden projenin olduğu dosyaya gidin ve
npm run start
komutu ile uygulamanızı başlatın.
NOT:"Nodemon" yada benzeri bir modül ile çalıştırmaya başlarsanız yada uygulamayı kapatıp açarsanız kullanıcıların bulunduğu dizin memory'de olduğu için ilk duruma geri dönecektir.
3- Liman Eklentisinde Guzzle İle Controller Oluşturulması
Eklenti Oluşturulması:https://docs.liman.dev/eklenti-gelistirme/baslangic/yeni-eklenti-olusturma
Eklenti oluşturulduktan sonra(PHP OOP olarak oluşturun) VSCode ile "/liman/extensions/eklenti_adı" dosyasını açın.
composer.jsondosyasında require kısmınıa Guzzle'i ekleyin
eklemek"require": {
"guzzlehttp/guzzle": "^7.0"
}
- "app/Controllers" altına bir controller oluşturun.
<?php
namespace App\Controllers;
use Liman\Toolkit\Shell\Command;
use GuzzleHttp\Client;
class GuzzleTestController
{
private $client;
public function __construct()
{
$this->$client = new Client([
// Base URI is used with relative requests
'base_uri' => '10.154.127.120:3001/',
// You can set any number of default request options.
'timeout' => 2.0,
]);
}
public function getNames()
{
$response = $this->$client->request('GET', 'home/getNames');
$contents = json_decode($response->getBody()->getContents());
return respond($contents, 200);
}
public function addName()
{
validate([
'name' => 'required|string',
'surname' => 'required|string'
]);
$body = json_encode(
[
'name' => request("name"),
'surname' => request("surname")
]
);
$response = $this->$client->request(
'POST',
'home/addName',
[
'body' => $body,
'headers' => ['Content-Type' => 'application/json']
]
);
$contents = $response->getBody()->getContents();
return respond($contents, 200);
}
}
"constructor" kısmına oluşturmuş olduğumuz express serverına bağlanmak için bir client oluşturun.
Express.js'ten kullanıcıların bilgisini alacak ve kullanıcı ekleyecek iki metot yazın.
"getNames" metodunda istediğimiz kullanıcılar JSON formatında gelmektedir bu veriyi json_decode ile anlamlı hale getirip respond ile gönderin. Dilerseniz gelen veride bir sorun olması durumunda hata kontrolü de yaptırabilirsiniz.
"addName" metodunda kullanıcıdan da veri alınmaktadır. Alınan veri "validate" fonksiyonu ile doğrulandıktan sonra gönderinin "body" kısmına atamak için "request" fonksiyonunu kullanın.
"client" ile yapılacak olan istek için "$client->request()" metodunuda header kısmında gönderilen verinin JSON formatında olduğunu belirtin.
"response" Express tarafında işlemin başarılı yada başarısız olmasına göre bir dönüt verecektir.
Son olarak "routes.php" dosyasına yaptığınız metotları ekleyin.
<?php
eklemekeklemek
return [
"index" => "HomeController@index",
"get_hostname" => "HostnameController@get",
"set_hostname" => "HostnameController@set",
"get_guzzletestnames" => "GuzzleTestController@getNames",
"add_guzzletestnames" => "GuzzleTestController@addName"
];
4- View'in Kodlanması
NOT: Yetki problemlerinden dolayı yeni oluşturduğun dosyalar okunamayabiliyor. Oluşturduğunuz dosyaların sahibinin doğru kişi olduğundan emin olun.
"views" klasörünün altına yapmış olduğumuz Controller'ı çağaracak bir blade.php dosyası ve kodun daha düzenli olması için JsScript kodlarının bulunduğu dosyaları oluşturun.
index.blade.php dosyasına bu viewleri ekleyin.
@extends('layouts.master')
@section('content')
<h2 class="text-bold">{{ __("Deneme2") }}</h2>
<ul class="nav nav-tabs" role="tablist" style="margin-bottom: 15px;">
<li class="nav-item">
<a class="nav-link active" onclick="getHostname()" href="#hostname" data-toggle="tab">
<i class="fas fa-server"></i> {{ __("Hostname") }}
</a>
</li>
<li class="nav-item">
<!--onclick kismina her guzzle test paneli sectildiginde tablonun yuklenmesi icin bir fonksiyon ekledim-->
<a class="nav-link" onclick="guzzleTest()" href="#guzzleTest" data-toggle="tab">
<i class="fas fa-server"></i> {{ __("Guzzle Test") }}
</a>
</li>
</ul>
<div class="tab-content">
<div id="hostname" class="tab-pane active">
@include('hostname.main')
</div>
<div id="guzzleTest" class="tab-pane">
<!--burada oluşturmuş olduğum view'i ekledim-->
@include('guzzleTest.main')
</div>
</div>
@endsection
- Oluşturmuş olduğunuz blade.php dosyasında tabloyu ve inputları alacak kısmı kodlayın ve son kısmında yazacağımız scriptleri de ekleyin.
<div class="row">
<div class="col-12 mb-2">
<table id="users" class="table"></table>
</div>
<div class="col-12 mb-2">
<form onsubmit="addName(); return false;" class="row input-group">
<div class="col-md-4">
<input id="nameInput" type="text" class="form-control"/>
</div>
<div class="col-md-4">
<input id="surnameInput" type="text" class="form-control"/>
</div>
<div class="col-md-4">
<button type="submit" id="addNameButton" class="btn btn-warning">Kullanici Ekle</button>
</div>
</form>
</div>
</div>
@include("guzzleTest.scripts")
<script>
function getNames() {
showSwal("{{ __('Yükleniyor...') }}", 'info');
let data = new FormData();
request("{{ API('get_guzzletestnames') }}", data, function(response) {
response = JSON.parse(response);
let users = response.message;
let final_html = `<thead><tr>
<th>Isim</th>
<th>Soyisim</th>
</tr></thead><tbody>`;
users.forEach(u => {
final_html += `<tr>
<td>${u.name}</td>
<td>${u.surname}</td>
</tr>`
});
final_html += "</tbody>"
$('#users').html(final_html);
Swal.close();
}, function(response) {
response = JSON.parse(response);
showSwal(response.message, 'error');
});
}
function addName() {
let data = new FormData();
let $nameInput = $("#nameInput");
let $surnameInput = $("#surnameInput");
data.append("name", $nameInput.val());
data.append("surname", $surnameInput.val());
request("{{ API('add_guzzletestnames') }}", data,
function(response) {
response = JSON.parse(response);
if(response.status == 200){
getNames();
$nameInput.val("");
$surnameInput.val("");
}
});
}
-
function guzzleTest() {
getNames();
}
</script>
Sciptlerin bulunacağı dosya içeriginde panel aktive olduğunda çağırılacak bir fonksiyon yazın.(Bu durumda bu fonksiyon guzzleTest)
Controller içerisinde yazmış olduğumuz metotları çağıracak iki fonksiyon yazın.
Bu fonksiyonlardan "getNames" kullanıcı listesini alıp tablo haline çeviriyor.
Controller'a istek göndermek için request fonksiyonu kullanılıyor. Eğer göndereciğiniz istekte veri varsa FormData sınıfından türemiş bir nesne ile ile ekleyip gönderin.
data.append("name", $nameInput.val());
data.append("surname", $surnameInput.val());
Github Linkleri
https://github.com/White-Hare/LimanGuzzleExpressOrnegi-Laravel
https://github.com/White-Hare/LimanGuzzleExpressOrnegi-Express
Latest comments (0)