Educational project 3 from Wild Code School in partnership with Synergie Family
Synergie Family is a company based on Marseille. They are specialized in the development of socio-educational actions to the advantage of childhood, youth and family. With this in mind, they often need to contact activity leaders for organizing events. The use of a database naturally comes and a web application is needed for the company to manage it. Such a project was a good opportunity for students from Wild Code School to practise their new skills in web development.
This is a eight-week group project based on SCRUM agile methodology.
Due to the lockdown, this project has been led in full-remote.
- Front-end: Thymeleaf
- Back-end: Java (Spring) + Hibernate
- Design: Materialize CSS framework
- Log-in: users can log-in to access the web app
- Password edition: a user can edit his password
- user management: as an administrator, a user can create, edit, and delete other user accounts.
- activity-leader creation: a user can create a new activity leader in the database. An automatic e-mail is sent to him asking his to fill its informations in the database.
- activity leader form completion: an activity leader can access its form (without being loged) to fill its informations in the database
- activity leader collective mailing: a user can select a group of activity leaders in the database and send a single mail to all of them
- activity leader research: a user can research an activity leader according to specific criteria
- log-out: a user can disconnect from the website
The web site is protected by Spring Security. To enter the app, a user needs to have an account.
At the very first use of the website, the first user needs to get the /init route in the navigator. The application the create a temporary username and password
with administator rights. With this temporary account, he has to create another administrator account for himself, and delete the temporary account generated by
the app initialization. Once this is done, there is one unique administrator which can create others user accounts.
The web site is protected by Spring Security. To enter the app, a user needs to have an account. If he doesn't own one, an administrator will have to create a one for him with his email address.
There are two different defined roles in Spring Security configuration: ADMIN and COORDINATEUR. The administrators can access all the pages of the website,
including the creation of user account. Coordinators can't access the user management page.
Once that a user in logged-in, the "Profil" page is returned. Is this page, a user can edit its password if he wants.
In the form, it is asked to confirm the new password. If the second password mismatches the first one, the form displays a message asking the user to type its new password again and the field colour becomes red.
If the two passwords match, the user can save it by clicking the 'ENREGISTRER' button.
It's well worth noting that passwords are encrypted with an encrypting Java method. Therefore, passwords cannot be read in the database.
Only ADMIN users can access this page!
This page shows all the current users able to access the website - their email/username and their current role.
Coordinators can't access the Utilisateurs page.
Administrators can create other users by clicking the AJOUTER UN UTILISATEUR button.
A new form is displayed, asking the email address of the new user a what role would he get: ADMIN or COORDINATEUR.
After the validation, an automatic email is generated and sent to the new user. This mails contained an automatical temporary password randomly generated, composed by a random combination of random characters (letters, figures and symbols).
The user then has to connect to this account whit this temporary password and change it in his profile page.
Administrator can change the role of a user profile. He can click on the pen icon. A new form is returned:
Once that the new role is selected, he can save it by clicking on ENREGISTRER.
An administrator can also delete an account. For this, he just has to click the trash bin icon. A popup message appears asking the confirmation:
A user cannot delete its own account, the trash bin icon doesn't appear for its own line.
In fact, this deletion option doesn't totally erase the account from the database, but it just disable it. If for a reason the account needs to be recovered, this would still be possible in the database.
This page displays a list of all activity leaders (the active ones (those who haven't been deleted)) from the database.
The Actif field shows if the activity leader is under contract or not on today's date.
Clicking on AJOUTER UN ANIMATEUR return the creation form for adding a new activity leader.
The user needs to fill all the mandatory fields: the name, the surname, the email address, and click on ENREGISTRER to validate it.
From here, a automatic mail is generated and sent to the activity leaders, giving to him a link to access this form. This link contains a token wich is randomly generated, for security reasons. Only the activity leader can fill its own form from the given link to its email.
User can edit the informations concerning an activity leader by clicking on the pen icon.
Let's explore the fields present in such a form:
- first name
- surname
- birth date
- email address
- phone number
- address line 1
- address line 2
- postcode
- city
- experience in years
- vehicle (boolean: yes or no)
- diplomas
- comment
- unavailabilies
- skills
- contract starting date
- contract end date
- audiences (age brackets)
- values
All the date datas are selected with a datepicker JavaScript function:
Diploma and Value are both entities having a many-to-many connexion with the activityLeader entity. A finite list of diplomas and values
are present in the database, and the activity leader can select one or more elements from the list.
Skill also is coded as an entity in Hibernate, having a many-to-many connexion with the activityLeader one. However, here in the form, the user
can type several skills, seperated by a comma ,, and those skills will automatically be added in the skillList, which is different from the values
and diplomas.
Unavailabilities are time periods when the activity leader isn't avaibable and cannot be called for a contract. Several time periods can be saved. Each time a new time period must be added to the list of unavailabilities, a starting date and an end date must be selected, it is required to save the full form by clicking on ENREGISTRER. The time period then appears in the list, and another one can be added with the same procedure.
The list of unavailabilities is diplayed, and it can be deleted with the SUPPRIMER CETTE INDISPONIBILITÉ option.
In the end of the form, a ENVOYER LA FICHE PAR MAIL button allows the user to send the form to the activity leader email address, exactly like at the form creation.
A research bar allows the user to look for a specific activity leader. This is a simple searching function searching the typed text in the name and surname fields.
The list of activity leadesr has checkboxes. A collective mailing function allows to write a single message and to send it to all the checked activity leaders. After a selection, a click on the ENVOYER UN MESSAGE button returns a popup with a message form. A subject and a message can be written. The ENVOYER button will send this message to the selected group. The ANNULER button cancels the message.
The trash bin icon deletes the corresponding activity leader. Such as a user deletion, pop-up messages appear to confirm the actual deletion, and this is not a reel deletion form the database but only a disabling. Disabled activity leaders won't appear anymore from the research queries, but they still exist in the database.
The Recherches tab return a complete form for making researches of activity leaders on specific criteria.
Results are presented with cards. Each card display a summary of main informations when they exist. Here is an example of a research based on the name "Jean":
Clicking on the VOIR LA FICHE button return the full form page, but in read-only mode. Informations cannot be edited from here, every field in the form is grey.
Each card from the research result has a check box in the upright corner. The card can be selected in order to send a collective email to the selected group. Once that people are selected, the ENVOYER UN EMAIL button popped up a message box.
ENVOYER sends the message to the selected group, ANNULER aborts and closes the window.
To disconnect form the website, just click on the Déconnexion tab.