I am developing a front-end with ReactJS.
How can I serve this app via PHP (plain PHP or Yii1)?
I suppose you'd want to go through the HTTP Protocol to create communication between the two.
In ReactJSX you want to make a fetch/get call that is provided with an EndPoint/REST from your backend.
// at the beginning of your file
import axios from 'axios';
// in your component constructor
state = {
yourStateWithTheRecievedData: "",
}
// as a component method
componentDidMount = () => {
axios
.get('http://localhost:8080/YourBackendAPI')
.then(response => {
this.setState({
yourStateWithTheRecievedData: response.data.yourStateWithTheRecievedData
})
console.log(response.data.yourStateWithTheRecievedData)
})
}
You should now have a state with the data you've recieved. If you have a hard time doing this, i suggest you start off by first applying it to a public API.
You can find a list of public API's here
Related
I'm fairly new to Laravel, and recently I tried to create a Telegram bot that can manage incoming messages and reply accordingly. Initially I plan to ask a user's name and use his name the next time the bot replies.
So how can I manage my bot's webhook which I already managed to set up.
Route::any('/setWebhook', function () {
$response = Telegram::setWebhook([
'url' => 'https://57f7-2806-104e-c-5c3b-3dc7-3284-7383-e130.ngrok.io/NdqvlJstHyIUhmNyTZhCYTnoYxdGzoPcLCzDiMiH/webhook'
]);
dd($response);
});
How can I manage the bot's incoming updates? I'm currently using irazasyed sdk.
You need to use a DB, which requires Model & migration
Telegram Bot API will send POST requests to your webhook
You should add ->middleware('api'), because you'll receive data
Use file_get_contents('php://input') to get the update, Or use a library.
To me, I use SimpleBotAPI library
Simple code in SimpleBotAPI:
// Handle updates here
class BotHandler extends UpdatesHandler
{
public function MessageHandler($message) : bool
{
// Do whatever:
$this->Bot->SendMessage(['chat_id' => $message->chat->id, 'text' => 'new Message!']);
return true;
}
}
Route::post('/bot_webhook', function () {
$Bot = new TelegramBot(env('BOT_TOKEN'), new BotHandler());
$Bot->OnWebhookUpdate();
})->middleware('api');
I'm trying to comunicate with an already working RestAPI server developed in PHP (CakePHP framework); i'm trying to make a simple login action in Angular 7 application and if success i will proceed with the implementations.
This is the Angular App call code:
constructor(protected cli: HttpClient) {
this.tablet_couple = new TabletCoupleModule();
}
ngOnInit() {
this.cli.get('http://work.local/grai/api-angular/api/v1/tablet_couples/1.json')
.subscribe(
data => { console.log(data) }
)
this.cli.post('http://work.local/grai/api-angular/api/v1/tablet_couples/login.json',{
username: 'xxxxxxxx',
passoword: '123456789',
})
.subscribe(
data => { console.log(data) }
)
}
The actual problem is that the GET call work fine, but the POST call still no working.
I'm sure the REST API is working correctly because if i use tool like Insomnia the response is correct for both calls.
I try to find why but the problem is every time the CORS implementation:
I have try to force headers in Cakephp as you can see above but still not working.
public function beforeFilter(\Cake\Event\Event $event)
{
parent::beforeFilter($event);
if($this->request->is('OPTIONS')) {
$this->response->header('Access-Control-Allow-Origin','*');
$this->response->header('Access-Control-Allow-Methods','*');
$this->response->header('Access-Control-Allow-Headers','Content-Type, Authorization');
}
else {
$this->response = $this->response->withHeader("Access-Control-Allow-Origin","*");
$this->response = $this->response->withHeader("Access-Control-Allow-Headers","Origin, X-Requested-With, Content-Type, Accept");
$this->response = $this->response->withHeader("Access-Control-Allow-Methods","*");
}
}
UPDATE 1
I had find a library to integrate CORS with cakephp : cakephp-cors
This help but i still have a problem: i can't use Rest API if they are not on the same domain (ok is CORS) but i need.
IF i deploy the application and put my Angular App on the same domain it works; but i want deploy app that can access remote REST API.
Any suggestion?
Ok, i had a "solution" tanks to the #JensV.
1th :: cakephp 3.1.x is too old
I'm using an OLD version of CakePHP (3.1.14); the 3.1.x is simply too old to manager correctly an OPTIONS Method Call.
Using CakePHP 3.7.* with the plugin cakephp-cors it works correctly and now i can make remote call from localhost:4200 .
2nd :: the Method OPTIONS
This is a method that give me so much pain; this method is called by browsers before a POST method call.
The correct response at this method is a HTTP Code 200 from the server.
If you don't manage this call correctly the browser truncate the POST call.
Again i post some reference about this call and how to find a solution:
CakePHP, preflight & CORS
Handling “XMLHttpRequest” OPTIONS Pre-flight Request in Laravel
I hope it helps someone.
I'm new to the Angular World (I have been using Angularjs all the while).
I want to make a login app and would like to make an api call to the backend (the php and mysql server, running locally on my computer).
In Angularjs, I would write a service like:
(function () {
'use strict';
angular.module('module name').service('userService', user);
function user ($resource) {
return $resource('api/users', {}, {update: {method: PUT}});
}
})();
With that, I could make calls to the server by simply calling
$onInit = function () {
var user = new userService();
user.$save(.....) //post request.
user.$update(....) //put request.
}
In angular, I see things are different. I can't seem to connect to the server using the same code I wrote for AngularJS.
Making an api call like:
this.http.post('api/users', userAccess.value).subscribe(data => {
console.log(data);
}
gives me post http://localhost:3001/api/users 404 not found error.
PS. userAccess is the ReactiveForm formGroup object containing an email address and a password.
The api code sits in a folder under src folder, next to app folder. It has 3 files, api.php, rest.inc.php and the htaccess file. It's my own implementation of an api interface.
Here is my LoginComponent.ts..
import { Component, OnInit } from '#angular/core';
import { FormBuilder, FormGroup, Validators } from "#angular/forms";
import { HttpClient } from '#angular/common/http';
#Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.sass']
})
export class LoginComponent implements OnInit {
hide: boolean = true;
constructor(
private fb: FormBuilder,
private http: HttpClient
) { }
ngOnInit() {
}
userAccess: FormGroup = this.fb.group({
email: ['', [Validators.email, Validators.required]],
password: ['', [Validators.required]]
})
onSubmit = () => {
this.http.post('api/users',
{
username: this.userAccess.value.email,
encryption: this.userAccess.value.password
}
).subscribe(data => {
console.log(data);
});
}
getEmailMessage = () => {
return this.userAccess.controls['email'].hasError('required') ? 'Please enter an email address' : this.userAccess.controls['email'].hasError('email') ? 'Not a valid email' : '';
}
}
And here is the folder structure..
Here is the snapshot of the api folder..
This is the error I get no matter what path I put...
How should I go about doing this the right way?
You are getting 404 error that does mean you are able to call HTTP service from your angular code. Please check whether the URL for your API is correct or not. (Hint: Use Browser tools)
In Angular, to access API it is recommended to create a separate service class which can be later injected wherever you require it e.g. component.
You can create service class using following CLI command
ng g s NameOfYourService
Later int the constructor of your service simply inject a reference of HttpClient. Refer below example
constructor(private httpClient:HttpClient)
you can use this reference as shown below
public performUserLogin(cred:Credentials):Promise<void> {
return this.httpClient.post<void>('http://yourhost:yourport/api_path', cred).toPromise();
}
Note you have choice to either return promise or Observable.
For more details you can go through the official documentation.
path you have defined here is incorrect.
this.http.post('http://localhost/project_name/api/api.php',
{
username: this.userAccess.value.email,
encryption: this.userAccess.value.password
}
).subscribe(data => {
console.log(data);
});
change the path of the api folder, bring it to the root folder(at the same level of e2e folder), then do as mentioned.
add these lines to the php file
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Headers: X-Requested-With');
header('Access-Control-Allow-Methods: POST, GET, OPTIONS');
header('Content-Type: application/json');
and to get the data in post request use this
$data = json_decode(file_get_contents("php://input"));
From what I see in the error log, you get this 404 because you are not calling the good url, you try to reach localhost:4200 but you want to call localhost:3001.
On localhost:4200 you certainly have your angular app running if you launched it using the "ng serve" command, because ng serve uses port 4200.
Since you are not specifying the full path in your post, it is trying to reach the url from where you are calling it, here 4200.
So to fix that you should specify the full path in your post like this:
this.http.post('http://localhost:3001/api/users', userAccess.value).subscribe(data => {console.log(data);}
this should fix it, at least it should call your php api.
I got it working. I just added a proxy configuration and run the server on a different port
I am very very new to PHP and Kohana. Already created a sample/demo "hello World" PHP Kohana application which is running sucessfully in WAMP server.
I want my application to be work as a complete server side component.
Since i'll have only server side logic in this application, it should use a ORM to communicate with my MySQL database.
I'll have a separate client side application which will have UI parts.
So I want my PHP-Kohana should recognize the RestFul webservices call from my client and give the JSON response accordingly.
Is it possible to create a Kohana application which supports RestFul webservices?
If yes, give me a guidance to create the webservices in Kohana application.
Is there any such sample code for demo?
There is no specific demo or sample code that I know of, so hopefully these tips will help to get you started with it...
It is possible, and relatively easy, to accept AJAX requests and produce JSON responses with Kohana. The first thing to be aware of is that unless told otherwise, Kohana will always try to generate the view, and this will fail as a JSON response so first things first:
if ($this->request->is_ajax()) {
// Disable any rendering of the template so it just returns json.
$this->auto_render = FALSE;
}
You'll probably want to put this in the before() method, probably of the parent Controller so that it always runs before you are getting data from the DB.
My personal preference for something like this would be to set up a standard AJAX response array so that the data is always returned in a relatively standard format. Example:
// Standard ajax response array.
$this->ajax_response = array(
'success' => FALSE,
'error' => NULL,
'raw_data' => NULL,
'generated' => ''
);
Customise the above to match your required usage. You'll probably also want this in your before() method.
Now in your action methods, get the data from the DB and add it to the array.
public function action_foobar() {
// Get the primary key ID from the URL.
$var1 = $this->request->param('var1');
$data = ORM::factory('Model', $var1);
if ($data->loaded()) {
$this->ajax_response['success'] = TRUE;
$this->ajax_response['raw_data'] = $data;
} else {
$this->ajax_response['error'] = 'Data could not be found.';
}
}
You should then be able to request this data by calling a URL such as http://www.website.com/controller/foobar/42
The final piece of the puzzle is actually returning this data, as at the moment Kohana won't output anything because we have told it not to. In your after() method, do the following:
if ($this->request->is_ajax()) {
$this->request->headers('Content-Type', 'application/json');
$this->response->body(json_encode($this->ajax_response));
}
Then you're free to interpret that response however you see fit in the jQuery on your client-side application:
$.ajax({
type: "POST",
url: "http://www.website.com/controller/foobar/" + foobarId,
dataType: 'json',
success: function (data) {
if (!data.success) {
alert(data.error);
} else {
// Handle the returned data.
}
},
error: function (xhr, status, errorThrown) {
// Something went very wrong (response failed completely).
alert(errorThrown);
}
});
Good luck with building your app! I hope this helps to at least get you started.
I am totally new in AngularJS and I am using PHP as the server script.
I have a PHP class with connection() and getUsers() functions:
public function connect()
{
$this->connection = new PDO("mysql:host={$this->db_host};dbname={$this->db_name}", $this->db_user, $this->db_pass);
$this->connection->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
return $this->connection;
}
public function getUsers()
{
this->connect = this->connect();
$sql = "SELECT * FROM login";
$stmt = this->connect->prepare($sql);
$stmt->execute();
$res = $stmt->fetchAll();
return json_encode($res);
}
I am stuck at the angular part. How to call a function inside a url using $http.get() ?
$http.get('/angular/conn.php')
.success(function(result)
{
$scope.user = result;
})
.error(function(data, status)
{
$log.log(status);
});
And another question on the side: when using angular with php their is no need to call the class and the function that we should use at the top of each html page ?
You have to understand how the client/server architecture works for Angular. Angular is built to work along a web service, which is responsible for providing among other things, database access. The way you communicate with a web service is through API calls often made with AJAX. You can't simply call a php method from an Angular app like you would from another php class/script. You would have to design a web service in php in order to communicate with it.
Since you are trying to access a resoutce using a GET method on '/angular/conn.php', then your PHP web service should have a way to parse requests and respond accordingly considering the HTTP method, resource name, HTTP headers, etc. Since Angular is meant to work along REST web services, I would recommend you to use a PHP framework that fits such purpose. For example: Slim Framework
Here are some references you might find useful:
What exactly is RESTful programming?
REST Web Services
well the examples i saw where using then when you use GET method for example:
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
$http({
method : "GET",
url : "your url here"
}).then(function mySucces(response) {
$scope.myWelcome = response.data;
}, function myError(response) {
$scope.myWelcome = response.statusText;
});
});
try to put your complete url like: localhost:8080/mypage.php
and print in console the result,
you can first make the request in the browser to check if the server is responding the request