The goal of this project is to create a website for creating shared shopping lists.
This project must be done on a web server (Apache type) with PHP, MySQL and phpMyAdmin. This project has been tested with the following versions:
It should work with other versions, but may require a few adaptations.
For this project, we will use Bootstrap, which is an open source library allowing the quick creation of web pages. Bootstrap contains many elements that are frequently used (buttons, forms, message boxes ...) in web development. Among the advantages of Bootstrap :
Go to the Bootstrap introduction page and retrieve the template located in section Starter template.
Create an index.php
file at the root of your site and insert the template
Bootstrap. Make sure the page is loaded correctly and displays Hello, world!.
Add a title and description in the page header.
I recommend that you take the time to read this Bootstrap page about using the margins before proceeding further.
Google offers a collection of fonts designed specifically to be
imported into websites. Go to the homepage of Google Fonts
and select the Pacifico
font. After the selection, a small box of
dialogue appears at the bottom right with a line to add in the
the header of your HTML page. Add the line.
Create a css
directory at the root of the site. In this folder, create a file
named liste2courses.css
and add the following line to it in the css file :
.title { font-family: 'Pacifico', cursive; }
You now have a title
class that will allow you to modify the
font of the elements using this class. In the home page of your site
create a title centered in the page
with the font you just imported. At this point, your homepage should
look like this:
Create in the body of your page a division of 800 pixels maximum centered on the page :
<div style="max-width:800px" class="mx-auto">
</div>
Insérez le titre et un formulaire conforme à l'ilustration suivante en vous aidant de la Bootstrap form documentaion :
Form shound not be sent if the field is empty. Form will be posted to the page new.php
with the POST
method.
Create a script new.php
at your root directory. For instance, just check that
data sent from the form is properly received. We'll process the data later.