webprog website

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 save time to Customer To save effort to the Customer To secure Customer payments To 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

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Work –Vikings online shop Website </title>

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

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

</head>

<body>

<div id="header">

<div>

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

<div id="navigation">

<ul>

<li>

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

</li>

<li class="selected">

<a href="work.html">Shop</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>

</div>

</div>

</div>

<CENTER>

<div id="shopcart">

<ul id="show-cart">

<li>MY SHOPPING CART</li>

</ul>

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

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

</CENTER>

</div>

<div id="page">

<div id="contents">

<div>

<h5>T-shirts</h5>

<ul id="gallery">

<li>

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

<h4>Scientist T-shirt</h4>

<p>

<center>

1500 Pesos

<br>

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

</br>

</center>

</p>

</li>

<li>


<h4>Shoes T-shirt</h4>

<p>

<center>

1500 Pesos

<br>

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

</br>

</center>

</p>

</li>

<li>


<h4>Pirate T-shirt</h4>

<p>

<center>

1500 Pesos

<br>

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

</br>

</center>

</p>

</li>

<li>


<h4>Doctor T-shirt</h4>

<p>

<center>

1500 Pesos

<br>

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

</br>

</center>

</p>

</li>

<li>


<h4>Zombie T-shirt</h4>

<p>

<center>

1500 Pesos

<br>

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

</br>

</center>

</p>

</li>

<li>


<h4>Vikings T-shirt</h4>

<p>

<center>

1500 Pesos

<br>

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

</br>

</center>

</p>

</li>

<li>


<h4>Girl T-shirt</h4>

<p>

<center>

1500 Pesos

<br>

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

</br>

</center>

</p>

</li>

<li>


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

<p>

<center>

1500 Pesos

<br>

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

</br>

</center>

</p>

</li>

</ul>

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

<script>

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

event.preventDefault();

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

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

shoppingCart.addItemToCart(name, price, 1);

displayCart();

});

$("#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");

shoppingCart.clearCart();

displayCart();

});

function displayCart() {

var cartArray = shoppingCart.listCart();

console.log(cartArray);

var output = "";

for (var i in cartArray) {

output += "<li>"

+cartArray[i].name

+" <input class='item-count' type='number' data-name='"

+cartArray[i].name

+"' value='"+cartArray[i].count+"' >"

+" x "+cartArray[i].price

+" = "+cartArray[i].total

+" <button class='plus-item' data-name='"

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

+" <button class='subtract-item' data-name='"

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

+" <button class='delete-item' data-name='"

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

+"</li>";

}

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

$("#count-cart").html( shoppingCart.countCart() );

$("#total-cart").html( shoppingCart.totalCart() );

}

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


shoppingCart.removeItemFromCartAll(name);

displayCart();

});

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


shoppingCart.removeItemFromCart(name);

displayCart();

});

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


shoppingCart.addItemToCart(name, 0, 1);

displayCart();

});

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


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

shoppingCart.setCountForItem(name, count);

displayCart();

});

displayCart();

</script>

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

</div>

</div>

</div>

<div id="footer">

<div id="connect">

<a href="http://freewebsitetemplates.com/go/facebook/" target="_blank" class="facebook"></a> <a href="http://freewebsitetemplates.com/go/twitter/" target="_blank" class="twitter"></a> <a href="http://freewebsitetemplates.com/go/googleplus/" class="googleplus"></a> <a href="http://www.freewebsitetemplates.com/misc/contact/" target="_blank" class="mail"></a>

</div>

<ul class="navigation">

<li>


</li>


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

</li>

<li>


</li>

<li>


</li>

<li>


</li>

</ul>

<p class="uppercase">

Copyright © 2011. Company Name. All Rights Reserved.

</p>

</div>

</div>

</body>

</html>

HOMEPAGE

<!DOCTYPE html>



<html>

<head>


<title>Mad Illustrator's Portfolio Website Template</title>


</head>

<body>

<div id="header">

<div>



<ul>



</li>

<li>

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

</li>

<li>


</li>

<li>


</li>

<li>


</li>

</ul>

</div>

</div>

</div>

<div id="page">

<div id="contents">

<div id="featured">

<h5>New T-Shirt Arrival</h5>

<ul>

<li>


<h4>Scientist T-shirt</h4>

<p>

1500pesos

</p>

</li>

<li>


<h4>Shoes T-shirt</h4>

<p>

1500pesos

</p>

</li>

<li>


<h4>Pirate T-shirt</h4>

<p>

1500pesos

</p>

</li>

<li>


<h4>Doctor T-shirt</h4>

<p>

1500pesos

</p>

</li>

</ul>

</div>

<div id="articles">

<div>

<h5>Latest Blog Entries</h5>

<ul class="blogs">

<li>

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

<p>

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

</a>

</li>

<li>

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

<p>

<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!

</p>

</a>

</li>

</ul>

</div>

<div>

<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/cook-small.jpg" alt="Img"></a>

</li>

</ul>

<h5>UPCOMMING DESIGN</h5>

<ul class="illustrations">

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

</div>

</div>

<div id="footer">

<div id="connect">

<a href="http://freewebsitetemplates.com/go/facebook/" target="_blank" class="facebook"></a> <a href="http://freewebsitetemplates.com/go/twitter/" target="_blank" class="twitter"></a> <a href="http://freewebsitetemplates.com/go/googleplus/" target="_blank" class="googleplus"></a> <a href="http://www.freewebsitetemplates.com/misc/contact/" target="_blank" class="mail"></a>

</div>




</li>

<li>


</li>

<li>


</li>

<li>


</li>

<li>


</li>

</ul>



</p>

<p>

</p>

</div>

</div>

</body>

</html>

<!DOCTYPE html>


<html>

<head>


<title>About - Mad Illustrator's Portfolio Template</title>


</head>

<body>

<div id="header">

<div>



<ul>

<li>


</li>

<li>


</li>

<li>


</li>



</li>

<li>


</li>

</ul>

</div>

</div>

</div>

<div id="page">

<div id="contents">

<div id="about">

<h5>About The Store</h5>

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

<h4>HISTORY OF THE STORE</h4>

<p>

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

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 brand’s 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.

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.

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.

The brand’s vision of hand-made worldwide domination is slowly coming to fruition, one shirt at a time.

</p>

</div>

</div>

<div id="footer">

<div id="connect">

</div>


<li>


</li>

<li>


</li>

<li>


</li>



</li>

<li>


</li>

</ul>



</p>

</div>

</div>

</body>

</html>

<!DOCTYPE html>


<html>

<head>


<title>Blog - Mad Illustrator's Portfolio Website Template</title>


</head>

<body>

<div id="header">

<div>



<ul>

<li>


</li>

<li>


</li>



</li>

<li>


</li>

<li>


</li>

</ul>

</div>

</div>

</div>

<div id="page">

<div id="contents">

<div>

<div id="main">

<h5>Latest Blog Entries</h5>

<ul id="blogs">

<li>

<h4>Vikings Clothing SM North Grand Opening</h4>

<span>29 February 2015</span>

<p>

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 it’s 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>

</li>

<li>

<h4>New Tees will be available this August 8, 2015! Visit our stores!</h4>

<span>29 February 2015</span>

<p>

Nick Automatic – North Store

Unit 2D, 61 Kamuning rd. Quezon city

Vikings Clothing – J Centre Mall

3rd level, J Centre Mall, Mandaue city, Cebu

Vikings Clothing – Doodle Store

D12, Borromeo Arcade bldg. F Ramos st. Cebu city

</p>

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

</li>

</ul>

</div>

<div id="sidebar">

<h5>Popular Posts</h5>

<ul class="posts">

<li>

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

</li>

<li>

<a href="blog.html">New Tees will be available this August 8, 2015! Visit our stores!</a> 29 February 2015

</li>

</ul>

</div>

</div>

</div>

<div id="footer">

<div id="connect">

<a href="http://freewebsitetemplates.com/go/facebook/" target="_blank" class="facebook"></a> <a href="http://freewebsitetemplates.com/go/twitter/" target="_blank" class="twitter"></a> <a href="http://freewebsitetemplates.com/go/googleplus/" class="googleplus"></a> <a href="http://www.freewebsitetemplates.com/misc/contact/" target="_blank" class="mail"></a>

</div>


<li>


</li>

<li>


</li>



</li>

<li>


</li>

<li>


</li>

</ul>



</p>

A

</div>

</div>

</body>

</html>

CONTACT

<!DOCTYPE html>


<html>

<head>


<title>Contact - Mad Illustrator's Portfolio Website Template</title>


</head>

<body>

<div id="header">

<div>



<ul>

<li>


</li>

<li>


</li>

<li>


</li>

<li>


</li>



</li>

</ul>

</div>

</div>

</div>

<div id="page">

<div id="contents">

<div id="contact">

<h5>Contact</h5>

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

<p>

Unit 2D, 61 Kamuning rd. Quezon city

</p>

<p>

Website: <a href="http://www.freewebsitetemplates.com/">www.JohnrayLegaspi.com</a><br> Email: <a href="http://www.freewebsitetemplates.com/misc/contact/">[email protected]</a><br> Tel. No.: <span>+44.12.3456.4456</span><br> <br> Twitter: <a href="http://freewebsitetemplates.com/go/twitter/">johnraylegaspi</a>

</p>

</div>

</div>

<div id="footer">

<div id="connect">

<a href="http://freewebsitetemplates.com/go/facebook/" target="_blank" class="facebook"></a> <a href="http://freewebsitetemplates.com/go/twitter/"

target="_blank" class="twitter"></a> <a href="http://freewebsitetemplates.com/go/googleplus/" target="_blank" class="googleplus"></a> <a href="http://www.freewebsitetemplates.com/misc/contact/" target="_blank" class="mail"></a>

</div>


<li>


</li>

<li>


</li>

<li>


</li>

<li>


</li>



</li>

</ul>



</p>

</div>

</div>

</body>

</html>

JAVA SCRIPT CODES

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

// Shopping Cart functions

var shoppingCart = (function () {

// Private methods and properties

var cart = [];

function Item(name, price, count) {

this.name = name

this.price = price

this.count = count

}

function saveCart() {

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

}

function loadCart() {

cart = JSON.parse(localStorage.getItem("shoppingCart"));

}

loadCart();

// Public methods and properties

var obj = {};

obj.addItemToCart = function (name, price, count) {

for (var i in cart) {

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

cart[i].count += count;

saveCart();

return;

}

}

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

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

cart.push(item);

saveCart();

};

obj.setCountForItem = function (name, count) {



cart[i].count = count;

break;

}

}

saveCart();

};

obj.removeItemFromCart = function (name) { // Removes one item


if (cart[i].name === name) { // "3" === 3 false

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

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

cart.splice(i, 1);

}

break;

}

}

saveCart();

};

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



cart.splice(i, 1);

break;

}

}

saveCart();

};

obj.clearCart = function () {

cart = [];

saveCart();

}

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

var totalCount = 0;


totalCount += cart[i].count;

}

return totalCount;

};

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

var totalCost = 0;


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

}

return totalCost.toFixed(2);

};

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

var cartCopy = [];

console.log("Listing cart");

console.log(cart);


console.log(i);

var item = cart[i];

var itemCopy = {};

for (var p in item) {

itemCopy[p] = item[p];

}

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

cartCopy.push(itemCopy);

}

return cartCopy;

};

// ----------------------------

return obj;

webprog website

Documents

cart total cart

shopping cart

var price

company shop

var count

attrdataprice shoppingcart

var cartarray

preventdefault var