Vous êtes sur la page 1sur 33

STI College Global

City

Online Shop for Vikings Clothing


Incorporation

In partial fulfillment of the


requirements of the
Advance Database and Software
Engineering
Submitted
by:
Legaspi, John Ray A.
(WEBPROG BSIT504)
Panao, Patrick P.
(WEBPROG BSIT504)
Mendoza, Josafat
B.

(WEBPROG BSIT504)

Submitted to:
Ms. Rachel
Brequillo
(IT PROFESSOR)

WEB LOGO

Scope:

Selling
Advertisement
Blogging
Delivery

This site focus mainly on selling women/mens clothing and to advertise other
clothing coompany and sponsor to this website. This site can create blog for
the customer to know what updates or new products release in the company
it takes less effort to the customer to go to the shop because this site have
an delivery where the customer pay through online

Purpose:

To
To
To
To

save time to Customer


save effort to the Customer
secure Customer payments
make easy and reliable payments methods

This site purpose is to help the Customer To save time and effort when
shopping their needs for clothing and to make an easy and reliable methods
for the other company to advertise their product to this site.

Features:

About This page contains information about the company


Shop-This page contains all the products of the company
Contact-This page contains all contacts that the company have
Blog-This page contains all the administrator blog about the company
Home-This page contains summarization of all the features of the
website

SHOP

<!DOCTYPE html>

</li>

<html>

<li>

<head>
<a href="contact.html">Contact</a>

<meta charset="UTF-8">

</li>

<title>Work Vikings online shop


Website </title>

</ul>

<link rel="stylesheet"
href="css/style.css" type="text/css">

</div>
</div>

<script
src="http://code.jquery.com/jquery1.11.3.min.js"></script>

</div>
<CENTER>

</head>

<div id="shopcart">

<body>
<div id="header">

<ul id="show-cart">

<div>
<a href="index.html"
id="logo"><img src="images/logo.jpg"
alt="LOGO"></a>

<li>MY SHOPPING CART</li>


</ul>

<div id="navigation">
<ul>
<li>

<div id="cart">You have <span


id="count-cart">X</span> items in your
cart</div>
<div id="cart1">Total Cart:<span
id="total-cart"></span>Pesos</div>

<a href="index.html">Home</a>
</li>
<li
class="selected">

<button id="clear-cart">Clear
Cart</button>
</CENTER>

<a href="work.html">Shop</a>
</li>
<li>

</div>
<div id="page">
<div id="contents">

<a href="blog.html">Blog</a>

<div>
</li>
<li>

<h5>Tshirts</h5>
<ul

<a href="about.html">About</a>

id="gallery">

<li>

<a href="work.html"><img
src="images/t1.png" alt="Illustration"></a>

<h4>Shoes T-shirt</h4>

<p>

<center>
<h4>Scientist T-shirt</h4>
1500 Pesos
<p>
<br>

<a class="add-to-cart"
href="#" data-name="Shoe T-shirt" dataprice="1500">ADD CART</a>

<center>

</br>

1500 Pesos

<br>

</center>

<a class="add-to-cart"
href="#" data-name="Scientist T-shirt" dataprice="1500">ADD CART</a>
</p>
</br>

</li>
<li>

<a href="work.html"><img
src="images/t3.png" alt="Illustration"></a>

</center>

<h4>Pirate T-shirt</h4>

<p>

</p>
</li>
<li>

<a href="work.html"><img
src="images/t2.png" alt="Illustration"></a>

<center>

href="#" data-name="Doctor T-shirt" dataprice="1500">ADD CART</a>

1500 Pesos

</br>

<br>

<a class="add-to-cart"
href="#" data-name="Pirate T-shirt" dataprice="1500">ADD CART</a>
</center>
</br>

</p>
</li>

</center>

<li>

<a href="work.html"><img
src="images/t5.png" alt="Illustration"></a>

</p>
</li>

<h4>Zombie T-shirt</h4>

<li>
<p>
<a href="work.html"><img
src="images/t4.png" alt="Illustration"></a>

<h4>Doctor T-shirt</h4>
<center>
<p>
1500 Pesos

<br>
<center>

1500 Pesos

<br>

<a class="add-to-cart"

<a class="add-to-cart"
href="#" data-name="Zombie T-shirt" dataprice="1500">ADD CART</a>

</br>

<a href="work.html"><img
src="images/t7.png" alt="Illustration"></a>

</center>

<h4>Girl T-shirt</h4>

<p>

</p>
</li>
<li>

<center>
<a href="work.html"><img
src="images/t6.png" alt="Illustration"></a>
1500 Pesos
<h4>Vikings T-shirt</h4>
<br>
<p>
<a class="add-to-cart"
href="#" data-name="Girl T-shirt" dataprice="1500">ADD CART</a>
<center>
</br>
1500 Pesos

<br>
</center>
<a class="add-to-cart"
href="#" data-name="Vikings T-shirt" dataprice="1500">ADD CART</a>
</p>

</br>

</li>
<li>

<a href="work.html"><img
src="images/t8.png" alt="Illustration"></a>

</center>

</p>

<h4>Eng. T-shirt</h4>
</li>
<li>

<p>

displayCart();
});

<center>
$("#clear-cart").click(function(event){
window.alert("THANK YOU FOR BUYING
TO OUR SHOP PLEASE COME AGAIN! \n YOUR
ORDER WILL BE PROCESS AND DELIVERED");

1500 Pesos

<br>

shoppingCart.clearCart();
displayCart();

<a class="add-to-cart"
href="#" data-name="Eng. T-shirt" dataprice="1500">ADD CART</a>

});

function displayCart() {

</br>

var cartArray =
shoppingCart.listCart();
console.log(cartArray);
var output = "";

</center>

for (var i in cartArray) {


output += "<li>"
</p>

+cartArray[i].name
</li>
</ul>

<script
src="js/shoppingCart.js"></script>
<script>

+" <input class='item-count'


type='number' data-name='"
+cartArray[i].name
+"'
value='"+cartArray[i].count+"' >"
+" x "+cartArray[i].price
+" = "+cartArray[i].total

$(".add-to-cart").click(function(event){
event.preventDefault();

+" <button class='plus-item'


data-name='"

var name = $(this).attr("dataname");


var price = Number($
(this).attr("data-price"));

+cartArray[i].name+"'>+</button>"
+" <button class='subtract-item'
data-name='"

shoppingCart.addItemToCart(name,
price, 1);

+cartArray[i].name+"'></button>"

+" <button class='delete-item'


data-name='"

shoppingCart.addItemToCart(name,
0, 1);
displayCart();

+cartArray[i].name+"'>X</button>"

});

+"</li>";
}

$("#show-cart").html(output);

$("#show-cart").on("change", ".itemcount", function(event){


var name = $(this).attr("dataname");

$("#countcart").html( shoppingCart.countCart() );
$("#totalcart").html( shoppingCart.totalCart() );

var count = Number($(this).val());


shoppingCart.setCountForItem(name,
count);
displayCart();

});
$("#show-cart").on("click", ".deleteitem", function(event){
var name = $(this).attr("dataname");

shoppingCart.removeItemFromCartAll(name);

displayCart();

</script>

displayCart();
});

$("#show-cart").on("click", ".subtractitem", function(event){


var name = $(this).attr("dataname");

<div
id="pagination">
<div>

<a href="#">Prev</a> <a href="#"


class="selected">1</a> <a href="#">2</a>
<a href="#">3</a> <a href="#">4</a> <a
href="#">5</a> <a href="#">6</a> <a
href="#" class="last-child">Next</a>
</div>

shoppingCart.removeItemFromCart(name);

</div>

displayCart();
});

</div>
</div>
<div id="footer">

$("#show-cart").on("click", ".plus-item",
function(event){
var name = $(this).attr("dataname");

<div id="connect">
<a
href="http://freewebsitetemplates.com/go/face
book/" target="_blank" class="facebook"></a>
<a

href="http://freewebsitetemplates.com/go/twit
ter/" target="_blank" class="twitter"></a> <a
href="http://freewebsitetemplates.com/go/goo
gleplus/" class="googleplus"></a> <a
href="http://www.freewebsitetemplates.com/m
isc/contact/" target="_blank"
class="mail"></a>
</div>
<ul
class="navigation">
<li>
<a
href="index.html">Home</a>
</li>
<li
class="selected">
<a
href="work.html">Work</a>
</li>
<li>
<a
href="blog.html">Blog</a>
</li>
<li>
<a
href="about.html">About</a>
</li>
<li>
<a
href="contact.html">Contact</a>
</li>
</ul>
<p class="uppercase">
Copyright
2011. Company Name. All Rights Reserved.
</p>
</div>
</div>

</body>
</html>

HOMEPAGE

<!DOCTYPE html>

</li>

<!-- Website template by


freewebsitetemplates.com -->

<li>

<html>

<a href="contact.html">Contact</a>

<head>

</li>
<meta charset="UTF-8">

</ul>

<title>Mad Illustrator's Portfolio


Website Template</title>

</div>
</div>

<link rel="stylesheet"
href="css/style.css" type="text/css">

</div>

</head>

<div id="page">

<body>

<div id="contents">
<div id="header">
<div>

<div id="featured">

<a href="index.html"
id="logo"><img src="images/logo.jpg"
alt="LOGO"></a>

<h5>New TShirt Arrival</h5>


<ul>

<div id="navigation">

<li>

<ul>
<li

<a href="work.html"><img
src="images/t1.png" alt="Illustration"></a>

class="selected">

<a href="index.html">Home</a>
<h4>Scientist T-shirt</h4>
</li>
<li>

<p>

<a href="work.html">Shop</a>

1500pesos

</li>
<li>

</p>
</li>

<a href="blog.html">Blog</a>

<li>
</li>
<li>

<a href="about.html">About</a>

<a href="work.html"><img
src="images/t2.png" alt="Illustration"></a>

<h4>Shoes T-shirt</h4>

<div>
<p>
<h5>Latest Blog Entries</h5>
1500pesos

<ul
class="blogs">

</p>
</li>

<li>

<li>
<a href="blog.html"> <img
src="images/smoker-small.jpg" alt="Img">
<a href="work.html"><img
src="images/t3.png" alt="Illustration"></a>
<p>
<h4>Pirate T-shirt</h4>
<span>01 March
2015</span> <b> Vikings Clothing SM North
Grand Opening</b> After strong demand and
days of hard work, Finally we launch the first
ever Vikings Clothing SM North Edsa store n
Metro Manila

<p>

1500pesos

</p>

</p>
</li>

</a>

<li>
</li>
<a href="work.html"><img
src="images/t4.png" alt="Illustration"></a>
<li>
<h4>Doctor T-shirt</h4>
<a href="blog.html"> <img
src="images/woman-small.jpg" alt="Img">
<p>
<p>
1500pesos

</p>
</li>
</ul>
</div>
<div id="articles">

<span>27 February
2015</span> <b>New Tees will be available
this August 8, 2015! Visit our stores!</b> New
Tagger in Bubblegum Blue tee and Cruiser
Black / White Raglan coming out this June 28!

<a href="work.html"><img
src="images/cook-small.jpg" alt="Img"></a>

</p>

</li>

</a>

</ul>
</li>
</ul>

<h5>UPCOMMING DESIGN</h5>
<ul

</div>

class="illustrations">

<div>
<li>
<h5>UPCOMMING DESIGN</h5>
<ul
class="illustrations">

<li>

<a href="work.html"><img
src="images/viking-small.jpg" alt="Img"></a>

</li>

<li>

<a href="work.html"><img
src="images/zombie-small.jpg" alt="Img"></a>

</li>

<li>

<a href="work.html"><img
src="images/caveman-small.jpg"
alt="Img"></a>

</li>

<li>

<a href="work.html"><img
src="images/pirate-small.jpg" alt="Img"></a>

</li>

<li>

<a href="work.html"><img
src="images/doctor-small.jpg" alt="Img"></a>

</li>

<li>

<a href="work.html"><img
src="images/vendor-small.jpg" alt="Img"></a>

</li>

<li>

<a href="work.html"><img
src="images/engineer-small.jpg"
alt="Img"></a>

</li>
</ul>

</div>

</li>

</div>

</ul>

</div>

<p class="uppercase">

<div id="footer">

Copyright
2011. Company Name. All Rights Reserved.

<div id="connect">
</p>
<a
href="http://freewebsitetemplates.com/go/face
book/" target="_blank" class="facebook"></a>
<a
href="http://freewebsitetemplates.com/go/twit
ter/" target="_blank" class="twitter"></a> <a
href="http://freewebsitetemplates.com/go/goo
gleplus/" target="_blank"
class="googleplus"></a> <a
href="http://www.freewebsitetemplates.com/m
isc/contact/" target="_blank"
class="mail"></a>

<p>

</p>
</div>
</div>
</body>
</html>

</div>
<ul
class="navigation">
<li
class="selected">
<a
href="index.html">Home</a>
</li>
<li>
<a
href="work.html">Work</a>
</li>
<li>
<a
href="blog.html">Blog</a>
</li>
<li>
<a
href="about.html">About</a>
</li>
<li>
<a
href="contact.html">Contact</a>

ABOUT

<!DOCTYPE html>

</li>

<!-- Website template by


freewebsitetemplates.com -->

<li>

<html>

<a href="contact.html">Contact</a>

<head>

</li>
<meta charset="UTF-8">

</ul>

<title>About - Mad Illustrator's


Portfolio Template</title>

</div>
</div>

<link rel="stylesheet"
href="css/style.css" type="text/css">

</div>

</head>

<div id="page">

<body>

<div id="contents">
<div id="header">

<div id="about">

<div>

<h5>About The

<a href="index.html"
id="logo"><img src="images/logo.jpg"
alt="LOGO"></a>

Store</h5>
<img
src="images/artist.png" alt="About">

<div id="navigation">

<h4>HISTORY
OF THE STORE</h4>

<ul>
<li>

<a href="index.html">Home</a>

<p>
Since
2009, Vikings Clothing has been creating
ambiguous and brazen lifestyle shirts with
dreams dominating the world.

</li>
<li>

<a href="work.html">Work</a>
</li>
<li>

<a href="blog.html">Blog</a>
</li>
<li
class="selected">

<a href="about.html">About</a>

What
started as a grassroots operation of one, is
now ran by a twenty man crew known as Team
Automatic. At the center of it all is
<strong>Legaspi Johnray</strong>, the
brands lead designer, who was named as one
of the 20 Best Young Designers by BluPrint
Magazine. Nimor, aside from starting Vikings
Clothing, has worked with big names and
brands such as Nicki Minaj, David Hasselhoff,
Electric Zombie, Artwork, Team Manila,
Samsung, Tattoo, and Ford.
</p>
<p>
Vikings
Clothing draws inspiration from people,
culture, and the different scenes that they

indulge in ; from the the underground to the


colloquial, to the streets and the music scene.

<li>
<a

Vikings Clothing greatly embodies the spirit of


pop-punk and post-hardcore rock. The brand
has catapulted itself into the spotlight by
enlisting artists such as New Found Glory, A
Day To Remember, Mayday Parade, Forever the
Sickest Kids, Miss May I, Silverstein, Arcadia,
Chicosci, Jejaview, Urbandub, and many others
to rep the brand on and off stage.

href="blog.html">Blog</a>
</li>
<li
class="selected">
<a
href="about.html">About</a>
</li>

Currently, there are three main branches in the


country: J.Centre Mall in Mandaue city,
Borromeo Arcade in Downtown Cebu and in SM
North EDSA, Quezon city.

<li>
<a
href="contact.html">Contact</a>

The brands vision of hand-made worldwide


domination is slowly coming to fruition, one
shirt at a time.

</li>
</ul>

</p>

<p class="uppercase">
Copyright
2011. Company Name. All Rights Reserved.
</p>

</div>
</div>

</div>
</div>

<div id="footer">
<div id="connect">

</body>
</html>

</div>
<ul
class="navigation">
<li>
<a
href="index.html">Home</a>
</li>
<li>
<a
href="work.html">Work</a>
</li>

BLOG

<!DOCTYPE html>

</li>

<!-- Website template by


freewebsitetemplates.com -->

<li>

<html>

<a href="contact.html">Contact</a>

<head>

</li>
<meta charset="UTF-8">

</ul>

<title>Blog - Mad Illustrator's Portfolio


Website Template</title>

</div>
</div>

<link rel="stylesheet"
href="css/style.css" type="text/css">

</div>

</head>

<div id="page">

<body>

<div id="contents">
<div id="header">

<div>

<div>

<div

<a href="index.html"
id="logo"><img src="images/logo.jpg"
alt="LOGO"></a>

id="main">

<h5>Latest Blog Entries</h5>

<div id="navigation">

<ul
id="blogs">

<ul>
<li>

<li>
<a href="index.html">Home</a>
</li>

<h4>Vikings Clothing SM North


Grand Opening</h4>

<li>
<span>29 February
2015</span>
<a href="work.html">Work</a>
</li>

<p>

<li
class="selected">

<a href="blog.html">Blog</a>
</li>
<li>

<a href="about.html">About</a>

After strong demand and days


of hard work, Finally we launch the first ever
Vikings Clothing SM North Edsa store n Metro
Manila. It is yet our biggest store we launched
and now its open to all Doodlers in Manila. It
is located at the 3rd level of SM North Edsa
Annex bldg.

</p>

<a href="blog.html"
class="more">Read More...</a>
<a href="blog.html"
class="more">Read More...</a>

</li>
</ul>

</li>

</div>
<div

<li>

id="sidebar">

<h4>New Tees will be available


this August 8, 2015! Visit our stores!</h4>

<h5>Popular Posts</h5>
<ul
class="posts">

<span>29 February
2015</span>
<li>
<p>

Nick Automatic North Store

Unit 2D, 61 Kamuning

<a href="blog.html">Vikings
Clothing SM North Grand Opening</a> 29
February 2015

</li>

rd. Quezon city


<li>

Vikings Clothing J
Centre Mall

<a href="blog.html">New Tees


will be available this August 8, 2015! Visit our
stores!</a> 29 February 2015

3rd level, J Centre Mall,


Mandaue city, Cebu

</li>

</ul>
Vikings Clothing
Doodle Store

</div>
</div>

D12, Borromeo Arcade


bldg. F Ramos st. Cebu city

</div>
<div id="footer">

</p>

<div id="connect">
<a
href="http://freewebsitetemplates.com/go/face

book/" target="_blank" class="facebook"></a>


<a
href="http://freewebsitetemplates.com/go/twit
ter/" target="_blank" class="twitter"></a> <a
href="http://freewebsitetemplates.com/go/goo
gleplus/" class="googleplus"></a> <a
href="http://www.freewebsitetemplates.com/m
isc/contact/" target="_blank"
class="mail"></a>
</div>
<ul
class="navigation">
<li>
<a
href="index.html">Home</a>
</li>
<li>
<a
href="work.html">Work</a>
</li>
<li
class="selected">
<a
href="blog.html">Blog</a>
</li>
<li>
<a
href="about.html">About</a>
</li>
<li>
<a
href="contact.html">Contact</a>
</li>
</ul>
<p class="uppercase">
Copyright
2011. Company Name. All Rights Reserved.
</p>
A

</div>
</div>
</body>
</html>

CONTACT

<!DOCTYPE html>

<li
class="selected">

<!-- Website template by


freewebsitetemplates.com -->
<a href="contact.html">Contact</a>

<html>

</li>

<head>
</ul>

<meta charset="UTF-8">
</div>

<title>Contact - Mad Illustrator's


Portfolio Website Template</title>
<link rel="stylesheet"
href="css/style.css" type="text/css">

</div>
</div>
<div id="page">

</head>

<div id="contents">

<body>

<div id="contact">

<div id="header">
<div>

<h5>Contact</h5>

<a href="index.html"
id="logo"><img src="images/logo.jpg"
alt="LOGO"></a>

<h4>Get in
Touch with Me</h4>
<p>

<div id="navigation">

Unit

<ul>

2D, 61 Kamuning rd. Quezon city


<li>

</p>
<p>

<a href="index.html">Home</a>
</li>
<li>

<a href="work.html">Work</a>
</li>
<li>

Website: <a
href="http://www.freewebsitetemplates.com/"
>www.JohnrayLegaspi.com</a><br> Email: <a
href="http://www.freewebsitetemplates.com/m
isc/contact/">Johnraylegaspi2@gmail.com</a>
<br> Tel. No.:
<span>+44.12.3456.4456</span><br> <br>
Twitter: <a
href="http://freewebsitetemplates.com/go/twit
ter/">johnraylegaspi</a>
</p>

<a href="blog.html">Blog</a>
</div>

</li>
<li>

</div>
<div id="footer">

<a href="about.html">About</a>
</li>

<div id="connect">

<a
href="http://freewebsitetemplates.com/go/face
book/" target="_blank" class="facebook"></a>
<a
href="http://freewebsitetemplates.com/go/twit
ter/" target="_blank" class="twitter"></a> <a
href="http://freewebsitetemplates.com/go/goo
gleplus/" target="_blank"
class="googleplus"></a> <a
href="http://www.freewebsitetemplates.com/m
isc/contact/" target="_blank"
class="mail"></a>
</div>
<ul
class="navigation">
<li>
<a
href="index.html">Home</a>
</li>
<li>
<a
href="work.html">Work</a>
</li>
<li>
<a
href="blog.html">Blog</a>
</li>
<li>
<a
href="about.html">About</a>
</li>
<li
class="selected">
<a
href="contact.html">Contact</a>
</li>
</ul>
<p class="uppercase">
Copyright
2011. Company Name. All Rights Reserved.

</p>

</div>
</div>
</body>
</html>

JAVA SCRIPT CODES

//
***************************************************

for (var i in cart) {


if (cart[i].name === name) {

// Shopping Cart functions


cart[i].count += count;
saveCart();
var shoppingCart = (function () {
return;
// Private methods and properties
}
var cart = [];
}

function Item(name, price, count) {


this.name = name

console.log("addItemToCart:", name,
price, count);

this.price = price
this.count = count

var item = new Item(name, price, count);

cart.push(item);
saveCart();

function saveCart() {

};

localStorage.setItem("shoppingCart",
JSON.stringify(cart));
}

obj.setCountForItem = function (name,


count) {
for (var i in cart) {

function loadCart() {

if (cart[i].name === name) {

cart =
JSON.parse(localStorage.getItem("shoppingCar
t"));

cart[i].count = count;
break;
}

}
}

saveCart();

loadCart();
};

// Public methods and properties

obj.removeItemFromCart = function (name)


{ // Removes one item

var obj = {};


for (var i in cart) {
if (cart[i].name === name) { // "3" ===
obj.addItemToCart = function (name, price,
count) {

3 false

cart[i].count--; // cart[i].count --

for (var i in cart) {

if (cart[i].count === 0) {

totalCount += cart[i].count;

cart.splice(i, 1);

}
break;
}

return totalCount;
};

}
saveCart();

obj.totalCart = function () { // -> return total


cost

};
var totalCost = 0;
for (var i in cart) {

obj.removeItemFromCartAll = function
(name) { // removes all item name

totalCost += cart[i].price *
cart[i].count;
}

for (var i in cart) {


return totalCost.toFixed(2);
if (cart[i].name === name) {
};
cart.splice(i, 1);
break;
}

obj.listCart = function () { // -> array of


Items

var cartCopy = [];

saveCart();

console.log("Listing cart");

};

console.log(cart);
for (var i in cart) {
console.log(i);

obj.clearCart = function () {

var item = cart[i];

cart = [];

var itemCopy = {};

saveCart();

for (var p in item) {

itemCopy[p] = item[p];
}

obj.countCart = function () { // -> return


total count
var totalCount = 0;

itemCopy.total = (item.price *
item.count).toFixed(2);
cartCopy.push(itemCopy);
}

return cartCopy;
};

// ---------------------------return obj;
})();