Backend (Level 1)
Drupal Onboarding project tasks used for learning
Check Drupal coding standards and set up your IDE
Before you start writing your own code, read again about Drupal Coding Standards https://www.drupal.org/docs/develop/standards/coding-standards You will need to have this standards in mind in the future, so really go through everything. You will probably want to come back to this link in later stages, so you can bookmark it as well.
- Set up PhpStorm for working with Drupal. This will make your live much easier. -- https://confluence.jetbrains.com/display/PhpStorm/Drupal+Development+using+PhpStorm
- Get to know the theme folder structure (you’ll see that some example files are already placed inside). Put your custom new files in the right place.
- Read about Drupal template naming conventions
- Read about JavaScript coding standard on Drupal
Create a custom module
For beginning, just create a custom module ‘ad_general’ in modules/custom and enable it.
Status message on company save
If a company node is created with the website field empty we want to display a status message after the company is saved saying: ‘Please consider adding a website for your company. It’s not mandatory, but it’s a good way of showing people what you do’.
Hints: Look into the Drupal hook system and check how can you do some action when a node is being created for the first time.
Links:
- https://drupalize.me/tutorial/what-are-hooks?p=2766
- https://drupalize.me/tutorial/implement-any-hook?p=2766
- https://www.hashbangcode.com/article/drupal-8-messenger-service
Xdebug
If you managed to complete the first task without xDebug, now is the time to set it up. Look for resources on the internet to learn how to connect your PHP Storm with a browser to debug. It's pretty easy using ddev.
After everything will be working for you, create a breakpoint in the hook you created above and make sure it is working. You can play around with a debugger for a while. Do the 'Step over' and 'Step into' commands - you'll be using this a lot in the future.
Check out Examples module
A good way for learning Drupal is having Examples module as a reference. Add it to your page and go through different submodules that it's offering.
You'll see that there is a lot of common solutions. You can help yourself with this module in all the tasks on this onboarding and also later when you'll be doing the real work.
Custom block on event pages
Create a custom block which will be displayed in the sidebar on event pages. The block should display how many days are left until the event starts, example: ‘Days left to event start: 12’. If the event is going to happen on the current day display 'This event is happening today'. If the event has ended, display ‘The event has passed.’. Create a service and write a method which gets a date as a parameter and returns a string, which is then displayed in the block. The block should not be cached. Also create a custom twig template for this block and pass values to it. This way you give other developers option to override template and change markup if needed.
Check here, how to output content with a template: https://drupalize.me/tutorial/output-content-template-file?p=2766
After you're done do a small upgrade to the current service. Add an exact from/to hour of the event on the field and check if the event is currently in progress. In this case, display ‘The event is currently in progress.’.
Hints:
- Find how to detect the currently displayed node.
- Load the date field values.
- Check out the Drupal 8 block manager on how to create a block.
Email validation on Company node save.
When a company node is being saved, we want to prevent users from setting a no-reply email. Check if the email field starts with ‘no-reply’ and if it does, set an error in the form validation. There should be a message saying: ‘Please enter a valid email.’.
Hints:
- Learn how to properly set a validation error for a field using constraint and validation plugin.
- This may help you: https://drupalize.me/tutorial/entity-validation-api?p=2792
- https://www.drupal.org/docs/8/api/entity-validation-api/providing-a-custom-validation-constraint
"Send to friend" block
On every event page, we want to display a "Send to friend" block. This should be a block with a form inside.
The form should have a title, a name field (mandatory), an email field (mandatory and has to be validated) and a ‘Send’ button.
If the validation fails, display an error message saying ‘Enter a valid email address’.
If the validation passes send an email to the provided email address:
Subject: [name] invited you to [event_title]
Body: Hi! Check out this event: [event_title]. It's going to take place at [location_title] on [event_date]. Read more: [link_to_event_node]
Display a success message if the email has been sent.
Hints:
- Create a custom block with the form as the markup
- Check out the Drupal Form API
- You’ll have to get the referenced location title for the email markup
- Find how to send emails using Drupal
- https://valuebound.com/resources/blog/step-by-step-method-to-create-a-custom-form-in-drupal-8
Send form with ajax
When the send form will be working, upgrade it by doing the form submit with AJAX, instead of the page reload.
Hints:
- Check out AJAX form submission in Drupal.
Content lists in custom controller
Duplicate pages /companies, /events and /locations but instead of using Views, create your own controllers with form for filters.
Create Controller: https://www.drupal.org/docs/drupal-apis/routing-system/introductory-drupal-routes-and-controllers-example
Get data - EntityQuery: https://drupalize.me/tutorial/find-data-entityquery?p=2792
Create Form and attach to Controller: https://drupalize.me/tutorial/define-new-form-controller-and-route?p=2766 (!! be aware, that in step 6 it's creating a route that will only have this form; you have to add a form as a render element along with results) https://drupalize.me/tutorial/form-element-reference?p=2766 https://www.drupal.org/forum/support/module-development-and-code-questions/2020-10-23/displaying-form-with-a-controller-in
Create event gallery with Media
We want to add a gallery on the event content type. The gallery can be uploaded only after the event is finished. Before that, this option should not be available for editors.
Use Media module for this field, so we also have a library of images.
On frontend list images on event node and implement zoom on click and listing through gallery when viewing larger image.
Custom field formatter
Add a field formatter for the entity reference named "Title and icon". This displays a title and an icon of the equipment, so use it on Location content type afterwards.
For displaying a field create a custom template, so frontend developers have an option to override it if needed.
https://www.drupal.org/docs/8/creating-custom-modules/create-a-custom-field-formatter https://www.sitepoint.com/creating-custom-field-formatters-drupal-8/
Additionally, get the image default value. Set a default value on icon field and if the image is not uploaded for certain term, display the default icon image.
Images can be quite big, so make sure that the images are displayed using the image style. Create an option so administrator can select which image style is used.
Custom field type
Create a custom field type "Youtube link", that has one input field for adding a Youtube link and 2 display options; embed (iframe) and link (open in new tab).
For the link formatter add a setting to open a link in new tab or in the same. By default set it to open it in new tab.
Configuration form (Site status message module)
In your own module, duplicate functionality of https://www.drupal.org/project/site_status_message. Of course, don't download and look at the the original module, try to figure out the functionalities by yourself.
You have to build your own configuration form, put it somewhere under (admin/config/...) and print the message on the page if it's enabled.
https://www.thirdandgrove.com/creating-simple-configuration-form-drupal-8 https://www.drupal.org/docs/8/api/configuration-api/working-with-configuration-forms https://drupalize.me/tutorial/use-simple-configuration-form?p=3277
When you're done with basic functionality, add setting for message type (e.g. Alert, Warning, Info ..) and switch background color of the message. To change background colors, add a css file to the module.
Move Send to friend form to modal
We don't want to have a complete "Send to friend" form in sidebar anymore. Instead, we only want a button/link with which a modal window opens. The form for inserting values should then be shown and submitted in the modal.
https://www.mediacurrent.com/blog/loading-and-rendering-modal-forms-drupal-8/
Event adjustment on save
The client decided that they want all the titles for Events in title case.
http://www.grammar-monster.com/lessons/capital_letters_title_case.htm
Every time an event is saved, convert it in title case. For changing case, write a service that you will call.
Update old events titles
Related to 'Event adjustment on save' task, so make sure you finish that first.
Since all previous Event titles are still saved as they were, we want to update those as well. Write a post update hook to update each title in correct case.