Point of description Page no.

A. INTRODUCTION 2

B. OBJECTIVE OF OUR REPORT 3

C. HOMEPAGE ANALYSIS 4

D. INNER FEATURES OF THE WEBSITE . 6

E. CART, CHECKOUT, PAYMENT AND DELIVERY OPTIONS .. 8

F. CONTENT MANAGEMENT AND ADMIN PANEL ... 11

G. VIEWPOINT OF A USER 17

H. CODING AND DATABASE 18

I. CONCLUSION 29
A. INTRODUCTION:

Online shopping is a process where anyone can buy or sell items online via the
internet. It is one of the biggest revolutions in the 21st century. It is getting popular day
by day in all over the world. There are many advantaged and disadvantages of shopping
online, the biggest advantage are its full time availability and wide range of service. It
provides a 24 hour service, so people who work at nights and aren't able to go manage
enough time for shopping, can access via online shopping anytime. There is also a wider
range of items and people from all around the world can sell their items online because
the internet is open to anyone with internet access around the world. The biggest
disadvantage of online shopping is the security. There are a few records of frauds
happening with online shopping.

LAZADA and ZALORA are very popular online shopping websites in Malaysia. Despite
the disadvantages, with the advancement of technology and internet access, these kinds of
websites are now ruling over normal shopping business, and provide a huge variety of
choices.

Considering all these facts, we have decided to select a similar category for the
website development for our course TMX 1022. Our website is related to Online
Shopping. We wanted to develop some useful website and also this kind of website
developing will help us to learn the basics of developing all kinds of website, of different
kinds of variety.
 The name of our website is theShoppiesworld. The web address is
shop.69technews.com It is an online shopping site where different kinds of products can
be sold providing varieties of choices. theShoppiesworld website is only provided as a
demo version, with few categories and product samples. The Admin can add many more
products and categories as they want, according to the necessity of Professional level.

theshoppiesworld

B. OBJECTIVE OF OUR REPORT:

The objective of our report is to summarize the developed website into a hardcopy,
so that it can be evaluated accordingly. Also, the database is provided in a CD.
C. HOMEPAGE ANALYSIS:

Welcome to The Shoppies World. Just entering the webpage, we find the
homepage. It is rather a simple and very user friendly homepage with almost all the
required options provided for the users and customers to know and understand about all
the products provided by us.

Let us first observe the top part of the homepage and see the features.

the homepage

As we can see, the top part contains Home, Offers, Rules and policies and contact
details. A search option is also given so that a new user can easily search for the desired
product and check its availability, price, features etc. Just below the search option there
are different categories of products. All the available products are included in these
categories. We also have some of our newly added products featured on the homepage so
that new users can easily learn about the updated products. How easy and simple it is!
 Just as it is mentioned under the name, Fast and simple shopping cart, any user
can also experience the same while shopping with us. Any new user can easily buy a
product just by clicking the Add to basket option. Also if one is looking for only
clothes, they can directly go for it by clicking Clothing in the category list. And the
same applies for Laptops, Mobiles, Watches and also outdoor accessories.

In the search option given, one can also search for the whole category, not only a
product. Now if one is looking for specials offers and discounts, he can easily check it in
the Our offer option. One can also read about the rules of the product supply from the
Rules and Policies options. And even after all these features given, if shopping through
our website seems a bit difficult to anyone, he/she should feel free to contact us about any
inquiry.

Now, let us see the bottom part of the homepage.

the homepage
 The bottom left part of the webpage contains a login option. It is worth mentioning
that this option is only for the admin of the webpage. Normal user cannot login as this
option allows the addition and change in the product and all other options required for the
admin panel only. Here this page has the capability of displaying 9 items in a single page.
Which means, viewing of more than 9 products will require to jump to a 2 nd page. In fact,
all the pages can display a maximum of 9 products at a time. Here at the bottom right, a
print option is available. This is to print the webpage displayed on the screen.

D. INNER FEATURES OF THE WEBSITE:

For our webpage, there are several categories of products like Clothing, laptop,
mobile and watch. This category of products also has some sub-categories, for example:
if we click on the clothing button on our webpage the next page will show us what type
of clothing the customer wants to buy. The page will show clothing items for both men
and women. The item name will describe the product is either for men or women. This
subcategory will work for rest of the products and the subcategories of products will
describe what type of product it is and which brand and price as well.

The categories of products in our webpage.

 The sub categories from a product, example: clothing.

Then lets say the customer wants to check the details of the product. Then the
customer must click on the product image he/she choose, then the next page will show
the details of the product. Then if the customer wants to buy the product he/she must
click on the button named Add to basket showed right side of the product image or if
the customer wants to go back also can. The webpage will also provide the list of other
categories of products on the left side on the webpage. The customer directly can go to
the homepage of our website or can search for a product or other category of product
which listed on the webpage or he/she also can go back to the previous page for search
the same category of product from different brand and price.
The details of the product which chosen by customer, add to basket option on right side of
the image and at left side the other categories of product, search option, homage option
and many more.

E. CART, CHECKOUT, PAYMENT OPTIONS AND DELIVERY SYSTEM

ANALYSIS:

Then, after the customer clicks on the add to cart button, the next page will show
the items which selected by the customer for buy, quantity of the products and the total
price of all items. The customer either can buy one by one or he/she also can buy
different type of products together. The customer also can remove an item from his cart
list by clicking the delete button provided. Then click on the checkout to make a payment
or cancel button to cancel the order.
 Or
der page of our website.

If the customer clicks on checkout button the next page will ask the customer to
fill up webpage form including, customer name, address, email, phone number, comment
about the product item. The customer also can choose the shipping and payment option
on our webpage for get the item from different shipping company with different shipping
charges. Then after choosing the shipping payment below of the page the item cart will be
display with total amount including the shipping charges. Then the customer has to click
on the I accept rules button before click the send order button. The customer also can
read the rules from the link provide there. Then after clicking on send order button our
webpage will ask for bank account and its details after confirm payment the customer
will get an email including the shopping items and estimated delivery time.
 Th
e order form and payment details page
F. CONTENT MANAGEMENT AND ADMIN PANEL:

The admin panel starts with the login option available in the bottom left of the
home page. After clicking the login option, a login name and password is required.

In this case the login name is given ICT and the password is 60068 for admin login.
Now by logging in we come to the admin panel.
 The top part of the admin page contains options like dashboard, pages, products
orders and tools. Each of this has a different functionality. All these are described below.

Dashboard: Entering the dashboard opens the page shown above. This page gives access
to all the products available. The admin can easily check the products, files,
pages/categories and orders.

If the admin wants, he can easily edit or delete the products and files from the
webpage through the dashboard.
Pages:

Here the admin can see all the pages or categories in the webpage. At the right
most of all the pages we see two options available. One is for editing and the other is for
deleting the page. Here we can also manage the sequence of the pages to be displayed on
the homepage.
 This is how a new page is created just clicking on the new page option. Here by
entering the name of the desired page, ading description and ticking the box beside
products we can add a new page or category. We can also fix the position of the page
according to our will.

Products:
 This option gives access to al the products available in the website. Here also we
can edit or delete the product with the options available at the most right part each
product. We can also edit the price and postion of the alreay uploaded product.

This is how we add a new product to the webpage. We need to add name,
description, price and category of the product to upload or add it successfully. A picture
of the product can also be added by clicking the add files option. We can also determine
the positio of the product in the selected category. The admin can also confirm the
product availability.
Orders:

This page shows all the orders pending to be confirmed. Admin can also check the
delivery status though this. The order status can be edited and deleted via this page. Here
as we can see, options like pending, shipping, new shipping, payment, new payment are
available. All these can be controlled by the admin through this page.
Tools: This option is to change the language used in the webpages. This is also meant to
be controlled by the admin only. The admin can change the language according to his
demands and needs.

At the end it can be said that the admin page is self-sufficient to manage the whole
website. The admin panel is also very easy to handle and all the information regarding the
products, orders and shipment can be professionally handled through it. Thus the admin
page, addition and change in products are well organized in this website and is so
successful in fulfilling the demands of the website and the project as well.

G. VIEWPOINT OF A USER:

For a good and reliable website, the first impression from the website to customer
is very important. To give a better view to user we use small number of colours and easily
under stable fonts. Backgrounds and are also very clear that give the customer a better
view. We use very high-quality photographs of our product that the customer can easily
understand what product it is. Our website also has search option on home page which
can be help customer to easily search for any product. Our website is simply designed
website which will help customers to easily see the description and product items.

In Our website, every content is concise and organized. In the homepage, we have
provided all the information about our webpage and products. We tested our website that
everything works perfectly, including links and order sheets. The contact information also
correct that will help the customer to easily contact if any inquiries. The transaction is
also very reliable and secure. The payment and delivery method is very easy and simple.
At last we can say our website is a user friendly website and we hope viewpoint of our
website will give the customer a good impression.
H. CODING AND DATABASE:

Examples of some coding used are provided: (admin page)

Footer Coding:
<?php
if( !defined( 'ADMIN_PAGE' ) )
exit;
?>
<div id="foot">
<div class="back">
<a href="javascript:history.back();">&laquo; <?php echo
$GLOBALS['lang']['back']; ?></a> <a href="./?sLang=<?php echo
LANGUAGE; ?>" target="_blank"><?php echo $lang['homepage']; ?></a>
</div>
</div>
</div>
</div>
</body>
</html>

Header Coding:
<?php
if( !defined( 'ADMIN_PAGE' ) )
 exit;
?><!DOCTYPE HTML>
<html lang="<?php echo $config['admin_lang']; ?>">
<head>
<title><?php echo $lang['Admin'].' - '.$config['title']; ?></title>
<meta http-equiv="Content-Type" content="text/html; charset=<?php echo
$config['charset']; ?>" />
<meta name="Robots" content="noindex, nofollow, noarchive" />
<meta name="Description" content="" />
<meta name="Keywords" content="" />
<meta name="Generator" content="Quick.Cart v<?php echo $config['version']; ?
>" />
<link rel="stylesheet" href="<?php echo $config['dir_templates']; ?
>admin/style.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $config['dir_plugins'] ?>valums-file-
uploader/client/fileuploader.css" type="text/css" />
<script src="<?php echo $config['dir_plugins']; ?>jquery.min.js"></script>
<script src="<?php echo $config['dir_core']; ?>common.js"></script>
<script src="<?php echo $config['dir_core']; ?>common-admin.js"></script>
<script src="<?php echo $config['dir_libraries']; ?>quick.form.js"></script>
<script src="<?php echo $config['dir_plugins']; ?>lert.js"></script>
<script>
var aCF = {
'sWarning' : '<?php echo $lang['cf_no_word']; ?>',
'sEmail' : '<?php echo $lang['cf_mail']; ?>',
'sTooShort' : '<?php echo $lang['cf_txt_to_short']; ?>',
'sToSmallValue' : '<?php echo $lang['cf_to_small_value']; ?>',
'sFloat' : '<?php echo $lang['cf_wrong_value']; ?>',
'sInt' : '<?php echo $lang['cf_wrong_value']; ?>'
 };
var delShure = "<?php echo $lang['Operation_sure_delete']; ?>";
var confirmShure = "<?php echo $lang['Operation_sure']; ?>";
var yes = "<?php echo $lang['yes']; ?>";
var no = "<?php echo $lang['no']; ?>";
var Cancel = "<?php echo $lang['Cancel']; ?>";
var Yes = "<?php echo $lang['Yes']; ?>";
var YesWithoutFiles = "<?php echo $lang['Yes_without_files']; ?>";
var aDelTxt = Array( Yes, YesWithoutFiles );
var sVersion = '<?php echo VERSION; ?>';
var sExtNotice = '<?php echo $config['admin_lang'] == 'pl' ? 'Ta funkcjonalno
nie wystpuje w tym narzdziu.<br />Opcja ta i wiele innych znajduje si w
narzdziu
<a href="http://opensolution.org/?p=Quick.Cart_editions"
target="_blank">Quick.Cart.Ext</a>' : 'This functionality has extended version or
is not included in this script.<br />You can get this functionality and much more if
you will buy <a href="http://opensolution.org/?p=Quick.Cart_editions"
target="_blank">Quick.Cart.Ext</a>'; ?>';
var sExtDemo = '<?php echo $config['admin_lang'] == 'pl' ? 'Zobacz demo ' :
'See demo '; ?>';
</script>
</head>

Menu Coding:
<?php
if( !defined( 'ADMIN_PAGE' ) )
exit;
?>
<body>
 <div id="container">
<div id="header">
<div id="menuTop">
<form action="" method="get" id="searchPanel">
<fieldset>
<input type="hidden" name="p" value="search" />
<input type="text" name="sPhrase" value="<?php echo $sPhrase; ?>"
class="input" size="25" />
<select name="iTypeSearch"><?php echo
throwSelectFromArray( Array( 1
=> $lang['Pages'], 2 => $lang['Products'], 3 => $lang['Orders'] ), $iTypeSearch ); ?
></select>
<input type="submit" value="<?php echo $lang['search']; ?> &raquo;" />
</fieldset>
</form>
<ul id="extend" class="main-menu submenu">
<li class="settings"><a href="#"><img
src="templates/admin/img/settings.png" alt="<?php echo $lang['Settings']; ?>"
/></a>
<ul>
<li><a href="?p=tools-config"><?php echo $lang['Settings']; ?></a></li>
<li><a href="http://opensolution.org/?
p=download&sDir=Quick.Cart"><?php echo $lang['Extend']; ?></a></li>
<li><a href="?p=logout"><?php echo $lang['log_out']; ?></a></li>
</ul>
</li>
</ul>
</div>
<div id="logoOs" class="submenu">
 <!-- Don't delete or hide OpenSolution logo and links to
www.OpenSolution.org -->
<a href="http://opensolution.org/" target="_blank"><img src="<?php echo
$config['dir_templates']; ?>admin/img/logo_os.png" alt="OpenSolution.org"
/></a>
<ul>
<li><a href="http://opensolution.org/support-free"><?php echo
$lang['Support']; ?></a></li>
<li><a href="<?php echo $config['manual_link']; ?>start"><?php echo
$lang['Manual']; ?></a></li>
<li><a href="http://opensolution.org/?p=licenses"><?php echo
$lang['License']; ?></a></li>
</ul>
</div>
<div class="clear"></div>
<!-- menu under_logo start -->
<div id="menuBar">
<ul class="main-menu">
<li<?php echo ( isset( $aSelectMenu['bDashboard'] ) ? ' class="selected"' :
null ); ?>><a href="?p="><span class="dashboard"><?php echo
$lang['Dashboard']; ?></span></a></li>
<li onmouseover="return buttonClick( event, 'pages' );
buttonMouseover( event, 'pages' );"<?php echo ( isset( $aSelectMenu['bPages'] ) ?
' class="selected"' : null ); ?>><a href="?p=pages-list"><span class="pages"><?
php echo $lang['Pages']; ?></span></a></li>
<li onmouseover="return buttonClick( event, 'products' ); buttonMouseover(
event, 'products' );"<?php echo ( isset( $aSelectMenu['bProducts'] ) ? '
class="selected"' : null ); ?>><a href="?p=products-list"><span
class="products"><?php echo $lang['Products']; ?></span></a></li>
 <li onmouseover="return buttonClick( event, 'orders' );
buttonMouseover( event, 'orders' );"<?php echo
( isset( $aSelectMenu['bOrders'] ) ? ' class="selected"' : null ); ?>><a href="?
p=orders-list"><span class="orders"><?php echo $lang['Orders']; ?
></span></a></li>
<!-- main menu -->
<li onmouseover="return buttonClick( event, 'tools' );
buttonMouseover( event, 'tools' );"<?php echo ( isset( $aSelectMenu['bTools'] ) ? '
class="selected"' : null ); ?>><a href="#"><span class="tools"><?php echo
$lang['Tools']; ?></span></a></li>
</ul>
<?php echo listLanguagesMenu( ); ?>
</div>
<!-- submenu under_logo start -->
<div id="pages" class="menu" onmouseover="menuMouseover( event );">
<a href="?p=pages-form"><?php echo $lang['New_page']; ?></a>
<!-- menu pages -->
</div>
<div id="tools" class="menu" onmouseover="menuMouseover( event );">
<a href="?p=lang-list"><?php echo $lang['Languages']; ?></a>
<a href="?p=lang-form"><?php echo $lang['New_language']; ?></a>
<!-- menu tools -->
</div>
<div id="products" class="menu" onmouseover="menuMouseover( event );">
<a href="?p=products-form"><?php echo $lang['New_product']; ?></a>
<!-- menu products -->
</div>
<div id="orders" class="menu" onmouseover="menuMouseover( event );">
<a href="?p=orders-list&amp;iStatus=1"><?php echo
$lang['Orders_pending']; ?></a>
<span class="sep"></span>
<a href="?p=shipping-list"><?php echo $lang['Shipping']; ?></a>
<a href="?p=shipping-form"><?php echo $lang['New_shipping']; ?></a>
<span class="sep"></span>
<a href="?p=payments-list"><?php echo $lang['Payment_methods']; ?></a>
<a href="?p=payments-form"><?php echo $lang['New_payment_method']; ?
></a>
<!-- menu orders -->
</div>
<!-- menu under_logo end -->
</div>
<div class="clear"></div>
<div id="body">

Order Menu Coding:

<?php
if( !defined( 'ADMIN_PAGE' ) )
exit( 'Script by OpenSolution.org' );
$oOrder = new OrdersAdmin( );
$oOrder->generateCache( );
if( isset( $_POST['sOption'] ) ){
$oOrder->saveOrders( $_POST );
$sOption = 'save';
}
$aSelectMenu['bOrders'] = true;
require_once DIR_TEMPLATES.'admin/_header.php'; // include headers
require_once DIR_TEMPLATES.'admin/_menu.php'; // include menu
if( isset( $sOption ) ){
 echo '<div id="msg">'.$lang['Operation_completed'].'</div>';
}
$sStatusSelect = throwSelectFromArray( $oOrder->throwStatus( ),
isset( $iStatus ) ? $iStatus : null );
?>
<script type="text/javascript">
AddOnload( function(){ gEBI( 'search' ).sPhrase.focus( ); } );
</script>
<h1><?php echo $lang['Orders']; ?><a href="<?php echo
$config['manual_link']; ?>instruction#1.18" title="<?php echo $lang['Manual']; ?
>" target="_blank"></a></h1>
<form action="" method="get" id="search">
<fieldset>
<input type="hidden" name="p" value="<?php echo $p; ?>" />
<input type="text" name="sPhrase" value="<?php echo $sPhrase; ?>"
class="input" size="50" />
<select name="iStatus">
<option value=""><?php echo $lang['All_status']; ?></option>
<?php echo $sStatusSelect; ?>
</select>
&nbsp;&nbsp;
<?php echo $lang['Orders_search_products']; ?>
<?php echo throwYesNoBox( 'iProducts', isset( $iProducts ) ? $iProducts :
null ); ?>
<input type="submit" value="<?php echo $lang['search']; ?> &raquo;" />

</fieldset>
</form>
<?php
// get list of orders
$sOrdersList = $oOrder->listOrdersAdmin( );
// display orders in the table list
if( isset( $sOrdersList ) ){
?>
<form action="?p=<?php echo $p; ?><?php if( isset( $sPhrase ) ) echo
'&amp;sPhrase='.$sPhrase; ?><?php if( isset( $iStatus ) ) echo '&amp;iStatus='.
$iStatus; ?><?php if( isset( $iProducts ) ) echo '&amp;iProducts='.$iProducts; ?>"
method="post">
<fieldset>
<table id="list" class="orders" cellspacing="1">
<thead>
<tr class="save">
<td colspan="5" class="pages">
<?php echo $lang['Pages']; ?>: <ul><?php echo $sPages; ?></ul>
</td>
<th colspan="3">
<select name="iStatus">
<option><?php echo $lang['Change_status']; ?></option>
<?php echo $sStatusSelect; ?>
</select>
<input type="submit" name="sOption" value="<?php echo
$lang['save']; ?> &raquo;" />
</th>
</tr>
<tr>
<td class="id"><?php echo $lang['Id']; ?></td>
<td class="name"><?php echo $lang['First_and_last_name']; ?></td>
<td class="email"><?php echo $lang['Email']; ?></td>
 <td class="phone"><?php echo $lang['Telephone']; ?></td>
<td class="company"><?php echo $lang['Company']; ?></td>
<td class="date"><?php echo $lang['Date']; ?></td>
<td class="status"><?php echo $lang['Status']; ?></td>
<td class="options">&nbsp;</td>
</tr>
</thead>
<tfoot>
<tr class="save">
<td colspan="5" class="pages">
<?php echo $lang['Pages']; ?>: <ul><?php echo $sPages; ?></ul>
</td>
<th colspan="3">
<input type="submit" name="sOption" value="<?php echo
$lang['save']; ?> &raquo;" />
</th>
</tr>
</tfoot>
<tbody>
<?php echo $sOrdersList; ?>
</tbody>
</table>
</fieldset>
</form>
<?php
}
else{
echo '<div id="msg" class="error">'.$lang['Data_not_found'].'</div>';
}
 require_once DIR_TEMPLATES.'admin/_footer.php'; // include footer
?>

Some samples of Icons from database are provided: (admin page)

I. CONCLUSION:

Surely Technology have very elaborated role in our daily day life. The biggest
proof is present at our surroundings. Just having a look around at our surroundings will
be enough to prove the involvement of technology in everyday lives. Shopping, banking,
traveling, stocking, literature, entertainment, public sector, private sector, almost
everywhere the most drastic alteration in our lives since the past few years is the
penetration and massive progress of the Information technology which has become more
of a necessity for us now.So, we can say online shopping is the blessing of technology.

Importance of developing website is very deep in our life as well as our

professional life. Nowadays many companies have requirement having at least a little bit
of knowledge on web development topics like HTML, CSS. We have learned how to
developed website in difference field, Now we can apply our self to making website in
future, if necessary. Hopefully that will help in our professional life, and also we can
develop website in different fields.