How to create page detail in AEM 6.1

I want to create a page detail of product containing the following information such as name, ID, type, status, quantity, description etc by AEM 6.1. But it seems difficult to me.

Assuming there is a table of product list. Once clicking the Read One link in a row, the detail page of the item will absolutely be rendered.

Do you have any ideas ?

I think this really depends on how your product details (ID, type, status, quantity, description, etc) are stored.

A good solution would be to create a new page component that reads an ID http parameter passed when clicking on the READ ONE button as an argument into the rendering of the new (PRODUCT DETAIL) page. so the all the buttons would look like this: www.mywebsite/products/productdetails?ID=x where x is the ID of the product in the given row when clicked.

Your new page component would have to have a code snippet similar to this:

<div id="product-detail-component" data-sly-use.product="com.mypackage.models.ProductModel">
 <ul>
    <li>${product.ID} </li>
    <li>${product.description}</li>
</ul>
</div>

And then you would need a new Sling Model class that can handle a http parameter

@Model({adaptables= Resource.class,SlingHttpServletRequest.class}) public class Product Model {

@PostConstruct
    public void init()
    {
/*
1.retrieve HTTP parameter which is ID
2.access resourceResolver/resource to locate node containing product properties relative to resource location
*/
}
}

This is a very basic and not functional example, but I think it may give you a better direction.