4 Replies - 1846 Views - Last Post: 17 March 2013 - 02:53 PM

#1 zeion  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 20
  • Joined: 23-September 12

How do I send data to server after a button is clicked?

Posted 16 March 2013 - 04:56 PM

Hi I'm new to this, this might be a silly question or something I'm missing;

I'm using WAMP and am trying to build a menu page that will send a POST request along with data to the PHP server. I'm not sure how to implement this correctly.. I'm using a PHP file (index.php) as the API to handle requests (this page is served first when 'http://localhost/' is request), then it will serve the main page (main.html) on a GET '/' request and then the main page has its own links to other pages. The menu page is accessed from the main page by a href link. So when the user navigates to the menu page, they will be able to click on items from the menu and the items will be stored in an array on the menu page, then they can click the submit button to send that array to the server with a POST. But when the client clicks send how will my PHP API handle the request?

The PHP API:
<?php
class REST_API {
    public  $_content_type = "application/json";
    private $_code = 200;

    // Constructor:
    // HTTP request is captured and stored in $this->_request
    public function __construct(){
		/*
		print $_SERVER['REQUEST_METHOD']."\n";
		print $_SERVER['REQUEST_URI']; */
	
        switch( $_SERVER['REQUEST_METHOD'] ) {
            case "POST":
				//do some stuff here, supposed to handle POST request
				print_r($_POST);
                //$this->sendOrderToSMS();
                break;
            case "GET":
				//$this->_content_type = "text/html";
				header("HTTP/1.1 200");
				header("Content-Type: text/html");
				header("Location: http://localhost/main.html"); 
				break;
            default:
                $this->response('',406);
                break;
        }
    }

	private function sendOrderToSMS() {
		print_r($_POST);
	}
		

    public function response($data, $status=null)
    {
        $this->_code = $status ? $status : 200;
        # Set http header
        header("HTTP/1.1 ".$this->_code);
        header("Content-Type:".$this->_content_type);
        echo $data;
    }    
}	
?>



The menu page:
<!DOCTYPE html>
<html>
	<head>
		<script src="jquery-1.9.1.min.js" ></script> 
		<script>
			$(document).ready(function() {
				var orderedItems = [];
				$('.menuItem').click(function() {
					$('#cart').append(this.id + '<br>');
					orderedItems.push(this.id);
				});
				
				$('.checkOut').click(function() {
					//supposed to send a POST request to the server,
					//should be handled by the PHP API somehow...
					$.post('/orderedItems', {name:'bob'});
				}); 
			});
		</script>
		<title>Menu</title>
	</head>

	<body>
		<h1>Food Items:</h1>
		<ul>
			<li>Coffee <button class="menuItem" id="coffee" type="button">Order this</button></li>
			<li>Milk <button class="menuItem" id="milk" type="button">Order this</button></li>
			<li>Furai Rai <button class="menuItem" id="rice" type="button">Order this</button></li>
			<li>Soda <button class="menuItem" id="soda" type="button">Order this</button></li>
			<li>Soy drinku <button class="menuItem" id="soy drink" type="button">Order this</button></li>
		</ul> 
		<div id="cart">
			<h1>Cart:</h1>
			<p>You have ordered:</p>
		</div>
		<br><button class="checkOut" type="button">Check Out</button>

	</body>
</html>



PS: I have also tried to use Http:Response but cannot get the extension to work..

Is This A Good Question/Topic? 0
  • +

Replies To: How do I send data to server after a button is clicked?

#2 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3526
  • View blog
  • Posts: 12,038
  • Joined: 12-December 12

Re: How do I send data to server after a button is clicked?

Posted 16 March 2013 - 06:27 PM

Where did you obtain your script for the REST_API class? Presumably that comes with some documentation on how to use it.

I would assume that, in principle, there needs to be a setting that directs requests for '/orderedItems' to a particular script, and this script creates an instance of the REST_API class to process the post-data.
Was This Post Helpful? 0
  • +
  • -

#3 zeion  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 20
  • Joined: 23-September 12

Re: How do I send data to server after a button is clicked?

Posted 16 March 2013 - 08:16 PM

Sorry I left out this part:
This is the code for index.php that is the response when the browser queries http://localhost/

<?php 
require_once 'rest_api_food.php';

$api = new REST_API;
//$api->processAPI();
?>




... which creates an instance of the REST API and then the API serves main.html.

But I still don't understand how to have the REST API be able to respond to a button click POST from menu.html?
Do I need to somehow create an instance of REST API when menu.html is loaded?

This post has been edited by Dormilich: 17 March 2013 - 01:09 AM

Was This Post Helpful? 0
  • +
  • -

#4 JackOfAllTrades  Icon User is offline

  • Saucy!
  • member icon

Reputation: 6066
  • View blog
  • Posts: 23,526
  • Joined: 23-August 08

Re: How do I send data to server after a button is clicked?

Posted 17 March 2013 - 03:58 AM

Based on this comment:

    // HTTP request is captured and stored in $this->_request


The data sent to the server will be in $this->_request, which I would expect to be in the form $this->_request['incoming_variable_name'], which in this case would be $this->_request['name'] = 'bob';.

But we really need to know more about this system. Is it some sort of framework?
Was This Post Helpful? 0
  • +
  • -

#5 zeion  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 20
  • Joined: 23-September 12

Re: How do I send data to server after a button is clicked?

Posted 17 March 2013 - 02:53 PM

This API was given as a snippet for another assignment that was given at school where we only had to implement the server side PHP. It was implemented as a port server and no HTML pages were served, we just had to tally data from making queries to Tumblr API and making updates to our database.

So for example for the assignment I would do a curl -X POST [...] request and the server would update the database accordingly.

Like this:

1) Server is started, index.php is ran and REST API object is created
2) HTTP request is made
3) REST API handles the request and updates the database
4) Finished and repeat

But now I wanted to actually make a functioning website with the snippet where the server would serve HTML pages to the browser on request (and also handle POST requests made by those pages).

Now the problem is:

1) Server is started, index.php is ran and REST API object is created
2) GET http://localhost/ request is made
3) API handles the request and serves main.html
4) Client is looking at main.html, API object is not there anymore (?)
5) Client navigates to menu.html through a link in main.html and clicks on check out
6) Client browser sends a POST request to server, but the REST API is not there to handle it

So.. I'm not sure if I should even be using this API for this kind of service?
How are these kinds of sites usually implemented with PHP?

This post has been edited by Dormilich: 17 March 2013 - 11:45 PM

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1