%% generate tags start %%
#software-engineering
%% generate tags end %%
#software-engineering/php #software-engineering/javascript
> [!info] This example follow [[use javascript in php]].
Incorporating JavaScript packages with PHP is commonly done for more interactive and dynamic client-side behavior while PHP handles the server-side logic. To use JavaScript packages in your PHP project, you would typically use npm to manage these packages.
Here’s a simple use case of using npm with your PHP to-do list application:
### Step 1: Initialize npm in Your Project
Open your terminal, navigate to your project's root directory, and initialize npm:
```sh
bun init
```
This command creates a `package.json` file in your project directory. Then set up bun.
Then you migrate the script to a new file `index.ts`
```ts
// index.ts
document.addEventListener("DOMContentLoaded", function() {
var form = document.getElementById("todo-form");
var todoList = document.getElementById("todo-list");
form.addEventListener("submit", function(event) {
event.preventDefault();
var xhr = new XMLHttpRequest;
const todoInput = document.getElementById("new_todo");
var todoText = todoInput.value;
xhr.open("POST", "index.php", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
xhr.onload = function() {
if (xhr.status >= 200 && xhr.status < 300) {
console.log("success!", xhr.responseText);
var response = JSON.parse(xhr.responseText);
if (response.success) {
var newTodoItem = document.createElement("div");
newTodoItem.className = "todo-item";
newTodoItem.innerHTML = `
<span>${todoText}</span>
<a href="?toggle=0">[Check]</a>
<a href="?remove=0">[Remove]</a>
`;
todoList.appendChild(newTodoItem);
todoInput.value = "";
}
} else {
console.log("The request failed!");
}
};
xhr.send("new_todo=" + encodeURIComponent(todoText));
todoInput.value = "";
});
});
```
run this command to build it
```
bun build index.ts --outdir public
```
It should generate a js file
change the script tag to the following
```html
<script src="public/index.js"></script>
```