|
| 1 | +The purpose of this project is to serve as an example of using Symfony forms with Vue.js forms. |
| 2 | + |
| 3 | +## Requirements |
| 4 | +- PHP 7.4 |
| 5 | +- MariaDB 10.2+ (MySQL should work too. |
| 6 | +PostgreSQL should work as well since that the project uses an ORM but it's not tested.) |
| 7 | +- NGINX |
| 8 | +- Node.js 12+ |
| 9 | +- Docker and Docker Compose (Optional) |
| 10 | + |
| 11 | +## Setup Instructions (using Docker) |
| 12 | +- Clone the repository using `Git`: |
| 13 | +``` |
| 14 | +git clone https://github.com/akai-z/symfony-vue-form.git |
| 15 | +``` |
| 16 | +- Make sure that you are currently inside the cloned project directory. |
| 17 | +``` |
| 18 | +cd <path-to-project-directory>/symfony-vue-form |
| 19 | +``` |
| 20 | +- Run the project Docker images with the following command: |
| 21 | +``` |
| 22 | +docker-compose up -d --build |
| 23 | +``` |
| 24 | +(MySQL might take some time to boot up after running its Docker image. So it might initially be not responsive.) |
| 25 | +- Obtain Docker bridge network default gateway IP on your system (e.g. `172.17.0.1`). |
| 26 | +You could use the following command to find the details of the bridge network: |
| 27 | +``` |
| 28 | +docker network inspect bridge |
| 29 | +``` |
| 30 | +- Configure Symfony DB connection in Symfony `.env` file. |
| 31 | +For example: |
| 32 | +``` |
| 33 | +DATABASE_URL="mysql://user:pass@172.17.0.1:3306/booking?serverVersion=mariadb-10.5.10" |
| 34 | +``` |
| 35 | +(Where the IP `172.17.0.1` is the Docker bridge network gateway IP.) |
| 36 | +- Configure Mailhog connection in Symfony `.env` file. |
| 37 | +For example: |
| 38 | +``` |
| 39 | +MAILER_DSN=smtp://172.17.0.1:1025 |
| 40 | +``` |
| 41 | +(Where the IP `172.17.0.1` is the Docker bridge network gateway IP.) |
| 42 | +- Access Docker PHP image with the following command: |
| 43 | +``` |
| 44 | +docker-compose exec php sh |
| 45 | +``` |
| 46 | +- Install Composer packages: |
| 47 | +``` |
| 48 | +composer install |
| 49 | +``` |
| 50 | +- Create the DB tables and add their data using the following commands: |
| 51 | +``` |
| 52 | +php bin/console doctrine:migrations:migrate |
| 53 | +php bin/console doctrine:fixtures:load |
| 54 | +``` |
| 55 | +- Exit Docker PHP image with the `exit` command. |
| 56 | +- Access Docker Node.js image with the following command: |
| 57 | +``` |
| 58 | +docker-compose exec node sh |
| 59 | +``` |
| 60 | +- Install Yarn packages: |
| 61 | +``` |
| 62 | +yarn install |
| 63 | +``` |
| 64 | +- Compile assets: |
| 65 | +``` |
| 66 | +yarn encore dev |
| 67 | +``` |
| 68 | +- Exit Docker Node.js image with the `exit` command. |
| 69 | +- The application is now ready. |
| 70 | + |
| 71 | +## Usage Instructions |
| 72 | +- Open the following URL to access the Vue.js form page: |
| 73 | +``` |
| 74 | +http://localhost:8080/booking |
| 75 | +``` |
| 76 | +- You could check the emails sent by the form on Mailhog: |
| 77 | +``` |
| 78 | +http://localhost:8025/ |
| 79 | +``` |
| 80 | +- You could view the submitted form requests details in phpMyAdmin: |
| 81 | +``` |
| 82 | +http://localhost:8181/ |
| 83 | +``` |
| 84 | +(Username: `user` | Password: `pass`) |
| 85 | +Where the DB name is `booking`, and the name of the table that stores form requests is also `booking`. |
| 86 | + |
| 87 | +## Notes |
| 88 | +- Since that a combination of Symfony forms and Vue.js forms is used in the project, |
| 89 | +I opted to build the form from scratch using Vue.js (HTML/JS) on the frontend side |
| 90 | +with Symfony forms being used on the backend side. |
| 91 | +That way, I could leverage the full potential of Vue.js (features) on the frontend, |
| 92 | +(Instead of fetching the form HTML from Symfony forms using AJAX and use it on Vue.js) |
| 93 | +while at the same time being able to use Symfony forms on the backend to validate and submit forms data. |
| 94 | + |
| 95 | +## Todo |
| 96 | +- `vue-datetime` component is used for the form date picking fields . |
| 97 | +There were issues with loading the component's CSS file in Symfony, possibly due to the webpack. |
| 98 | +As a temporary workaround I added the CSS file to the `public` directory and loaded it using a `twig` template. |
| 99 | + |
| 100 | +- Implement some advanced validation features for `Date of Arrival` form field, such as |
| 101 | +allowing dates that are in the future only and if a user already submitted a request then it can only submit another |
| 102 | +one after 3 days of the current request `Date of Arrival`. |
| 103 | + |
| 104 | +- `Vuelidate` library has an issue related to validating dates that should always be in the future, |
| 105 | +where there is a trick to submit a form by waiting for the selected time to become in the past. |
| 106 | + |
| 107 | +- Add a loading indicator to the form AJAX submit action. |
0 commit comments