The goal of this exercise is to collaborate on a simple project on GitHub as a team of 2 or 3.
- Legend
- 💎 The application
- 💎 Tips
- ❗ Instructions
- ❓ End result
- ❗ Evaluation
- ❗ Delivery
- 🏛️ Architecture
- 💥 Troubleshooting
Parts of this guide are annotated with the following icons:
- ❗ A task you MUST perform to complete the exercise.
- ❓ An optional step that you may perform to make sure that everything is working correctly.
⚠️ Critically important information about the exercise.- 💎 Tips on the exercise, reminders about previous exercises, or explanations about how this exercise differs from the previous one.
- 👾 More advanced tips on how to save some time. Challenges.
- 📚 Additional information about the exercise or the commands and tools used.
- 🏁 The end of the exercise.
- 🏛️ The architecture of what you deployed during the exercise.
- 💥 Troubleshooting tips: how to fix common problems you might encounter.
This repository contains a partially implemented todo list written in PHP, HTML
and CSS. The application connects to a MySQL database. All the code is in the
index.php
file.
The incomplete lines of code are marked with the following comment: // IMPLEMENT ME
.
-
💎 You may run this application on your local machine with MAMP or WAMP, or with a local installation of PHP and MySQL if you already have them.
-
💎 This repository contains a
todolist.sql
file you can use to create the database for this project. If you use MAMP, you can run its contents from MAMP's phpMyAdmin interface.You should change the password in the SQL before running it.
-
💎 Need help choosing a good password? Don't use something that is hard to remember. You're better off using a passphrase (here's a French version).
-
💎 You can update the constants at the top of
index.php
to match your local installation:-
The value of
BASE_URL
must match the URL at which the application is available.For example, if you use MAMP and put this repository in MAMP's
htdocs
directory, the application will be accessible at http://localhost:8888/comem-archidep-php-todo-exercise/ (with the default ports). In this situation, the value ofBASE_URL
should be/comem-archidep-php-todo-exercise/
. -
You can change the value of
DB_PORT
to match your local MySQL port (for example, with MAMP, the default is 8889).
-
The first two team members will be referred to as Alice and Bob.
- Alice
-
Open the MediaComem/comem-archidep-php-todo-exercise repository in your browser.
-
Click the
Fork
button in the top-right corner of the page (you must be logged in to GitHub).This will create a copy of the repository on GitHub that belongs to you (under your GitHub username instead of
MediaComem
). -
In the settings of the forked repository, add Bob and any other team members to the list of Collaborators (this will give them push access).
-
Clone the forked repository on your local machine.
-
- Bob (and other team members)
- Clone Alice's repository on your local machine.
- All
- Implement one or more of the missing features.
- Commit the changes and push them to Alice's repository on GitHub.
The fully implemented application should look and behave like this: https://todolist.archidep.ch
- The work must be delivered in the forked repository on GitHub.
- The todo list must work:
- Tasks can be added, toggled and deleted.
- Tasks must be listed from newest to oldest (i.e. by descending creation date).
- Each team member must contribute at least one useful commit:
- The commits must be made on each team member's machine using their local Git installation, not through GitHub's web interface.
- The author name and email address of each team member's commits must be correctly configured.
- Commit messages must be relevant (i.e. describe the change that was made).
Send one email per team to both teachers (Simon O. & Simon P.) with:
- The link to the team's solution repository on GitHub.
- The list of team members (and their GitHub username if it is not obvious).
This is a simplified architecture of the main running processes and communication flow at the end of the exercise (assuming you've used MAMP with Apache running on port 8888 and MySQL on port 8889).
Note that PHP errors may appear only in your PHP error log, or also in your browser. Whether they appear in your browser depends on parameters in your
php.ini
configuration, such aserror_reporting
.
The todolist.sql
file contains the following query:
CREATE USER IF NOT EXISTS 'todolist'@'localhost' IDENTIFIED WITH mysql_native_password BY 'chAngeMeN0w!';
The WITH mysql_native_password
portion of this query is required for some
older versions of MySQL. If you get a syntax error message when you run it,
simply remove that part and use only IDENTIFIED BY
.
If you see an error that looks like this displayed in your browser or in the PHP error log:
PHP Fatal error:
Uncaught PDOException: SQLSTATE[HY000] [1045]
Access denied for user 'todolist'@'localhost' (using password: YES)
It means that you are not using the correct database connection parameters. Make sure that the following parameters are configured correctly:
- The
DB_PASS
parameter must be the password you used when you created thetodolist
user with the SQL in thetodolist.sql
file. - The
DB_PORT
parameter must be the port on which you MySQL server is listening. The default MySQL port is 3306, but it may be different depending on your installation method. For example, MAMP uses port 8888 by default.
You may also have made a mistake when creating the MySQL user. If you are not sure, you can delete the user by running the query
DROP USER 'todolist'@'localhost';
, then re-run theCREATE USER ...
andGRANT ALL PRIVILEGES ...
queries of thetodolist.sql
file.
If you see an error that looks like this displayed in your browser or in the PHP error log:
PHP Warning: Invalid argument supplied for foreach()
It is simply because you have not yet implemented the SELECT
query in the
$selectQuery
variable. This makes the $items
variable empty, which produces
an error in the foreach
loop that attempts to iterate over it to display the
todo items.
You have not configured the BASE_URL
parameter correctly. This value is used
in the form's action
attribute when creating a
todo item.
The correct value is the base path under which the application is exposed. For
example, if you are accessing the application at
http://localhost:8888/comem-archidep-php-todo-exercise/
, then BASE_URL
should be /comem-archidep-php-todo-exercise/
. If you are accessing the
application at http://localhost:8888
, then BASE_URL
should be /
.
You may have configured your BASE_URL
without a trailing slash (e.g.
/comem-archidep-php-todo-exercise
instead of
/comem-archidep-php-todo-exercise/
).
The Apache web server (in MAMP or equivalent) will not treat requests to those two paths in the same way:
- The first path
/comem-archidep-php-todo-exercise
will probably be redirected to/comem-archidep-php-todo-exercise/
with a standard Apache configuration. Any form data submitted in the request will be lost in the redirection. - The second path
/comem-archidep-php-todo-exercise/
refers to the directory by the same name. In that case, a standard Apache configuration will probably execute theindex.php
page in that directory.
Without the trailing slash, your application may display correctly, but form submission may be broken.