Galeriz is a galleries publishing web applicaiton. Authors can publish galleries of images, manage their images, choose cover image for each gallery, add titles, and follow other galleries. Everyone can see the galleries and their images, only authenticated users can manage images and galleries.
Table of content:
Implement the following features in a web application using PHP, Javascript and MySQL.
General features.
- Account creation
- Authentication
As visitor (logged out)
- See the list of galleries
- See the images inside galleries
As user (logged in)
- Possibility to follow a gallasdfery
- Display a list of followed galleries
- Create a new gallery with a custom name
- Add images in a gallery
- Delete an image in a gallery
- Display the profile of a user
The project starts the 01.02.2022 and finishes the 28.03.2022. The planning consist of 7 sprints where every sprint is 1 week long. (I'm not using Scrum, but I use the concept of sprints as parts of the project).
The projects planning and tasks management is done with Github Issues and Github Projects. It is visible here.
Initial planning:
To develop faster, I have chosen a PHP framework called Laravel that I used during my first apprenticeship and for different personal projects at home. In addition to Laravel, I choose to use Livewire, which is a fullstack components framework for Laravel. It helps me create reactive frontend interactions without writing tons of AJAX requests and Javascript code. To avoid some useless requests in the backend just to change visibility of elements, I picked AlpineJS, which is a lightweight Javascript framework. To design my app without a lot of pure CSS, I imported TailwindCSS (a CSS framework).
This combination of these 4 frameworks is called the TALL stack and is not unusual around the Laravel ecosystem. I chose Laravel 9 and not 8 because it's the latest one.
For the database I picked MySQL (as required) version 8.0.
- All galleries: all galleries published on Galeriz
- My galleries: galleries of the logged user
- Followed galleries: galleries followed by the logged suer
- Create a gallery: Create a new gallery without any picture
- Gallery details: all pictures in the gallery and the name of the author
- Gallery edition: Manage gallery details (title and description), upload new images, manage titles, delete existing images and browse current ones.
- Profile page: profile of authors on Galeriz
In addition to pages listed above, we have the Layout, Login and Register models too. (This is mostly designed by Jetstream).
Gallery title, images titles and descriptions are editable on double click (an input appears).
This section concerns how Galeriz is tested manually and with automated tests. Samuel tests during the development in his browser. Most of the features and cases are tested with automated tests written with phpunit (a php testing framework). The testing strategy is simply to develop in BDD (Behavior Driven Development), so writing feature tests to check the behavior of features with given data and expected output, and then developing these features. Samuel tests manually during the development that everything works as expected in the frontend, especially things that he didn't test with automated tests. The entire test suite is runned very frequently.
Everything is in the tests folder in the repository. The folder Feature contains all the feature tests. The folder Unit is not used because I didn't need to write unit tests.
The folder Jetstream contains all the tests written by Jetstream (I moved from Feature to Jetstream because I wanted to avoid to run them each time I run the test suite). I wrote 38 feature tests to cover most of the features, some tests are missing (for image upload for ex.), but in this case I tested by hand too.
As we are limited to the backend, I cannot test frontend interactions and Javascript code with automated tests. For most features, I tested that the page loads correctly, I tested the ideal case, and then I wrote data validation, disk file presence, ... I did not have time to write more tests on Image upload for data validations and other possible errors (upload fail, image type and size check, ...) so I tested it manually and it works.
Here is the complete list of tests. The names should helps to have an idea of how much it is tested.
Tests\Feature\AllGalleriesTest
- galleries page exists
- all galleries are visible
- all cover images are displayed
Tests\Feature\FollowedGalleriesTest
- followed galleries page exists
- followed galleries page is guarded
- it contains title and description
Tests\Feature\GalleryCreationTest
- create a gallery page exists
- gallery creation is guarded
- gallery creation creates a gallery with logged user
- gallery creation validates data
Tests\Feature\GalleryDetailsTest
- gallery details page without id redirects to panorama
- gallery details page exists
- gallery details page is displayed
- gallery details page display all images
- an image without file on disk has default not found image
- an image with empty path has default not found image
- a message is displayed when there is no image
Tests\Feature\GalleryEditionTest
- gallery edition page exists
- gallery edition page is guarded
- it redirects to gallery details if user is not the gallery owner
- edit button is not visible if user is not the gallery owner
- livewire gallery edition components are present on page
- gallery title can be edited
- gallery description can be edited
- title and description must be valid
- a message is displayed when there is no image
- image deletion deletes in db and on disk
- image is not deleted if is not in the current gallery
- image is not deleted if author is not the gallery owner
- cover image is set to null if deleted image is the cover
Tests\Feature\LayoutTest
- layout menu is correct when unlogged
- layout menu is correct when user is logged
Tests\Feature\MyGalleriesTest
- my galleries page exists
- my galleries page is guarded
- my galleries are all displayed
- has title and description
- display a message when no galleries exists
Tests\Feature\UploadImageTest
- image can be uploaded
The tests runned the 28.03.2022 at 16:30 are all passing:
If you want to see the result of tests at the last commit or older ones, you can go on the Actions tab on the repository and see the lastest run of the laravel.yml workflow running all feature tests (only feature tests not the others).
phpunit is a binary CLI pulled by composer, so you need to have pulled composer packages (composer install). As defined in the phpunit.xml, tests are runned against an in memory sqlite database. Each tests seed the database again with the default seeder.
This lines at the bottom of phpunit.xml (root of the repos), define 2 environment variables.
<env name="DB_DATABASE" value=":memory:"/>
<env name="DB_CONNECTION" value="sqlite"/>You need the SQLite php extension too.
There are different ways to run the tests in your terminal:
./vendor/bin/phpunitphp artisan test
You can pass arguments to phpunit or (same arguments after the php artisan test command).
Examples:
- to execute only 1 test:
php artisan test --filter my_galleries_page_exists - to execute tests for a given class:
php artisan test tests/Feature/AllGalleriesTest.php
I recommend you to setup a shortcut in your IDE to run the tests. I used this keyboard shorcut setting in VSCode to run php artisan test tests/Feature on ctrl+t ctrl+t
{
"key": "ctrl+t ctrl+t",
"command": "workbench.action.terminal.sendSequence",
"args": {
"text": "php artisan test tests/Feature\u000D"
}
}Here is the final planning.
I used Balsamiq Wireframes with the CPNV licence to do my models.
I created a few reusable components:
field: a reusable blade component to use as an input or textareabtnandtext-message: css class to style buttons and texts for messages.
Most of the folders are the application folders. The docs folder contains the documentation material, docs.md (this documentation), the MCD and MLD export files, the WorkDiary.md, the exported models in models. sources contains the source file of the models, the MCD, and the MLD.
The Pré-TPI went well for me, I develop most of the required features and they are mostly fully tested with automated tests.
I poorly managed the redaction of this documentation and I have to release it half done sorry...
I wrote the diary in a separated file under docs/WorkDiary.md
The installation steps are described in the README.
Present on Github.
All icons comes from heroicons.com and are licenced under MIT. I used them by copy paste.