Skip to content

Commit ab44ed4

Browse files
akai-zakai-z
committed
Add code files
0 parents  commit ab44ed4

File tree

98 files changed

+17481
-0
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

98 files changed

+17481
-0
lines changed

‎.gitignore

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
/composer/
2+
/db/
3+
/docker/nginx/conf.d/default.conf
4+
/yarn_modules/

‎README.md

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
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.

‎docker-compose.yml

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
version: "3.8"
2+
services:
3+
web:
4+
image: nginx:alpine
5+
volumes:
6+
- ./web:/web
7+
- ./docker/nginx/conf.d:/etc/nginx/conf.d
8+
- ./docker/nginx/docker-cmd.sh:/docker-cmd.sh
9+
environment:
10+
- DOCUMENT_ROOT=web/public
11+
- APP_TYPE=generic
12+
ports:
13+
- "8080:80"
14+
depends_on:
15+
- php
16+
command: sh -c "chmod +x /docker-cmd.sh && /docker-cmd.sh"
17+
db:
18+
image: mariadb:10.5.10
19+
volumes:
20+
- ./db/mariadb:/var/lib/mysql
21+
- ./docker/db/docker-custom.cnf:/etc/mysql/conf.d/zz-docker-custom.cnf
22+
- ./web:/web
23+
environment:
24+
- MYSQL_ROOT_PASSWORD=toor
25+
- MYSQL_DATABASE=booking
26+
- MYSQL_USER=user
27+
- MYSQL_PASSWORD=pass
28+
- MYSQL_INITDB_SKIP_TZINFO=1
29+
ports:
30+
- 3306:3306
31+
phpmyadmin:
32+
image: phpmyadmin/phpmyadmin
33+
environment:
34+
- PMA_ARBITRARY=1
35+
ports:
36+
- 8181:80
37+
volumes:
38+
- /sessions
39+
external_links:
40+
- db
41+
depends_on:
42+
- db
43+
php:
44+
image: php-fpm-alpine
45+
build:
46+
context: ./docker/php/7.4
47+
args:
48+
- PHP_FULL_INSTALL=1
49+
working_dir: /web
50+
volumes:
51+
- ./web:/web
52+
- ./composer:/root/.composer/cache
53+
- ./docker/php/7.4/ini/php.ini:/usr/local/etc/php/conf.d/z-docker-php.ini
54+
- ./docker/php/7.4/ini/xdebug.ini:/usr/local/etc/php/conf.d/z-docker-php-ext-xdebug-custom.ini
55+
depends_on:
56+
- db
57+
mailhog:
58+
image: mailhog/mailhog
59+
ports:
60+
- 1025:1025
61+
- 8025:8025
62+
node:
63+
image: node:12-alpine
64+
tty: true
65+
working_dir: /web
66+
volumes:
67+
- ./web:/web
68+
- ./yarn_modules:/usr/local/share/.cache/yarn/v6

‎docker/db/docker-custom.cnf

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
[mysqld]
2+
max-allowed-packet=128M
3+
skip-networking=0
4+
bind-address=0.0.0.0

‎docker/nginx/conf.d/default.conf.template

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
upstream fastcgi_backend {
2+
server php:9000;
3+
}
4+
5+
server {
6+
listen 80;
7+
server_name localhost;
8+
9+
set ${DOLLAR}_document_root /${DOCUMENT_ROOT};
10+
11+
error_log /var/log/nginx.log debug;
12+
13+
include conf.d/templates/${APP_TYPE}.conf;
14+
include /${DOCUMENT_ROOT}/nginx.conf*;
15+
}

‎docker/nginx/conf.d/templates/generic.conf

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
root $_document_root;
2+
index index.php index.html index.htm;
3+
client_max_body_size 100M;
4+
5+
location / {
6+
try_files $uri $uri/ /index.php$is_args$args;
7+
}
8+
9+
location ~ \.php$ {
10+
fastcgi_pass php:9000;
11+
fastcgi_split_path_info ^(.+\.php)(/.*)$;
12+
fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
13+
fastcgi_param SCRIPT_NAME $fastcgi_script_name;
14+
fastcgi_read_timeout 3600;
15+
include fastcgi_params;
16+
}
17+
18+
# Banned locations (only reached if the earlier PHP entry point regexes don't match)
19+
location ~* (\.php$|\.htaccess$|\.git) {
20+
deny all;
21+
return 404;
22+
}
23+
24+
error_log /var/log/nginx/project_error.log;
25+
access_log /var/log/nginx/project_access.log;

‎docker/nginx/docker-cmd.sh

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
#!/bin/sh
2+
3+
export DOLLAR='$'
4+
envsubst < /etc/nginx/conf.d/default.conf.template > /etc/nginx/conf.d/default.conf
5+
6+
nginx -g 'daemon off;'

‎docker/php/7.4/Dockerfile

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
FROM php:7.4-fpm-alpine
2+
3+
LABEL maintainer="Ammar K."
4+
5+
ARG DOCKER_PHP_COMPOSER=0
6+
ARG DOCKER_PHP_OPCACHE=0
7+
ARG DOCKER_PHP_SYMFONY=0
8+
ARG DOCKER_PHP_XDEBUG=0
9+
ARG PHP_FULL_INSTALL=0
10+
11+
COPY scripts/*.sh /usr/local/bin/
12+
13+
RUN set -x \
14+
&& apk update \
15+
&& apk add -u --no-cache --virtual .build-deps \
16+
freetype-dev \
17+
gettext-dev \
18+
icu-dev \
19+
libjpeg-turbo-dev \
20+
libpng-dev \
21+
libxslt-dev \
22+
libzip-dev \
23+
&& apk add -u --no-cache \
24+
freetype \
25+
gettext \
26+
icu \
27+
libjpeg-turbo \
28+
libpng \
29+
libxslt \
30+
libzip \
31+
&& docker-php-ext-configure gd \
32+
--with-freetype=/usr/include/ \
33+
--with-jpeg=/usr/include/ \
34+
&& NPROC=$(getconf _NPROCESSORS_ONLN) \
35+
&& docker-php-ext-install -j${NPROC} \
36+
bcmath \
37+
gd \
38+
gettext \
39+
intl \
40+
mysqli \
41+
pdo_mysql \
42+
soap \
43+
sockets \
44+
xsl \
45+
zip \
46+
&& chmod +x /usr/local/bin/*.sh \
47+
&& docker-php-extensions-installer.sh \
48+
&& apk del .build-deps

‎docker/php/7.4/ini/php.ini

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
always_populate_raw_post_data = -1
2+
max_execution_time = 18000
3+
max_input_time = 6000
4+
max_input_vars = 1000000
5+
memory_limit = 2G
6+
post_max_size = 128M
7+
upload_max_filesize = 32M
8+
mysql.connect_timeout = 30000
9+
default_socket_timeout = 30000
10+
log_errors = 1
11+
short_open_tag = 0

‎docker/php/7.4/ini/xdebug.ini

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
;zend_extension=/usr/lib/php7/modules/xdebug.so
2+
3+
;xdebug.profiler_enable_trigger = 1
4+
xdebug.remote_enable = 1
5+
;xdebug.remote_handler="dbgp"
6+
xdebug.remote_host = 172.17.0.1
7+
xdebug.remote_port = 10000
8+
xdebug.var_display_max_children = -1
9+
xdebug.var_display_max_data = -1
10+
xdebug.var_display_max_depth = -1
11+
xdebug.max_nesting_level = 3000
12+
xdebug.idekey="docker"
13+
;xdebug.remote_connect_back=1 # Not safe for production servers
14+
;xdebug.remote_mode=req
15+
;xdebug.remote_autostart=true
16+
;xdebug.remote_log="/var/log/xdebug/xdebug.log"
17+
;xdebug.remote_autostart=0

‎docker/php/7.4/scripts/docker-php-ext-composer.sh

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
#!/bin/sh
2+
3+
set -eo pipefail
4+
5+
readonly SIGNATURE="$(wget -q -O - https://composer.github.io/installer.sig)"
6+
readonly INSTALLER_URL="https://getcomposer.org/installer"
7+
readonly SETUP_FILE="composer-setup.php"
8+
9+
curl -fsL --retry 3 -o "$SETUP_FILE" "$INSTALLER_URL"
10+
11+
php -r " \
12+
\$hash = hash_file('SHA384', '${SETUP_FILE}'); \
13+
if (!hash_equals('${SIGNATURE}', \$hash)) { \
14+
unlink('${SETUP_FILE}'); \
15+
echo 'Integrity check failed, installer is either corrupt or worse.' . PHP_EOL; \
16+
exit(1); \
17+
} \
18+
"
19+
20+
php "$SETUP_FILE" --no-ansi --install-dir=/usr/local/bin --filename=composer
21+
rm "$SETUP_FILE"

‎docker/php/7.4/scripts/docker-php-ext-opcache.sh

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
#!/bin/sh
2+
3+
set -eo pipefail
4+
5+
NPROC=$(getconf _NPROCESSORS_ONLN)
6+
docker-php-ext-install -j${NPROC} opcache

‎docker/php/7.4/scripts/docker-php-ext-symfony.sh

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
#!/bin/sh
2+
3+
set -eo pipefail
4+
5+
apk add -u --no-cache bash git openssh patch
6+
7+
readonly INSTALLER_URL="https://get.symfony.com/cli/installer"
8+
readonly SETUP_FILE="symfony-installer"
9+
10+
curl -fsL --retry 3 -o "$SETUP_FILE" "$INSTALLER_URL"
11+
12+
bash ./"$SETUP_FILE"
13+
mv /root/.symfony/bin/symfony /usr/local/bin/symfony
14+
rm "$SETUP_FILE"

‎docker/php/7.4/scripts/docker-php-ext-xdebug.sh

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
#!/bin/sh
2+
3+
set -eo pipefail
4+
5+
readonly VERSION="2.9.0"
6+
7+
apk add -u --no-cache --virtual .build-deps \
8+
autoconf \
9+
g++ \
10+
gcc \
11+
make
12+
13+
touch /var/log/xdebug.log
14+
15+
pecl install xdebug-${VERSION}
16+
docker-php-ext-enable xdebug

‎docker/php/7.4/scripts/docker-php-extensions-installer.sh

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
#!/bin/sh
2+
3+
set -eo pipefail
4+
5+
extensions="$(printenv | grep "DOCKER_PHP")"
6+
7+
for ext in $extensions
8+
do
9+
ext_status="$(echo "$ext" | cut -d '=' -f 2)"
10+
11+
if [ "$ext_status" -eq 1 ] || [ "$PHP_FULL_INSTALL" -eq 1 ]; then
12+
ext_name="$( \
13+
echo "$ext" | \
14+
cut -d '=' -f 1 | \
15+
cut -d '_' -f 3 | \
16+
awk '{print tolower($0)}' \
17+
)"
18+
19+
if [ -e "/usr/local/bin/docker-php-ext-${ext_name}.sh" ]; then
20+
"docker-php-ext-${ext_name}.sh"
21+
fi
22+
fi
23+
done

0 commit comments

Comments
 (0)