Aim

The aim of this lab is to learn how to setup the product related database and search products through the webpage.

Tips:

1. If you are not sure why you are doing something, ask a TA.  This is what they are here for.

2. The M-Dev-Store online videos are good references while our labs have different focus. If you want to be an expert, you are recommended take both labs and on-line videos.

3.  The forums @ LMO are available for questions and discussions.

4.  These labs are expected take more than the 2 allocated hours.  You should complete them in your own time before the next lab.  Practice makes perfect!

Preparing the HTML part:

1.    Continue from last lab, the right part would be used to display the search result of products. It would be looks like:

And it should be a responsive one. It means when the width of browser changed, the content in one-line would change automatically.  The media resolution one is as:

Bootstrap have 12 columns each row, in “col-lg-3” lg is for the large solution and 3 means this div will occupy 3/12 of this row. By define the different number of columns under different solution, the webpage is responsive now. The html code to achieve this is as:

Please notice the search result is a simple duplication. Then we can use foreach to output the search result. In the meantime, an <img> tag was used to show the pics of the product. This demo would use a static picture for demo purpose. For the real project, the pics of each product need to be stored on the server and its address should be stored in database.

Search by categories:

2.    In last lab, the categories have been dynamically showed in the left-bar. We can use the GET  method to search products by its categories. Similar to the lab2, we can use the same page to receive different parameters. To safely receive the GET parameter by PHP, the code is as:

By receiving the category id, we need to search out the products under this category and its sub- categories. Again, “recursion” should be used for that purpose. A sample was shown:

General Search :

3.    Put products in categories is good for the shop owners to manage the store but it is obviously    not the friendly one for customers. For example, customers may want to search the products by brand. Then a general search like search engineer is preferred. A search function has been showed in the right-up corner of the webpage. It has a form with POST method. The HTML code is as:

The demo of this lab received the posted “keyword” and search the name and description columns. The code is as:

The searching result on web is as:

Be careful, this is ONLY a demo. It is very resource-consuming to use “LIKE” in the SQL. Put keywords as “tags” to a product is a better way for search. And the mainstream e-stores all build the search engine or SE for general search, which is designed for this kind of general search.

Homework :

4.   Till now, the landing page shows nothing as flowing: