Online shopping store

Transcription

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: 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 insertnew.php loginpage.php product_list.php updaterecord.php index.php shopping_store.sql description a page that has a form to insert a new record a login page for administrator to update the product a page to list out the products of the shop a page that has a form to edit the information of the product the index page of the website sql command to create the database 1

2 3. Web Design home admin product list view product shopping cart 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. 2

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. 3

4 4. Software: Dreamweaver / XAMPP Dreamweaver Link: Description: Figure 3: Dreamweaver logo 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: Description: Figure 4: XAMPP logo 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. 4

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. 5

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. 6

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. Figure 10: MySQL Connection dialogue box 7

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. Figure 12: Connection folder 8

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). Figure 13: Create recordset 9

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. 10

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 Figure 16: The resulting table 11

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. 12

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. 13

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. Figure 20: Menu Properties 14

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. Figure 22 : Adjust the filter 15

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). Figure 24: Insert a hidden field 16

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 In the value field, select Form.productID1, submit as integer and tick primary key, click OK. 17

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. 18

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). 19

20 Now, we can insert the record in the product list page (Figure 30). Figure 30: Product list page with update button 20

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 Figure 32: Delete record dialogue box 21

22 Figure 33: move the code Select the highlighted portion of code and move outside the brackets. 22

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 Figure 35: Parameters dialogue box 23

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. 24

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. 25

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 Figure 39: Restrict access to page dialogue box 26

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). 27

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 Click OK, then a logout link will be created. Figure 42: Log Out User dialogue box 28

29 Figure 43: Log out link is created From the above figure (Figure 43), a logout link is created at the left upper corner. 29

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. 30

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). 31

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). Figure 47: Your cart 32

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. 33

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 field is with 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. 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). 34

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: NoteBlogger. (2013, April 16). What is XAMPP?. Retrieved from!blog: Zend validate introduction. (n.d.). Retrieved from Zend framework: 35