Yeditepe University
Department of Information and Computer Science
Web Based Shop Creator
(WeBaSC)
Click to Download Setup Files(~3MB)
Written by: Sadi Evren SEKER Home Page
Ilker Bacaksiz
Instructor: Ender Ozcan Home Page
- Introduction
1.1. Aim of Project
- Analyze
2.1. Analyze of Creation Wizard
2.2. Analyze of GUI
2.3. Analyze of Necessary items in project
- Design
3.1. Design of Database
3.2. Design of Web Pages
3.3. Design for Customers
3.4. Design of connections between main entities
- Implementation
4.1. Implementation Environment
4.2. Implementation of Web-pages creation Assistant
4.3.Implementation of Cart System
4.4. Checkout System
5. Interpretation about project
6. Conclusion
- Introduction
We have wanted to implement an online shop creator. Our program will create shops dynamically and keep track of users. Their orders will be kept in a cart system. And all of data in our project will be dynamic. Number of products, prices, definitions, names and attributes of products are dynamic.
1.1. Aim of Project:
Today acceleration of Internet technologies has reached the peak value. There are many implementations of commercial, personal and educational sites. Unfortunately there are only a few number of online database implementation. Now hot topic of Internet is the online database implementations. There are only a few numbers of online database applications and most are commercial. I think today’s most popular improvement is the online database implementations.
Our purpose is implementation of a flexible online database application. We have selected an online shop design tool. An implementation, which will create another implementation. We will implement our design tool and by this tool any user can create his site with database connections. It has to be flexible because it can be used for any purpose; to sell any product (e.g. CD, books, textile products etc.) or any service can be sold online (for example a web developer may want to sell his maintenance service online, he can advertise his service specialties and prices online and by any request he can give this service).
- Analyze
As discussed above, there is a 3-tiered approach in most of the online database implementations. A database to keep data, web server to serve online pages, and a client to connect and view these pages.
 |
Figure 1: Classical view of 3 tiered system
- Analyze of Creation Assistant
Today’s most of applications use wizard based approach in a new project creation phase. So in our project we will start interface by using wizard-based approach. And creation phases will be passed by using step-by-step data input.
- Analyze of GUI
We have created an interface for power user of the system. There should be a simple GUI in the creation phase of project. Any user will be able to create an online shop with no information on programming. So all web pages, database entries and links will be created by project.
- Analyze of necessary items in the project
We should supply a suitable environment for customers shopping over our online shop. So there will be some web pages for introducing the company info while some other pages publishes the information about products. So these data should be carried on a database. And main idea behind the project is the cart system for customers should be designed for every product in our database.
3. Design
We have used top-down approach in our design phase. First we have declared that there should be a 3-tiered approach in our system. Then we have declared each tier by their attributes. Then created the connections between these tiers. So in the sub view of our implementation there are 3 different projects:
· Design of Database
· Design of Web Pages
· Design for Customers
a. Design of Database
In our project we use access database, which is randomly selected. So this choice is a recessive effect on our project, it can be easily changed by another database (please refer to connection between tiers subject)
b. Design of Web Pages
Still all web pages are created by our wizard; we should design all design issues. For example the colors of pages and issues like center, bold, horizontal lines etc…
Following snapshot represents a sample product page.
As you can notice above, there are 4 parts for a sample product.
· Name of product
· Definition for a product
· Unit price of product
· Order form for product
Sizes of fonts lines, our creation assistant dynamically creates buttons text boxes.
So the view on this product page is directly read from web-creation assistant database. You can see the record basketball in the following database.
c. Design for customers
We have to keep data about customers. We have to know their address contact info, name etc… So we have designed a user input page for customers.
You can see an example input page for customer info.
As you can notice there is a view of ordered products and their prices. So we have to handle this data and keep it in our database. We use a database mechanism here because someone can want to see his sales and report the customer profile. It is also possible to use only an e-mail system for this form.
d. Design of connections between main entities
We have implemented suitable connection mechanisms for our entities. For example we have used ODBC connection between access database and visual basic database.
As we discussed before there are 3 main entities so the connection between them is as follows:
· Connection between visual basic (web-page creation assistant) and access database (the database to keep products, their information and their prices) is done by using ODBC connection method. So this gives us the flexibility of changing database. There is only a simple line makes connection. If this line is changed to another database, system will start to use this new database.
· Connection between Web-creation wizard and web pages is done by using simple file input/output operations. We have created these files dynamically so users can view and share the pages dynamically. For example there is a product page for each product which forces us to create another main page, which keeps a link, table for all these products.
· Connection between user and products is done by these dynamically created pages. So any customer can view the pages and place their orders without the effect on creation of web pages.
· Information is gotten from users by using PHP. For example we have to keep the information about customer (this data is needed them mailing product to customer) and about the product ordered by customer (again this data will be used in stock). So we have implemented our interface to the database by using PHP. A PHP file is called after the submit event in customer information form and all data shown in customer info page is kept to MySql database by using PHP.
4. Implementation
a. Implementation Environment
We have agreed that most of the power users (we assume this user has no information about computer world, internet, databases) uses standard personnel computers with windows. So we have implemented an assistant with graphical user interface to help creation of web pages.
We agreed that the easiest and powerful tool to create windows based, GUI based applications is Visual Basic. So the creation assistant is written by using visual basic.
The temporary data input and output operations in visual basic are implemented on an access database. Because there is a strong relation of using access database in visual basic.
The web pages are created in standard html format. Because we assume that these pages can be published from any environment. Server maybe Linux, Unix, Windows, etc…
The cart system is implemented in Java script. Again it gives the platform independence and many advantages from java environment. We also implemented a cookie system in the cart system to handle the orders from customers.
We have implemented customer information page by using html and at the back of this html forms we have implemented PHP. So on submit event PHP pages will be executed. Reason for selecting PHP technology is because of it is powerful examples in server side scripting.
Customer database is implemented using MySql. I think it is obvious, why we have used MySql, still we use PHP.
b. Implementation of Web-pages creation Assistant
This figure show our initial screen. When our executable file is double clicked this view is displayed. There is a very simple design for dummy users. Only a new directory for the web pages will be selected. They can create their web pages to any directory they want. This may be a local or remote directory. They can either use the tree structure, driver check box to navigate or they can simply type the location on the textbox below.
Private Sub Command1_Click()
Lokasyon = Text1.Text
MsgBox Lokasyon
MkDir Lokasyon & "stnd"
run ("copy .\stnd\*.* " & Lokasyon & "stnd\")
ilk.Hide
Step1.Show
End Sub
This piece of code is executed when the next button is clicked. So in this visual basic code next page will be displayed, while constant files are copied to selected location.
Next screen displayed will get the data about the company to show products index page. User should enter the name of company, Address, Telephone and email data for a better reliability on the internet.
Private Sub Command1_Click()
Dim intCtr As Integer ' Loop counter
Open Lokasyon & "iex.sad" For Output As #5
Print #5, "<html><head><title>" & Text1.Text & "</title></head>"
Print #5, "<body><h1><center>" & Text1.Text & "<br><br><BR>"
Print #5, "<img src='"
Print #5, ""
Print #5, "'><h3><br>if you have finished your shopping you can go to order page<br><a href='customer.htm'>place your order</a><hr>"
Print #5, "<br><br><br><hr><h4>Address information:" & Text2.Text & "<br>Telephone: " & Text3.Text & "<br>"
Print #5, "<br><hr>Send your mail to:<br><a href='mailto:" & Text4.Text
Print #5, "'>" & Text4.Text & "</body></html>"
Close #5
Debug.Print "File iex.sad closed"
Step1.Hide
Step2.Show
End Sub
Code executed behind the next button is as the code above. There will be a temporary file to keep track of the data inserted by user. And all data in this temporary file is kept in html format.
So it gives us the flexibility for processing data and creating pages on html format.
There is another wizard page to ask for the logo of company. This is an optional part which is implemented for stronger view over internet. User will select the location and the name of logo file from his local hard-disk and this logo will be displayed on index of products page.
Private Sub Command1_Click()
Dim satir
Open Lokasyon & "iex.sad" For Input As #9
Open Lokasyon & "index.html" For Output As #11
For i = 1 To 4
Input #9, satir
Print #11, satir
Next i
Print #11, Text1.Text
For i = 5 To 8
Input #9, satir
Print #11, satir
Next i
Close #9
Close #11
Step2.Hide
Step3.Show
End Sub
You can see the code reads from temporary file and outputs to index.html with an additional image line.
Maybe the heart of the Web-page creation assistant is displayed by this screen there is a database connection to read products info and create the web pages by using these data in database.
Private Sub Command1_Click()
Dim ilk As String
Dim son As String
Dim satir As String
Open "" & Lokasyon & "index.html" For Input As #14
Do While Not EOF(14)
For i = 1 To 6
Input #14, satir
ilk = "" & ilk & satir
Next i
For i = 6 To 8
Input #14, satir
son = "" & son & satir
Next i
Loop
Close #14
Open "" & Lokasyon & "index.html" For Output As #13
Print #13, ilk
Dim lm As Integer
Dim dosya As String
lm = 20
Do While Not Data1.Recordset.NoMatch
lm = lm + 1
'
dosya = "" & Lokasyon & Data1.Recordset.Fields(1).Value & ".html"
Open dosya For Output As #lm
Print #lm, "<html><head><title>Product " & Data1.Recordset.Fields(1).Value & "</title><script src=shop.js></script></head><body><center><h1>Product " & Data1.Recordset.Fields(1).Value & "<br>"
Print #lm, "<br><br><hr><h3>" & Data1.Recordset.Fields(3).Value
Print #lm, "<br><hr><h3>Unit Price of " & Data1.Recordset.Fields(1).Value & " is :<br>" & Data1.Recordset.Fields(2).Value & "<br>"
Print #lm, "<form name='s" & lm & "' method=get action=view.html>"
Print #lm, "<br>Quantity:<input type=text NAME='quantity' size=3 maxlenght=3 Value = '' > Color: Black"
Print #lm, "<input type=hidden NAME=" & Data1.Recordset.Fields(2).Value & " value='Black color'>"
Print #lm, "<input TYPE='hidden' NAME='A ball' VALUE='s" & lm & "'>"
Print #lm, "<input type='button' value='Order' onClick='addtocart(document.s" & lm & "," & Chr(34) & "view.html" & Chr(34) & ")'></form>"
Print #lm, "<br><hr><a href='customer.htm'>place you order</a></body></html>"
Close #lm
Print #13, "<a href='" & Data1.Recordset.Fields(1).Value & ".html" & " '>" & Data1.Recordset.Fields(1).Value & "</a><br>"
Data1.Recordset.FindNext "1=1"
Loop
Print #13, son
Close #13
End Sub
Code above will create a product page for each of the product in database. The data in these pages will be inserted by the for loop and values from this database will be inserted in necessary places with given format. There is an important tag that you can notice is
<script src=shop.js></script>
This line connects our pages to java-scripts which keeps the track of cart system. We have included the script instead of typing it to all pages because it would cost more time to load, more space and more complex codes.
So this was the final step of web pages creation phase.
c. Implementation of Cart System
As we discussed in previous chapter (implementation of Web-pages creation assistant) there is a script include statement for every product page.
<input type='button' value='Order' onClick='addtocart(document.s" & lm & "," & Chr(34) & "view.html" & Chr(34) & ")'>
This is the line which shows order button on product page and executes addtocart() function in shop.js script file.
In shop.js file our addtocart function is as follows:
function addtocart(form,page){ //add to cart and go to a new page
addto(form)
location.href=page;
}
so we call another function called addto in the same script. That’s why we need to stay in the same page.
function addto (form) { //add to cart but stay on the same page
var entry=form;
var a=0;
boundry = new Array(entry.elements.length);
boundry[0]=0;
for(x=1;x<entry.elements.length;x++){
if(entry.elements[0].name==entry.elements[x].name) {
a++;
boundry[a]=x;
}
}
j=0;
for(i=0;i<=a;i++) {
j=boundry[i];
// check to see if you are using <select>
if(isNaN(entry.elements[j+1].length)){
var description=entry.elements[j+1].value;
} else {
var opindex=entry.elements[j+1].selectedIndex;
var description=entry.elements[j+1].options[opindex].text;
}
var ind=j+2;
while(entry.elements[ind].name==entry.elements[ind-1].name) {
opindex=entry.elements[ind].selectedIndex;
description = description+" "+entry.elements[ind].options[opindex].text;
ind++;
}
store_name=entry.elements[ind].value;
product_name=entry.elements[ind].name;
quantity=entry.elements[j].value;
price=entry.elements[j+1].name;
var num=parseInt(entry.elements[j].value)
if(!isNaN(num) && num>=0 )
{
document.cookie ="oops"+store_name+"+"+description
+ "+" + product_name + "=" + quantity +
"+" + document.referrer +"+"+ price +
"; path=/"+"";
}
}
}
This piece of code is the heart of cart system. You should notice the following statement.
document.cookie ="oops"+store_name+"+"+description
+ "+" + product_name + "=" + quantity +
"+" + document.referrer +"+"+ price +
"; path=/"+"";
This statement writes to cookie by the seperation of ‘+’. So when this data will be parsed we will discuss the help of this ‘+’ symbols. (and also signature oops J)
We have also another java script to show the content of cart. We call it viewcart and this function is called when the customer wants to checkout from system.
function view_cart() {
mycookies=new Array(20);
var i=0;
var startpoint=0;
whole_len=document.cookie.length;
while(whole_len!=startpoint && i< 20)
{
if ((temlen=document.cookie.indexOf(";",startpoint))!=-1)
{
mycookies[i]=document.cookie.substring(startpoint,temlen);
i++;
startpoint=temlen+1
}
else if (startpoint != whole_len)
{
mycookies[i]=document.cookie.substring(startpoint,whole_len);
i++;
startpoint=whole_len;
}
}
printtitle();
for (j=0;j<i;j++)
{
//filter out cookies that are not used by shopping cart
if((mycookies[j].substring(0,4)=="oops")||(mycookies[j].substring(0,5)==" oops"))
getCookie(mycookies[j]);
}
document.write("</table>");
}
This code will be called when a customer wants to view his cart. As you can see there is an array declaration for cookies (we have implemented this to show the cart 20 by 20). And this function calls another functions printtitle, getcookie.
Printtitle function is used to output table title to file
function printtitle(){
tabletitle="<table border=1><tr align=center> \
<td>product</td><td>description</td><td>quantity</td><td>price</td> \
<td>store name</td><td>Return product</td></tr>";
document.write(tabletitle);
}
As you can see we have declared a string to keep the table title and output the string to document by using document.write function.
A more important function called getcookie is implemented to parse the cookie files.
function getCookie (acookie) {
clen = acookie.length;
nlen= acookie.indexOf("=",0);
//get rid of the "oops" at the beginning, thus start at 4
if(acookie.substring(0,1)==" ")
cname=acookie.substring(5,nlen);
else
cname= acookie.substring(4,nlen);
bname= acookie.substring(nlen+1,clen);
sname_len=cname.indexOf("+",0);
store=cname.substring(0,sname_len);
dlen=cname.indexOf("+",sname_len+1);
descrip=cname.substring(sname_len+1,dlen)
product=cname.substring(dlen+1,nlen);
qlen=bname.indexOf("+",0);
rlen=bname.indexOf("+",qlen+1);
quant=bname.substring(0,qlen);
if(quant==0)
document.cookie="oops"+cname+"=bb; expires=Saturday, 19-Feb-00 23:59:59 GMT; path=/"+"";
refer=bname.substring(qlen+1,rlen);
price=bname.substring(rlen+1,clen-nlen);
price=price_format(price);
printcontent();
}
This function parses the cookie previously inserted to system. And call printcontent to print the values to screen.
function printcontent(){
if(quant!=0){
document.write("<tr align=center><td>"+product+"</td><td>");
document.write(descrip+"</td><td>"+quant+"</td><td>");
document.write(price+"</td><td>"+"<a href="+refer+">"+store+"</a>");
document.write("</td><td><form><input type=submit value=return ");
document.write("onClick=\"putback(\'"+store+"+"+descrip+"+"+product);
document.write("\')\"></form></td></tr>");
}
}
We output the values of order by this function but there is a possible operation to erase the item in viewing his cart. So we have to print the cart info inside a form and put delete function to this form. We have also designed another printcontent function which enables customer to update the amount of product but we don’t put it to project because of some reasons the code is as follows
function printcontent2(){
if(quant!=0){
document.write("<tr align=center><td>"+product+"</td><td>");
document.write(descrip+"</td><td><form method=get ");
document.write("action=view.html><input type=text size=3");
document.write(" name=quantity value="+quant+">");
document.write("<input type=hidden name="+price);
document.write(" value=\""+descrip+"\">");
document.write("<input type=hidden name=\""+product);
document.write("\" value=\""+store+"\"></td><td>");
document.write(price+"</td><td>"+"<a href="+refer+">"+store+"</a>");
document.write("</td><td><input type=submit value=update onClick=");
document.write("addtocart(this.form,'view.html')>");
document.write("</form></td></tr>");
}
}
This erase operation is done by putback function.
function putback(str1){
document.cookie="oops"+str1+"=bb; expires=Saturday, 19-Feb-00 23:59:59 GMT; path=/"+"";
}
putback is the simple function to set the death time of cookie. (I hope it finishes in deadline so future will be freeJ).
4.4. Checkout System
We have implemented the last procedures of cart system by checkout functions. There is another js file written for latest checkout. After a customer clicks checkout the information in his cart and the form asking his info is displayed to the customer. When customer enters his information to the system, our PHP starts to work and the data entered is directly written to the database (which is kept in MySql ).
if ($submit) {
$db = mysql_connect("193.255.41.247", "sadi","ilker")or die("alete ulasamasdik baba");
mysql_select_db("oddt",$db)or die("veritabani dediin nolioki");
$sql = "INSERT INTO customer
(choose,name,shipaddress,shipaddr2,city,state,country,shipph,billname,billphon,message)
VALUES
('$choose','$name','$shipaddress','$shipaddr2','$city','$state','$country','$shipph','$kame','$billphon','$message')";
$result = mysql_query($sql) or die("ozur dilerim abi");
5. Interpretation about project
Barry Silberstein who is the writer of b2b internet marketing starts his book by the words:
“The consumer world is composed of every suspect, prospect, or customer who considers the purchase of a product for himself, herself or another consumer. The purchase is a “personal” buying decision.”
Still internet has a great range from personal use to world-wide use, it connects companies whose target is whole world and personal users. So internet is the connection point for giants and dwarves. Dwarves has a chance over internet, they don’t need magnificent buildings, great number of workers or genius leaders (I think genius is genius but still they have chance).
By the help of layered companies for last years any single person with any great idea in his mind can be rich over internet.
The only difficulty for this kind of users is a simple e-commerce creation tool. There are many companies working for this kind of users but each has some minuses. I think our project is fills this holes and offers a complete output with databases and web pages for a single user.
By the help of modular programming we can easily update our product to another program which can work with different databases in different platforms.
6.Conclusion
Everyday, everybody in everywhere talking about e-commerce. There are many people working on e-commerce, many experts for e-commerce, computer science, finance working over e-commerce. There are many customers ordering over internet. Internet is the next frontier for market; a market for everybody, a market in everywhere, a market for anytime, a market for whole world. So somebody should serve a product for dummies in this world. The gained aim of this project is an easy interface for everybody. Also our aims theached us more than any lecture. We have covered many subjects about e-commerce, web technologies, databases and current applications over world.