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
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>
href="#" data-name="Scientist T-shirt" dataprice="1500">ADD CART</a>
</p>
</br>
</li>
<li>
</center>
<h4>Pirate T-shirt</h4>
<p>
</p>
</li>
<li>
<center>
href="#" data-name="Doctor T-shirt" dataprice="1500">ADD CART</a>
1500 Pesos
</br>
<br>
href="#" data-name="Pirate T-shirt" dataprice="1500">ADD CART</a>
</center>
</br>
</p>
</li>
</center>
<li>
</p>
</li>
<h4>Zombie T-shirt</h4>
<li>
<p>
<h4>Doctor T-shirt</h4>
<center>
<p>
1500 Pesos
<br>
<center>
1500 Pesos
<br>
href="#" data-name="Zombie T-shirt" dataprice="1500">ADD CART</a>
</br>
</center>
<h4>Girl T-shirt</h4>
<p>
</p>
</li>
<li>
<center>
1500 Pesos
<h4>Vikings T-shirt</h4>
<br>
<p>
href="#" data-name="Girl T-shirt" dataprice="1500">ADD CART</a>
<center>
</br>
1500 Pesos
<br>
</center>
href="#" data-name="Vikings T-shirt" dataprice="1500">ADD CART</a>
</p>
</br>
</li>
<li>
</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();
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){

$("#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){
shoppingCart.removeItemFromCartAll(name);
displayCart();
</script>
displayCart();
});
$("#show-cart").on("click", ".subtractitem", function(event){

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

<li>
<html>
<head>
</li>
</ul>
<title>Mad Illustrator's Portfolio

Website Template</title>
</div>
</div>
</div>
</head>
<div id="page">
<body>
<div id="contents">
<div id="header">
<div>
<div id="featured">
alt="LOGO"></a>
<h5>New TShirt Arrival</h5>

<ul>
<li>
<ul>
<li
class="selected">
<h4>Scientist T-shirt</h4>
</li>
<li>
<p>
<a href="work.html">Shop</a>
1500pesos
</li>
<li>
</p>
</li>
<li>
</li>
<li>
<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">
<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>
<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!
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>
src="images/viking-small.jpg" alt="Img"></a>
</li>
<li>
src="images/zombie-small.jpg" alt="Img"></a>
</li>
<li>
src="images/caveman-small.jpg"
alt="Img"></a>
</li>
<li>
src="images/pirate-small.jpg" alt="Img"></a>
</li>
<li>
src="images/doctor-small.jpg" alt="Img"></a>
</li>
<li>
src="images/vendor-small.jpg" alt="Img"></a>
</li>
<li>
src="images/engineer-small.jpg"
alt="Img"></a>
</li>
</ul>
</div>
</li>
</div>
</ul>
</div>
<div id="footer">
Copyright
<div id="connect">
</p>
<a
<a
gleplus/" target="_blank"
class="googleplus"></a> <a
class="mail"></a>
<p>
</p>
</div>
</div>
</body>
</html>
</div>
<ul
class="navigation">
<li
class="selected">
<a
</li>
<li>
<a
</li>
<li>
<a
</li>
<li>
<a
</li>
<li>
<a
ABOUT
<!DOCTYPE html>
</li>

<li>
<html>
<head>
</li>
</ul>
<title>About - Mad Illustrator's

Portfolio Template</title>
</div>
</div>
</div>
</head>
<div id="page">
<body>
<div id="contents">
<div id="header">
<div id="about">
<div>
<h5>About The
alt="LOGO"></a>
Store</h5>
<img
src="images/artist.png" alt="About">
<h4>HISTORY
OF THE STORE</h4>
<ul>
<li>
<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>
</li>
<li
class="selected">
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.
</li>
<li
class="selected">
<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
The brands vision of hand-made worldwide

domination is slowly coming to fruition, one
shirt at a time.
</li>
</ul>
</p>
Copyright
</p>
</div>
</div>
</div>
</div>
<div id="footer">
<div id="connect">
</body>
</html>
</div>
<ul
class="navigation">
<li>
<a
</li>
<li>
<a
</li>
BLOG
<!DOCTYPE html>
</li>

<li>
<html>
<head>
</li>
</ul>
<title>Blog - Mad Illustrator's Portfolio

Website Template</title>
</div>
</div>
</div>
</head>
<div id="page">
<body>
<div id="contents">
<div id="header">
<div>
<div>
<div
alt="LOGO"></a>
id="main">
<h5>Latest Blog Entries</h5>
<ul
id="blogs">
<ul>
<li>
<li>
</li>
<h4>Vikings Clothing SM North

Grand Opening</h4>
<li>
<span>29 February
2015</span>
</li>
<p>
<li
class="selected">
</li>
<li>
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

<a
gleplus/" class="googleplus"></a> <a
class="mail"></a>
</div>
<ul
class="navigation">
<li>
<a
</li>
<li>
<a
</li>
<li
class="selected">
<a
</li>
<li>
<a
</li>
<li>
<a
</li>
</ul>
Copyright
</p>
A
</div>
</div>
</body>
</html>
CONTACT
<!DOCTYPE html>
<li
class="selected">

<html>
</li>
<head>
</ul>
</div>
<title>Contact - Mad Illustrator's

Portfolio Website Template</title>
</div>
</div>
<div id="page">
</head>
<div id="contents">
<body>
<div id="contact">
<div id="header">
<div>
<h5>Contact</h5>
alt="LOGO"></a>
<h4>Get in
Touch with Me</h4>
<p>
Unit
<ul>
2D, 61 Kamuning rd. Quezon city

<li>
</p>
<p>
</li>
<li>
</li>
<li>
Website: <a
href="http://www.freewebsitetemplates.com/"
>www.JohnrayLegaspi.com</a><br> Email: <a
isc/contact/">Johnraylegaspi2@gmail.com</a>
<br> Tel. No.:
<span>+44.12.3456.4456</span><br> <br>
Twitter: <a
ter/">johnraylegaspi</a>
</p>
</div>
</li>
<li>
</div>
<div id="footer">
</li>
<div id="connect">
<a
<a
gleplus/" target="_blank"
class="googleplus"></a> <a
class="mail"></a>
</div>
<ul
class="navigation">
<li>
<a
</li>
<li>
<a
</li>
<li>
<a
</li>
<li>
<a
</li>
<li
class="selected">
<a
</li>
</ul>
Copyright
</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) {
function loadCart() {
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 = {};

if (cart[i].name === name) { // "3" ===
obj.addItemToCart = function (name, price,
count) {
3 false
cart[i].count--; // cart[i].count --
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;
obj.removeItemFromCartAll = function
(name) { // removes all item name
totalCost += cart[i].price *
cart[i].count;
}

return totalCost.toFixed(2);
};
cart.splice(i, 1);
break;
}
obj.listCart = function () { // -> array of

Items
var cartCopy = [];
saveCart();
console.log("Listing cart");
};
console.log(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;
})();

Bien plus que des documents.

Webprog Website

Transféré par

Informations du document

Description :

Description :

Droits d'auteur :

Formats disponibles

Webprog Website

Transféré par

Description :

Droits d'auteur :

Formats disponibles

Titres liés

STI College Global

Online Shop for Vikings Clothing

In partial fulfillment of the

save time to Customer

About This page contains information about the company

<title>Work Vikings online shop

<li>MY SHOPPING CART</li>

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

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

for (var i in cartArray) {

+" <input class='item-count'

+" <button class='plus-item'

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

+" <button class='delete-item'

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

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

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

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

<!-- Website template by

<title>Mad Illustrator's Portfolio

<h5>New TShirt Arrival</h5>

<!-- Website template by

<title>About - Mad Illustrator's

indulge in ; from the the underground to the

Vikings Clothing greatly embodies the spirit of

Currently, there are three main branches in the

The brands vision of hand-made worldwide

<!-- Website template by

<title>Blog - Mad Illustrator's Portfolio

<h5>Latest Blog Entries</h5>

<h4>Vikings Clothing SM North

After strong demand and days

<h4>New Tees will be available

Nick Automatic North Store

Unit 2D, 61 Kamuning

rd. Quezon city

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

3rd level, J Centre Mall,

D12, Borromeo Arcade

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

<!-- Website template by

<title>Contact - Mad Illustrator's

2D, 61 Kamuning rd. Quezon city

JAVA SCRIPT CODES

for (var i in cart) {

// Shopping Cart functions

function Item(name, price, count) {

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

obj.setCountForItem = function (name,

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

// Public methods and properties

obj.removeItemFromCart = function (name)

var obj = {};

for (var i in cart) {

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

for (var i in cart) {

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

var cartCopy = [];

var item = cart[i];

var itemCopy = {};

for (var p in item) {

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

Centres d'intérêt liés

Documents similaires à Webprog Website

Populaire dans Politics