Persisting the Data Grid informationPersisting the data grid information with PHP and PostgreSQL
Published at 21/09/2023
Published at 21/09/2023
Source codeIf you are interested in this project, you can find the source code example on our GitHub at: https://github.com/jspreadsheet/jss-database-integration.
- Docker installed on your local machine.
- Basic knowledge of Docker, PostgreSQL, and PHP.
Step 1: Set Up the Project LocallyStart by downloading the project to your local machine. This project will contain essential configurations and files to facilitate the integration.
Step 2: Start the Docker ContainersNavigate to the root folder of the downloaded project and execute the following command:
$ docker-compose upThis command will initiate the containers specified in the docker-compose.yml file. It will include containers for PHP and PostgreSQL.
Step 3: Access the PHP ContainerIn another terminal window, while positioned in the root folder of the project, run:
$ docker-compose exec php bashThis command allows you to access the shell of the PHP container.
Step 4: Install Necessary PHP DependenciesWithin the PHP container terminal, execute the following command to install the required PHP packages and dependencies:
$ composer installThese dependencies will likely include packages that enable PHP to communicate with PostgreSQL, among other requirements.
Step 5: Access the PostgreSQL ContainerNow, it's time to set up our database. To do this, in another terminal window (still positioned in the root folder), run:
$ docker-compose exec postgresql bashThis command provides access to the shell of the PostgreSQL container, allowing you to interact directly with the database server.
Step 6: Define Your TablesBefore we can persist our spreadsheet data to the database, we must define the tables that will store this data. To achieve this, we must modify the public/index.php file, writing the appropriate SQL commands and PHP code to synchronize Jspreadsheet with a specific table in PostgreSQL.
Consider structuring your table with columns such as ID, Name, Age, and Occupation, reflecting the corresponding fields within your spreadsheet. Utilize the appropriate SQL commands to create these columns and ensure they can hold the data types you'll enter in Jspreadsheet.
Step 7: Launch the ApplicationNow, open your web browser and navigate to: http://localhost:8081
Here, you'll see the Jspreadsheet in action, and any changes made will be persisted in the PostgreSQL database.