Bootstrap & PHP Demo
By Mark Foyster
MySQL Demo with PHP and Bootstrap
This is going to be a simple working demo of a database. We will only be covering queries, no insertions or deletions. This saves me having to build an authentication system which is a bit more than I intend to do for a quick demonstration. The database we are using had been downloaded from the mysqltutorial.org website. It's for a company selling toy vehicles, a bit like "Dinky", "Corgi" etc.
Static search
For this, we will simply submit a search and have it returned to a separate page. Put part of a name for a model of car into the box below. Press the search button and you will be redirected to a results page. Don't worry, there's a link to get back.
Dynamic selection
Now, let's make something a little more complicated. We will stick to the same table within the database. By adding some more controls, we can give the user more options to search through all the listings. The default can be to list everything with a set limit on how many are displayed at once. From there, we can provide tools within our UI to filter the data and help the user choose the data they wish to display. Bootstrap should simplify this process.
To achieve this goal, we now have to change tack and update the data dynamically by manipulating the DOM. We can use JavaScript on the client side. the fetch() api will handle our requests and responses, .innerHTML will allow us to add and remove the contents of elements without reloading.
Clicking one of the blue data boxes will instantiate a popup with complete details of the product.
- <
- >