No artigo anterior ensinámos como utilizar variáveis na linguagem PHP. O tutorial de hoje terá como objectivo ensinar o leitor a organizar o seu código de uma melhor forma. Imagine-se que precisa de realizar 100 operações, certamente não iria colocar todas elas no mesmo ficheiro, no mesmo código. É tão bom e simples ser organizado.
Caso tenha falhado os primeiros dois tutoriais poderá consultá-los aqui:
PHP: Organização de funções e chamadas Ajax
O nosso exemplo será bastante simples e irá englobar a função de somar dois números. Para isso, o utilizador deverá criar um ficheiro chamado “soma.php” com o seguinte código:
<?php $numero_1 = 10; $numero_2 = 7; echo $numero_1 + $numero_2; ?>
Facilmente o leitor percebe que o resultado final será 17 (10 + 7). O próximo passo será realizar a chamada deste ficheiro através do nosso “index.php”. Crie um ficheiro com o nome “index.php” com o seguinte código:
<html> <head> <title>Ola Mundo</title> </head> <body> Resultado: <label id="resultado"> <!-- Repare o leitor na chamada ao ficheiro PHP. Caso o ficheiro estivesse noutra pasta, seria 'include([CAMINHO]/soma.php)' --> <?php include('soma.php'); ?> </label> </body> </html>
Repare o leitor como foi chamada a função, com ajuda do ‘include’. Veja o resultado.
Utilizando Javascript com Ajax Requests
Imagine agora o leitor que deseja passar duas variáveis lidas do ecrã para o servidor, este iria fazer o processamento e retornar a soma desses dois valores. Como faria?
A resposta é simples e fácil, basta por exemplo, usar uma chamada Ajax. Uma chamada Ajax é um pedido que é corrido do lado do cliente e enviado ao servidor, em Javascript.
Para isso, o ficheiro ‘soma.php’ tem de estar preparado a receber duas variáveis, da seguinte forma:
<?php $numero_1 = $_REQUEST['num1']; $numero_2 = $_REQUEST['num2']; echo $numero_1 + $numero_2; ?>
O $_REQUEST é responsável por obter os dados enviados pelo pedido ajax que estará a seguir listado.
No ficheiro index.php deverá fazer a seguinte alteração:
<html> <head> <title>Ola Mundo</title> https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js </head> <body> Número 1: <input type="number" id="num1"></input> Número 2: <input type="number" id="num2"></input> <button onclick="SOMA();">CALCULAR SOMA</button> Resultado: <label id="resultado"></label> </body> </html> <script > function SOMA(){ var num1 = document.getElementById('num1').value; var num2 = document.getElementById('num2').value; $.ajax({ // GET ou POST type: "POST", // Ficheiro que queremos que faça o processamento url: "soma.php", // Repare o leitor que o que está dentro das aspas é o nome da variável que vai para o servidor // Para colocar mais que uma variável é necessário usar o '&' para fazer a junção data: "num1=" + num1 + "&num2=" + num2, success: function (resultado) { // Em caso de sucesso document.getElementById('resultado').innerHTML = resultado; }, error: function (xhr, status, error) { // Em caso de erro document.getElementById('resultado').innerHTML = error; } }); } </script >
Foram acrescentados dois campos para o utilizador preencher, assim como um botão para fazer o pedido que está dentro das tags <script> na função SOMA(). Os dois números são enviados para o ficheiro soma.php que irá realizar a soma e devolver o resultado (variável ‘resultado’ em caso de sucesso, ou erro).
Repare também que nas tags ‘<head>’ no inicio, foi acrescentado um script. Esse script irá permitir que o programa faça a compilação de jQuery.
Teste e veja o resultado!
Está a gostar dos tutoriais de PHP? Acha fácil, dificil? Tem alguma questão? Não hesite em comentar.