How to make requests to a MySql database using PHP on angular 14?

Question

I've been working on a website that used to be PHP based. Every file and request was made through PHP, but now I'm passing it all to Angular 14. The only interaction with the database I need is to search a list of file names and their respective authors and creation year.

I want to create this request in an "Angular friendly way", tyring to avoid workarounds...

The current php structure we have looks similar to this:

    $connect = new PDO 
    ('dbname','dbname','password');
    $author = $_POST['name'];
    $title= $_POST['title'];
    $year= $_POST['year'];

To select the items:

      $sql = $connect->query("select author, title, year, url from files where author LIKE '%$author %' and title LIKE '%$title%' and year LIKE '%$year%' order by author");

The table which is going to display the results of the search:

while ($row = $sql->fetch(PDO::FETCH_ASSOC)) 
     {
      echo "<tr>";
      echo "<td>".$row['autor']. "</td>";
      echo "<td><a href='".$row['url']."' target='_blank'>" .$row['titulo']. "</a></td>";
      echo "<td>" .$row['curso']. "</td>";
      echo "<td>" .$row['ano']. "</td>";
      echo "</tr>";
      ;
     }
     echo '</table>';

I'm not necessarily looking forward to get rid of the php code, I'm willing to keep it. I was thinking of using a service to make some kind of subscribe to a post request, as if I was consuming an API.

I was also thinking of getting the data that goes to the table created with "echo" and instead, bind it on a HTML component. I'd subscribe the data to a property on my component.ts file and bind its data on my component.

I'm new at learning how to connect the client side to the database side, so I'd much appreaciate any help or tip on how I could make this request possible. Thanks in advance!

Well you'd probably make an AJAX/fetch request to the server to fire the PHP script, and then read the response back and inject it into your page. — ADyson, Oct 24 '22 at 22:56
There isn't a way to connect client (browser) Javascript code (be it Angular or React or anything else) directly to MySQL software running on a shared server. You need some sort of server code like the php code you showed us. Can you please [edit] your question to clarify what you want to do. Are you trying to get rid of the php code? — O. Jones, Oct 24 '22 at 22:56
@O.Jones There are some... [radical alternatives](https://supabase.com/blog/postgres-wasm) though. — Dai, Oct 24 '22 at 22:57
@O.Jones I edited it with a little more information of my intentions, and hope I made it clear :) — KimiH, Oct 24 '22 at 23:15
**Warning:** You are wide open to [SQL Injections](https://php.net/manual/en/security.database.sql-injection.php) and should use parameterized **prepared statements** instead of manually building your queries. They are provided by [PDO](https://php.net/manual/pdo.prepared-statements.php) or by [MySQLi](https://php.net/manual/mysqli.quickstart.prepared-statements.php). Never trust any kind of input! Even when your queries are executed only by trusted users, [you are still in risk of corrupting your data](http://bobby-tables.com/). [Escaping is not enough!](https://stackoverflow.com/q/32391315) — Dharman, Oct 25 '22 at 09:33

score 1 · Answer 1 · answered Oct 25 '22 at 10:57

In Angular, you'll probably use the httpClient class to request data from your server. Your code will tell it to hit a URL on your server like

https://service.example.com/files.php?author=searchterm&title=searchterm

Then your server code will, to be angular-friendly, respond with a JSON object containing the results of the search. So, your php code will create JSON rather than the HTML table in your example. Maybe something like this: not debugged. It makes an array of $item objects that angular can read, encodes it in JSON, and sends it to the client.

header('Content-Type: application/json; charset=utf-8');
$result = [];
while ( $row = $sql->fetch( PDO::FETCH_ASSOC ) ) {
      $item = [];
      $item ['autor'] = $row['autor'];
      $item ['titulo'] = $row['titulo'];
      $item ['url'] = $row['url'];
      $result [] = (object) $item;
}
echo json_encode( $result );

In an ng-perfect world your server code would implement a REST API for handling these files. But this is a usable start.

And please do deal with your SQL injection problem. Because cybercreeps love to find this kind of API and use it to attack servers like yours.

How to make requests to a MySql database using PHP on angular 14?

1 Answers1