Part 1. The home page

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:

PHP 7.2 or higher
phpMyAdmin 4.6.6
MySQL 5.7

It should work with other versions, but may require a few adaptations.

Creation of the home page

Bootstrap

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 :

quick creation of a harmonious page
responsive (adapts to screen size)
result compatible with most browsers

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 font

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:

Form

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.

Part 2

Part 1. The home page

Creation of the home page

Bootstrap

Google font

Form

See also