1
Online shopping store
1. Research projects:
A physical shop can only serves the people locally. An online shopping store can resolve the geometrical boundary faced by the physical shop. It has other advantages, such as avoidance of high rental cost, etc.
You are invited by a fashion company to create an online shopping store. The system must include pages that can let the shop manager to edit the product list and stocks. The system must also allow to customer to shop fashions.
2. Demonstration files
Files: http://www.cihe.edu.hk/btc_website/files/question9.rar
To create the online shopping store, one need to create a Web site which has a database for storing relevant information such as user profile and product list. The files below are the component of a simple website. It contains the function of displaying the product list, a login page to let the administrator to add, update or delete a product.
file name description
insertnew.php a page that has a form to insert a new record
loginPage.php a login page for administrator to update the product
product_list.php a page to list out the products of the shop
updateRecord.php a page that has a form to edit the information of the
product
index.php the index page of the website
2
3. Web Design
Figure 1: Hierarchy of the online shopping store
When enter the page, a homepage will be seen, it contain the advertisement and the display of the newest products. It can access the admin page, product list page, and the shopping cart page.
Under the product list page, it contain view product page that let the customers to view the detail of the products.
home
admin
product
list
view
product
shopping
cart
3
Figure 2: Entity relationship diagram
There are two tables inside the database, each of the table has a primary ID. With the admin table, there are two fields to record the username and password. In addition, there are last_log_data which is in date format to record the last login of the administrator.
Within the products data, there is product_name, price details, category and subcategory to record the information of the products. Date_added is used to record the data of the product added. The website can then base on this information to display the latest product.
Quantity is used to store the number the product that the customer buy. This is also used to calculate the price that the customer should pay for.
4
4. Software: Dreamweaver / XAMPP
Dreamweaver
Link: http://www.adobe.com/cfusion/tdrc/index.cfm?product=dreamweaver&loc=cn
Figure 3: Dreamweaver logo
Description:
Adobe Dreamweaver (Figure 3) is a web design and application development tools. Dreamweaver are so popular today is because it offers a What You See Is What You Get (WYSIWYG) editor and code dashboard. It let you build a professional website with basic knowledge of programming.
XAMPP:
Link: http://www.apachefriends.org/en/xampp-windows.html
Figure 4: XAMPP logo
Description:
XAMPP stands for X(cross-platform), Apache, MySQL, PHP, Perl (NoteBlogger, 2013). It is not easy for most of the people to install an Apache web server, it is even harder if you want to add MySQL, PHP and Perl.
Many web designer or programmer intend to use this as a development tools. It is easy for them to test their product without any access to the internet.
5
5. Solution
Since the scale of a website can be very large. This section will only describe how to create a product list page, a page to update the store and an authentication page. Students can open the demonstration files to check which part is not correct.
Creating a database
Figure 5: Access phpMyAdmin
Figure 6: Create Database
To create a database, start the XAMPP, click on the “Admin” button. A phpMyAdmin page will pop up like the page in Figure 6. Go to the Databases tab and enter the name of the database, after that, click create to create a new database.
Inside the database, tables to store the data of product, category of the products, ID and password of the administrators are needed. There are two ways to create tables, one is type in the SQL command. The other is going to the structure tab (Figure 7) and creates the tables.
6
Figure 7: Structure tab of phpMyAdmin
Figure 8: Importing sql to the server
As the SQL command already prepared, so go to the import tab to import the shopping_store.sql. Press “go” button will create the tables.
7
Connection between website and database
Before creating all the pages, connection between site and database is necessary. To connect the web pages to the database, click on the Databases tab, press the “+” icon (Figure 9).
Figure 9: Add connection
After pressing the icon, the following dialogue will pop up. Enter the connection name, the name of the connection name is flexible. However, we need to type in “localhost” in the MySQL server. Username is root and no need to type in password if no password is set in database before. Click on the “select…” button to select the database which you want to connect with.
8
Figure 11: Select the database
As the website need to connect with the “shopping store” database, click on that name and click OK. A folder named “Connections” is then created. Inside the folder, there is a shopping_store.php which is responsible for the connection between the website and the database.
9
Product list
Create a recordset
Product list page is to display the products of your store, which mean fetching the product details from database and display as html. This requires a recordset. A recordset represents a query, it looks like a row of record.
Submit a query will return data, recordset and the database fills it in with the first record that matches the predicate clause. When you need the next record, fetch the next row and so on (Jwilliamsoh) .
As we want to make the page that display a list of products, each product is a recordset, therefore we need to create a recordset inside Dreamweaver.
In the Bindings panel, click the plus (+) icon and then select Recordset from the drop-down list that appears (Figure 13).
10
Figure 14: Recordset dialogue box
Enter the name of the recordset in the Name field (Jenkins & Wagner). Select the product in the Table field, as the product ID is not necessary to display in the product list page, only select product_name, price and category. Click OK to create the recordset.
11 Display the product
Make a table with three rows that is used to display the product name, price and category (Figure 15). Drag the product_name, price, and category to the table (Figure 16).
Figure 15: Table with three rows
12
At this stage, this page only display a record only, to display all the records needs to define the repeating region. To define the repeating region, select the div which include table. Go to insert, data objects, repeat region.
Figure 17: Repeat region dialogue box
You can select a limited number of records at a time or all records (Figure 17). Click OK to create the repeat region.
13
Building pages to update the product list
This section is focus on editing the pages such that the administrator can edit or delete the product in the database.
Create a page to insert a new record
Create a new php “insertnew.php”. As we can predict, one of the field of the insertion form include a list menu which let the administrator to select the category of the product. Later sections will mention that to create this list menu, we need to create a recordset based on the category table.The method of creating a recordset is already mentioned before. Students can follow the previous section to create the recordset.
After the recordset is created, go to insert >Data objects > Insert Record> Record Insertion from Wizard.
Figure 18: Record Insertion Form
Select the product_list.php in the “After inserting, go to:” field indicate after insert a new record, it will jump to product_list page.
As we do not need to enter the productID in the form by ourselves, select the productID1 and click “-“ icon.
14
Figure 19: Adjust the display of category
Instead of typing the category, we want the administrator is to choose a category from a list menu. For this reason, change from display as “Text field” to display as “Menu” (Figure 19).
Click on the “menu properties” button, a dialogue box will pop out (Figure 20). Check populate menu items from database. Select the rs_category, get labels and values from “category”. Click OK to finish the process.
15
Figure 21: Insert a new record page
The finished insert record page will as above (Figure 21). The administrator can enter the product name, price and select the category. Click “insert record” button and the information inside the database will be updated.
Create a page to update the records
If we want to edit a record, we will expect there is a form to edit it. This time the form should not be empty, it should already display the product name, price and category. And since the form need this information, we need to build a recordset like before. The most important thing is this time we need to adjust the filter from none to productID1 = URL Parameter productID1. This is used to let the form only display the information of a specific product or record.
16
Figure 23: Bind to dynamic source
Select the text field and click on the “Bind to dynamic source”. Choose the corresponding dynamic source. This step will make the form display the information of a specific when the administrator edits the record.
How the forms know which record need to display after the administrator press the update button in the product list? The answer is we need to insert a hidden field (Figure 24).
17
Select the hidden field and inside the properties panel, change the name of the hidden field to the name of the product ID inside the database. Click on the “Bind to Dynamic Source” button and select the product ID dynamic source (Figure 25).
Figure 25: Properties panel
The last step is to go to Insert> Data Object> Update Record> Update Record
Figure 26: Update record dialogue box
18
Figure 27: Insert the link of update record
Create a new column, and then highlight Update (Figure 27). Instead of point to the updateRecord.php, browse for it.
19
Figure 28: Click on Parameters button
Figure 29 : Parameters dialogue box
Click on the “Parameters button…” button (Figure 28), change the name to the name of the product ID inside the database, and bind value to the dynamic resources, which is the productID1 of the recordset(Figure 29).
20
Now, we can insert the record in the product list page (Figure 30).
21
Delete a record
Create a page called deleteRecord.php, go to server behaviors, click on the “+” icon, choose “Delete Record” (Figure 30). Choose the product_list.php to be the page to go to after deleting, select the product ID1 to be the primary key column and primary key value.
Figure 31: Choose Delete Record from Server Behaviors
22
Figure 33: move the code
23
At this stage, we already finish the deleteRecord.php, go to the product list page to add link for making delete record. High the word “delete”, in the properties panel, browse to link to deleteRecord.php (Figure 34). Click on the “Parameter…” button, rename the name to “ProductID1” (Figure 35) and the bind the value to the productID1 of the rsProduct recordset (Figure 36).
Figure 34: Select File
24
Figure 36: Bind to the productID1
The delete link is now added and each of the record in the product list can be deleted by pressing the word “delete”.
25
Authenticating Users
Authenticating users is important, as some of the information, especially involve privacy. Unauthorized access to data can lead to file corruption or the downloading of viruses, both can cause a system or entire network to cash.
Insert> Data Object> User Authentication> Log in User
Figure 37: Log in User dialogue box
If login success, go to index.php. Tick the “Go to previous URL” is because the user already login, go to the index page which the user want to access before. A Login link is then created in the index page.
26 Restrict access to a page
To protect a page which only allow administrator to access, open that file, such as product_list.php. Open the product_list.php, go to Insert > Data Objects> User Authentication> Restrict Access to Page (Figure 38Figure 39). Set the restriction based on Username and password and if access denied, go to “loginPage.php” (Figure 39).
Figure 38: steps to restrict access to page
27
Figure 40: Result of login fail
From the above figure (Figure 40), if the user did not login, the product list page will redirect to login page (see the link is not loginpage.php).
28 logout
Go to a page that wants to create a logout link. Go to insert, data objects, user authentication, log out user (Figure 41).
Figure 41: Steps to log out user
Figure 42: Log Out User dialogue box Click OK, then a logout link will be created.
29
Figure 43: Log out link is created
30 6. Result
Figure 44: Index page of the online shopping store
The index page of the online shopping store is shown above. The middle column showed the newest product that is available in the shop. Also there are some models here to display the most popular product recently.
31
Figure 45: Product list page
The product list listed all products of the shop, customers can click see the name and the price of the product. If the customer wants to see the detail of the product, they can click on the “View Product” link to access (Figure 45).
32
Figure 46: Detail of each product
After clicking the “View product” link, the above page will be shown (Figure 47). “Black color is cool” is the description of this product. There is “Add to Shopping Cart” button which allow the customer to add the product if they think that is suitable, the following page will be seen (Figure 47).
33
This page can also be accessed by clicking the “Your cart” link on any page at the top right hand corner. This shows the quantity of each product that the customer buy and the total that they need to pay for. There is a “x” button next to each product such that the customer can delete the product when they sudden change their mind.
7. Direction
In the result section, we see that the product list only can display a five product in one page. If there are a lot of products in that year and we want to let the customer view it, this page clearly has problem.
Students can study more about how to use the server behavior (Figure 48) to deal with this problem.
Figure 48: Server behavior
In the solution section, we generated a lot of php by using Dreamweaver. This is very convenience to create in this way. However, this is also very time consuming and some problems may be created such as the position of logout button of each page may not consistent.
Students can study more about how to write a template, how to use the “include_once” php code to cope with the inconsistent of each page.
34
About the form, we did not do any validations to validate the information that the administers enter. A form with validation function should be quite similar as below (Figure 49).
Figure 49: Form with validation
Validation can be done by using spry which is available inside the Dreamweaver, it is capable of doing simple validation such as whether the field is filled, is the information inside the email field is with email format.
Figure 50: Zend framework logo
More advance validation can be done by using Zend framework (Figure 50), which is freely available by accessing the following link.
http://framework.zend.com/
Zend framework is an open source and object oriented web application framework for the developers. For validations, Zend framework provides a set of commonly needed validators. For example, a web application might require that a username be between six and twelve characters in length and may only contain alphanumeric characters. A validator can be used for ensuring that usernames meet these requirements. If a chosen username does not meet one or both of the requirements, it would be useful to know which of the requirements the username fails to meet (Zend validate introduction).
35
8. Reference
Jenkins, S., & Wagner, R. (n.d.). Dreamweaver CS5 All-in-One For Dummies. Wiley Publishers.
Jwilliamsoh. (n.d.). Explain the concept of database record and recordset? Retrieved from Answers.com: http://wiki.answers.com/Q/Explain_the_concept_of_database_record_and_recordset#slide3 NoteBlogger. (2013, April 16). What is XAMPP? . Retrieved from !Blog:
http://thundernoodle.net/notblog/2013/04/16/what-is-xampp/
Zend validate introduction. (n.d.). Retrieved from Zend framework:
