Based on a simplified version of the Chinook Database:
You can see previous versions of the example by changing branches.
To create the database, we need to run the following command:
sqlite3 database.db < database.sqlDraw some initial mockups. Don't lose too much time with these:
Create a templates folder that will contain several template files.
Each template file will have functions that will be able to draw parts of the HTML:
- common.tpl.php drawHeader, drawFooter, drawLoginForm.
- artist.tpl.php drawArtists, drawArtist.
- album.tpl.php drawAlbum.
Create a css folder that will contain all files related to style of the web page.
Create a docs folder that will contain all files related to the documentation.
Create a database folder that will contain all database pertinent files:
- database.sql the SQL file used to create the database.
- database.db the actual SQLite database file.
- connection.php function to connect to the database.
- artist.db.php queries related to artists.
- album.db.php queries related to albums.
Transform all data access functions into classes:
- artist.class.php represents an artist.
- album.class.php represents a album from an artis.
- track.class.php represent a track in a album.
Each class has one or more functions to get data from the database.
- Start a session on every page using session_start().
- Create a class to get customer data: database/customer.class.php.
- Create the action_login.php page that:
- Receives a username and password, verifies if they exist in the database.
- If they do, saves the customer data to the session.
- Redirects the user back to the previous page.
- Show a logout form if the user is logged in.
- Create the action_login.php page that destroys the session.
- Add a new profile.php page that shows a form to edit the profile of the current user.
- Make sure it does not show if no user is logged in.
- Add a link from the logout form to the new page.
- Add a new action_edit_profile.php action page that receives the first and last name and saves them to the profile of the current user.
- Make sure nothing happens if no user is logged in.
- Add a function to save customer data.
- Create a template to edit a profile.
- Add responsive viewport to HTML head.
- Set maximum width of body.
- Add a media query for smaller screens.
- Added an api_artists.php page that returns a list of artists with a name starting with a specific string in JSON format.
- Added a function to get artists starting with a specific string from the database.
- Added a search input box to search artists.
- Added some CSS to format the search input box.
- Added a new JavaScript file and included it from the header template.
- Added an event listener to the search input that fires every time the input changes and:
- Gets the 'api_artists.php' page using Ajax (with fetch), sending the text in the input.
- Uses the returned results to update the list of artists.
First some organization:
- Added folder for pages:
- index.php: main page; list and search artists.
- artist.php: view an artist and its albums.
- album.php: view an album and its tracks.
- edit_album.php: form to edit an album title.
- profile.php: form to edit the current user's profile.
- Added folder for actions:
- action_edit_album.php: edit album title.
- action_edit_profile.php: edit current user's profile.
- action_edit_login.php: verify e-mail and password and login user.
- action_edit_logout.php: logout current user.
- Added folder for api:
- api_artists.php: returns all artists starting with a string in JSON format.
- Changed all imports to accommodate the new folders using __DIR__ when needed.
Adding messages:
- Added a Session class responsible for all things session-related, and replaced all direct calls to session_start, session_destroy and $_SESSION to calls to this class.
- Added a way to store messages in the session.
- Show all session-stored messages on all pages (HTML and CSS).
- Added some success and error messages.