The site was created for a non-profit art promoting association located in Brussels. It was made by 4 WebDev students of BeCode (campus Bruxelles). The challenge was to create a website for a real client. This particular project created in group started from scratch.
| Christian Jadot | Marc Houtreille | Robbert Klockaerts | Marcelo Romero-Cors |
The website was built in Laravel using Tailwind CSS as an easy way to style HTML elements.
Additionaly we used a little of JavaScript to trigger some button events.
- clone the repo to your computer
- $ cd ASBL-Feriadart
- $ composer install
- $ npm install
- $ cp .env.example .env
- $ php artisan key:generate
- $ php artisan serve
We styled the website using as a reference a yellow/purple Logo that they were already using for their Facebook page.
We were able to create the site favicon thanks to Favicon.io
The main menu is composed of 8 sections and 2 clickable buttons.
The "Logo" button at the left takes you "Home" and the language drop-down button at the right allows you to change the interface language between English, French and Dutch (EN/FR/NL). This was possible thanks to this tutorial and the use of this Laravel translations. We also had to translate everything that was not included in the default translations.
The menu is also responsive:
The "Home" section is separated in 4 main components:
- The "Featured Artist" component shows you a picture (work of an artist) plus information about a random Artist who is subscribed (and accepted) to any Event. Everytime you reload the page another Artist will appear. When you click the "View more" button, you will be redirected to the Artist's page where you can see more of its work and get more detailed info.
- The "Featured Event" component shows you the next upcoming Event "Open" for inscriptions. If you click the "Learn more" button you can get more info about that Event and subscribe yourself.
- The "Next Events" component shows you up to 3 upcoming Events showing you the date, name, poster, place and current inscription status (Open/Closed). It also gives you a link to the Events section.
- The "Latest Articles" component shows you the last 2 Articles published and a link to the Articles section.
On the "About" page you can find info about the organization and the Members currently participating in it. They each have a card with personal info and links to their personal websites.
Here you will find links to all present and past Events ordered by theirs "date_start" value from newest to oldest. If you click on any Event you can get to see 3 more sub-sections: Event page, View Artists page and Artist page.
The event page contains all the info of the Event and 2 buttons: "Inscription" and "View Artists". The "Inscription" button is only available if the Event has an inscription "Status" of "Open". If the button is available and you click on it you will see a form demanding all the info they need for your inscription. When the Artist sends the form it has to wait for the Admin to accept its inscription.
If you click on the "View Artists" button you can have a look at all the artists who are already accepted to that specific Event.
If you click on an "Artist" card you will see a personal page with more info and a small carousel with up to 5 pictures. We used Glide.js to create this carousel.
On the "Gallery" page you will find a list of all present and future Events ordered by theirs "date_start" value from newest to oldest. Only Events with at least 1 Image or Video will be shown.
If you click over an Event you can have a look at all the Files that have been uploaded for that Event. The gallery can show JPG/PNG Images or Videos from Youtube/Vimeo. We used Glide.js to create the Event Gallery carousel.
The "Guestbook" page shows all the comments left by people visiting the site. You can leave your personal comment on the wall. Once accepted by the Admin it will appear as well.
This page gives you the possibility to interact with the organization. It's a simple contact form that you will need to fill in to get in touch with Feria d'Art.
The "Footer" has links to all the sections of the frontpage as well as social media links. At the bottom you will find some legal and contact info.
To access the administrator Backoffice you have to click over the small "head with a hat" icon in the footer of the page. This will make visible a "Login" button. (The login/registration system has been implemented with Laravel Breeze).
When you click the "Login" button you'll be redirected to the login form where you should put your admin credentials. For the moment it is not possible to register a new user.
Then you will enter the backoffice panel which is composed of 8 sections and 2 clickable buttons. The "Logo" button at the left takes you back to the Frontpage and the "Username" drop-down button at the right allows you to log out from the Backoffice.
For the moment, the "Backoffice" section only shows you a welcome message but we could add some other functionalities in the future such as the option to change the current password.
In the "Articles" section, the admin can manage the Article elements. Articles are shown according to the "created_at" value from newest to oldest.
- You can create a new Article that will be added to the "Articles" section in the Frontpage. All the fields are required except for the "URL". The picture will be also copied to the public "images/articles" folder and it has a size limit of 5MB. When you create an Article the "article_date" value is assigned automatically according to the date/time it was created but you can change it afterwards. This date will affect the "Latest Articles" section shown in the "Home" frontpage.
- You can edit existing Articles content.
- You can delete existing Articles. A confirm message will pop-up when you hit the "Delete" button. This will also automatically delete the image associated to the Article in the public "images/articles" folder.
In the "Events" section, the admin can manage the Event elements. Events are shown according to the "date_start" value from newest to oldest.
- You can create a new Event that will be added to the "Events" section in the Frontpage. All the fields are required. The pictures will be also copied to the public "/images/events" folder and they have a size limit of 5MB each. When you create an Event the "start_date" value will affect the "Next Events" section shown in the "Home" frontpage. Events are created with a default inscription "Status" of "CLOSED" so if you want people to be able to inscribe to this Event you need to manually change the "Status" to "OPEN" afterwards. This value will affect the "Featured Event" shown in the "Home" frontpage section. If you have multiple Events "OPEN" for inscription at the same time, the "Featured Event" shown will be the one with the lowest "start_date". There are 2 fields named "Inscription image" and "Inscription text" which are shown in this "Featured Event" section.
- You can edit existing Events content. Here you can change the inscription "Status" of the Event between "OPEN" and "CLOSED". You can also quickly open an Event for inscriptions by clicking on the "Open" button next to it. If the Event is already open the button will dissappear.
- You can delete existing Events. A confirm message will pop-up when you hit the "Delete" button. This will also automatically delete the images associated to the Event in the public "images/events" folder.
In the "Inscriptions" section, the admin can manage the Artists Inscription elements. Inscriptions are shown according to the "created_at" value from newest to oldest.
- You can create a new Artist Inscription associated to a certain Event. There are many optional fields, but the Artist always has to upload at least 1 picture. The pictures will be also copied to the public "/images/inscriptions" folder and they have a size limit of 5MB each. Inscriptions are created with a default inscription "Status" of "Rejected" so you need to manually change the "Status" to "Accepted" afterwards. This value will affect the "View Artists" section shown in each frontpage Event. Also, only "Accepted" Artists will be shown in the "Featured Artist" section in the "Home" frontpage.
- You can edit existing Inscriptions content. Here you can change the "Status" of the Inscription between "Accepted" and "Rejected". You can also quickly accept an Inscription by clicking on the "Accept" button next to it. If the Inscription is already accepted the button will dissappear.
- You can delete existing Inscriptions. A confirm message will pop-up when you hit the "Delete" button. This will also automatically delete the images associated to the Inscription in the public "images/inscriptions" folder.
In the "Members" section, the admin can manage the Member elements. Members are shown according to the "created_at" value from newest to oldest.
- You can create a new Member of the team that will be added to the "About" section in the Frontpage. All fields are required except for the url links. The picture will be also copied to the public "/images/members" folder and it has a size limit of 5MB.
-
You can edit existing Members content.
-
You can delete existing Members. A confirm message will pop-up when you hit the "Delete" button. This will also automatically delete the image associated to the Member in the public "images/members" folder.
In the "Gallery" section, the admin can manage the File elements. Files are shown according to the "created_at" value from newest to oldest. We learned how to upload files into Laravel thanks to this video tutorial.
- You can create a new File associated to a certain Event. There is a select input to choose the file type between "Image" and "Video". Videos can be put into the system by simply pasting a valid URL. Youtube videos need to be in this format: https://www.youtube.com/embed/YoutubeID where YoutubeID is the 9 character ID of the video (eg: https://www.youtube.com/embed/9YffrCViTVk). Vimeo videos need to be in this format: https://player.vimeo.com/video/VimeoID where VimeoID is the 9 character ID of the video (eg: https://player.vimeo.com/video/577974858). The database will only store the URL. If the File is an Image, its path will be stored in the database and it will be copied to the public "/images/gallery" folder. Images have a size limit of 5MB. Both type of Files will be shown as a carousel in the "Gallery" section of its associated Event.
-
You can edit existing Files content if you want for example change the URL or associate the File to another Event.
-
You can delete existing Files. A confirm message will pop-up when you hit the "Delete" button. This will also automatically delete the file from the public "images/gallery" folder.
In the "Guestbook" section, the admin can manage the Guest Comment elements. Guest Comments are shown according to the "created_at" value from newest to oldest.
- You can create a new Guest Comment. Guest Comments are created with a default "Status" of "Rejected" so you need to manually change the "Status" to "Accepted" afterwards. Only "Accepted" Guest Comments will be shown in the "Guestbook" section in the Frontpage.
-
You can edit existing Guest Comments content. Here you can change the "Status" of the Guest Comment between "Accepted" and "Rejected". You can also quickly accept a Guest Comment by clicking on the "Accept" button next to it. If the Guest Comment is already accepted the button will dissappear.
-
You can delete existing Guest Comments. A confirm message will pop-up when you hit the "Delete" button.
In the "Contact" section, the admin can manage the Contact Message elements. Contact Messages are shown according to the "created_at" value from newest to oldest.
- You can create a new Contact Message. It has no real use because they are not shown anywhere else.
-
You can edit existing Contact Messages content.
-
You can delete existing Contact Messages. A confirm message will pop-up when you hit the "Delete" button.
We used CKEDITOR 4 to add a document styling system to the textarea inputs in the Backoffice forms. In this way, users can style their texts before sending the forms to the database. This is working in the Backoffice Articles, Events, Inscriptions, Members section and also in the Frontpage Event inscription form. We were able to install it thanks to this video tutorial and this CDN.
We were able to deploy our Laravel project into our OVH web hosting thanks to this video tutorial.
The database was imported directly to OVH from our local database after we migrated and seeded our tables.
We also had to change the public_path adding this lines to the index.php:
