Vous êtes sur la page 1sur 49

Synopsis Clothes Collection

Submitted by-

As a practical part in the subject Fundamental of Ecommerce

Clothes Collection
Team Members-

My Role -> 1.) Making sign up ang sign in form 2.) Connectivity of database 3.) Inserting flash objects 4.) Designing Part

Aknowledgements
I would like to thank our teacher Mr. for his support and proper guidance in the subject Fundamental of E-commerce. I would like to thank Mrs. for her support in the subject Web Designing in the previous semester

INTRODUCTION

Clothes Collection Clothing is one of the leading companies in India manufacturing, retailing and exporting readymade garments. Established in 1999, the company is a trendsetter in designing and supplying garments at the most competitive prices. A young at heart company, Clothes Collection clothing is constantly innovating, keeping abreast of internationally in vogue trends and is in compliance with the worldwide standards. Since our establishment, we have achieved outstanding sales and stable growth. Today our products are distributed to many countries across the globe. We owe our success to quality, timely delivery, price and satisfaction of the clients.

TECHNOLOGIES WE USED IN THE PROJECT


HTML
HTML is a language for describing web pages.

HTML stands for Hyper Text Markup Language HTML is not a programming language, it is a markup language A markup language is a set of markup tags HTML uses markup tags to describe web pages

HTML Tags
HTML markup tags are usually called HTML tags

HTML tags are keywords surrounded by angle brackets like <html> HTML tags normally come in pairs like <b> and </b> The first tag in a pair is the start tag, the second tag is the end tag Start and end tags are also called opening tags and closing tags

HTML Documents = Web Pages



HTML documents describe web pages HTML documents contain HTML tags and plain text HTML documents are also called web pages

The purpose of a web browser (like Internet Explorer or Firefox) is to read HTML documents and display them as web pages. The browser does not display the HTML tags, but uses the tags to interpret the content of the page:

<html> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html>

HTML Headings
HTML headings are defined with the <h1> to <h6> tags.

Example
<h1>This is a heading</h1> <h2>This is a heading</h2> <h3>This is a heading</h3>

HTML Paragraphs
HTML paragraphs are defined with the <p> tag.

Example
<p>This is a paragraph.</p> <p>This is another paragraph.</p>

HTML Links
HTML links are defined with the <a> tag.

Example
<a href="http://www.w3schools.com">This is a link</a>

Note: The link address is specified in the href attribute.

HTML Images
HTML images are defined with the <img> tag.

Example
<img src="w3schools.jpg" width="104" height="142" />

HTML Elements
An HTML element is everything from the start tag to the end tag:

Start tag * <p> <a href="default.htm" > <br />

Element content This is a paragraph This is a link </p> </a>

End tag *

* The start tag is often called the opening tag. The end tag is often called the closing tag.

HTML Element Syntax



An HTML element starts with a start tag / opening tag An HTML element ends with an end tag / closing tag The element content is everything between the start and the end tag Some HTML elements have empty content Empty elements are closed in the start tag Most HTML elements can have attributes

Tip: You will learn about attributes in the next chapter of this tutorial.

HTML Document Example


<html> <body> <p>This is my first paragraph.</p> </body> </html>

The example above contains 3 HTML elements.

HTML Example Explained


The <p> element:

<p>This is my first paragraph.</p>

The <p> element defines a paragraph in the HTML document. The element has a start tag <p> and an end tag </p>. The element content is: This is my first paragraph.

The <body> element:

<body> <p>This is my first paragraph.</p> </body>

The <body> element defines the body of the HTML document. The element has a start tag <body> and an end tag </body>. The element content is another HTML element (a p element). The <html> element:

<html> <body> <p>This is my first paragraph.</p> </body> </html>

The <html> element defines the whole HTML document. The element has a start tag <html> and an end tag </html>. The element content is another HTML element (the body element).

Empty HTML Elements


HTML elements with no content are called empty elements. Empty elements can be closed in the start tag. <br> is an empty element without a closing tag (the <br> tag defines a line break). In XHTML, XML, and future versions of HTML, all elements must be closed. Adding a slash to the start tag, like <br />, is the proper way of closing empty elements, accepted by HTML, XHTML and XML. Even if <br> works in all browsers, writing <br /> instead is more future proof.

HTML Text Formatting Tags


Tag <b> <big> <em> <i> <small> <strong> <sub> Description Defines bold text Defines big text Defines emphasized text Defines italic text Defines small text Defines strong text Defines subscripted text

<sup> <ins> <del>

Defines superscripted text Defines inserted text Defines deleted text

HTML Style Example - Background Color


The background-color property defines the background color for an element:

Example
<html> <body style="background-color:yellow"> <h2 style="background-color:red">This is a heading</h2> <p style="background-color:green">This is a paragraph.</p> </body> </html>

HTML Style Example - Font, Color and Size


The font-family, color, and font-size properties defines the font, color, and size of the text in an element:

Example
<html> <body> <h1 style="font-family:verdana">A heading</h1> <p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p> </body> </html>

HTML Style Example - Text Alignment


The text-align property specifies the horizontal alignment of text in an element:

Example
<html> <body> <h1 style="text-align:center">This is a heading</h1> <p>The heading above is aligned to the center of this page.</p> </body> </html>

HTML Hyperlinks (Links)


A hyperlink (or link) is a word, group of words, or image that you can click on to jump to a new document or a new section within the current document. When you move the cursor over a link in a Web page, the arrow will turn into a little hand. Links are specified in HTML using the <a> tag. The <a> tag can be used in two ways: 1. 2. To create a link to another document, by using the href attribute To create a bookmark inside a document, by using the name attribute

HTML Link Syntax


The HTML code for a link is simple. It looks like this:

<a href="url">Link text</a>

The href attribute specifies the destination of a link.

Example
<a href="http://www.akcjobconsultancy.com/">Visit akc</a>

which will display like this: Visit akcjobconsultancy Clicking on this hyperlink will send the user to akc job consultancy' homepage.

HTML Links - The target Attribute


The target attribute specifies where to open the linked document. The example below will open the linked document in a new browser window:

Example
<a href="http://www.akcjobconsultancy.com/" target="_blank">Visit akc!</a>

HTML Links - The name Attribute

The name attribute specifies the name of an anchor. The name attribute is used to create a bookmark inside an HTML document. Bookmarks are not displayed in any special way. They are invisible to the reader.

Example
A named anchor inside an HTML document:

<a name="tips">Useful Tips Section</a>

Create a link to the "Useful Tips Section" inside the same document:

<a href="#tips">Visit the Useful Tips Section</a>

Or, create a link to the "Useful Tips Section" from another page:

<a href="http://www.akcjobconsultancy.com/html_links.htm#tips"> Visit the Useful Tips Section</a>

HTML The <img> Tag and the Src Attribute


In HTML, images are defined with the <img> tag. The <img> tag is empty, which means that it contains attributes only, and has no closing tag. To display an image on a page, you need to use the src attribute. Src stands for "source". The value of the src attribute is the URL of the image you want to display. Syntax for defining an image:

<img src="url" alt="some_text"/>

The URL points to the location where the image is stored. An image named "boat.gif", located in the "images" directory on "www.akcjobconsulatancy.com" has the URL: www.akcjobconsultancy.com/images/boat.gif. The browser displays the image where the <img> tag occurs in the document. If you put an image tag between two paragraphs, the browser shows the first paragraph, then the image, and then the second paragraph.

HTML Forms
HTML forms are used to pass data to a server.

A form can contain input elements like text fields, checkboxes, radio-buttons, submit buttons and more. A form can also contain select lists, textarea, fieldset, legend, and label elements. The <form> tag is used to create an HTML form:

<form> . input elements . </form>

HTML Forms - The Input Element


The most important form element is the input element. The input element is used to select user information. An input element can vary in many ways, depending on the type attribute. An input element can be of type text field, checkbox, password, radio button, submit button, and more. The most used input types are described below.

Text Fields
<input type="text" /> defines a one-line input field that a user can enter text into:

<form> First name: <input type="text" name="firstname" /><br /> Last name: <input type="text" name="lastname" /> </form>

How the HTML code above looks in a browser:

First name: Last name: Note: The form itself is not visible. Also note that the default width of a text field is 20 characters.

Password Field
<input type="password" /> defines a password field:

<form>

Password: <input type="password" name="pwd" /> </form>

How the HTML code above looks in a browser:

Password: Note: The characters in a password field are masked (shown as asterisks or circles).

Radio Buttons
<input type="radio" /> defines a radio button. Radio buttons let a user select ONLY ONE one of a limited number of choices:

<form> <input type="radio" name="sex" value="male" /> Male<br /> <input type="radio" name="sex" value="female" /> Female </form>

How the HTML code above looks in a browser:

Male Female

Checkboxes
<input type="checkbox" /> defines a checkbox. Checkboxes let a user select ONE or MORE options of a limited number of choices.

<form> <input type="checkbox" name="vehicle" value="Bike" /> I have a bike<br /> <input type="checkbox" name="vehicle" value="Car" /> I have a car </form>

How the HTML code above looks in a browser:

I have a bike I have a car

Submit Button
<input type="submit" /> defines a submit button. A submit button is used to send form data to a server. The data is sent to the page specified in the form's action attribute. The file defined in the action attribute usually does something with the received input:

<form name="input" action="html_form_action.asp" method="get"> Username: <input type="text" name="user" /> <input type="submit" value="Submit" /> </form>

How the HTML code above looks in a browser:

Username:

Submit

If you type some characters in the text field above, and click the "Submit" button, the browser will send your input to a page called "html_form_action.asp". The page will show you the received input.

CSS
Style sheets are a very powerful tool for the Web site developer. They give you the chance to be completely consistent with the look and feel of your pages, while giving you much more control over the layout and design than straight HTML ever did. Invented in 1997, Cascading Style Sheets are just now starting to be widely used among browsers and Web developers are learning to be more comfortable with them. Those of you who use HomeSite 4.0 know that they are eventually going to take the place of tags such as <FONT>, which have been deprecated in HTML 4.0. There are three parts to CSS: the styles, their placement, and the fact that they can cascade.

How to Use Styles


When a browser reads a style sheet, it will format the document according to it. There are three ways of inserting a style sheet:

External style sheet Internal style sheet Inline styles

External Style Sheet


An external style sheet is ideal when the style is applied to many pages. With an external style sheet, you can change the look of an entire Web site by changing one file. Each page must link to the style sheet using the <link> tag. The <link> tag goes inside the <head> section:

<head>

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

Internal Style Sheet


An internal style sheet can be used if one single document has a unique style. Internal styles are defined in the <head> section of an HTML page, by using the <style> tag, like this:

<head> <style type="text/css"> body {background-color:yellow} p {color:blue} </style> </head>

Inline Styles
An inline style can be used if a unique style is to be applied to one single occurrence of an element. To use inline styles, use the style attribute in the relevant tag. The style attribute can contain any CSS property. The example below shows how to change the text color and the left margin of a paragraph:

<p style="color:blue;margin-left:20px">This is a paragraph.</p>

MS-ACCESS
Ms Access is a database management tool that enables one to have good command of data collected. The programme enables one to retrieve, sort, summarize and report results speedily and effectively. It can

combine data from various files through creating relationships, and can make data entry more efficient and accurate. Microsoft Access (MS Access) enables one to manage all important information from a single database file. Within the file, one can use:

Tables to store your data.

Queries to find and retrieve specific data of interest.

Forms to view, add, and update data in tables.

Reports to analyze or print data in a specific layout.

Data access pages to view or update, the data.

In MS Access, data is stored once in one table, but can be viewed from multiple locations. When the data is updated in a Table, Query or Form, it is automatically updated everywhere it appears Establishment of Ms Access database All Ms Access databases files are saved with extension .mdb. A database should have a separate table for every major subject, such as pedigree records, Production data or Treatment information. Data should not be duplicated in multiple tables. Microsoft Access provides three methods to create a database

Database Wizard (though easy, the wizard offers limited options to customize the database)

Using a template (This method works best if one can find and use a template that closely matches the specific requirements)

Creating a database directly (This is the most flexible method, but it requires one to define each database element separately). Create a new Access database After creating a new database, this should be saved by the name which reflects the content of the database. Upon saving the database, the Ms Access database window opens with the Tables tab-active (i.e in such a way that the next activity should be to create a table). MS-Access Basic

Creating a table

Tables are the data storage facilities in Ms Access. Each table contains rows called records

and columns called fields. A record is a collection of facts about a particular animal or event. Each record in a table should be unique. To distinguish one record from another, tables can contain a primary key field. A field is a single kind of fact that may apply to each animal or event. For example, date of birth is a field in a table on animal information. The fields in a database have settings that determine the

- type of data they can store,

- how the data is displayed,

- what can be done with the data.

For example, field settings can ensure that birth dates are entered with two numbers for the month, two numbers for the day, four numbers for the year, and slashes in between:

01/04/2006.

One important setting for fields is the data type, which could be a number, text, currency, and date/time. The data type limits and describes the kind of information in the field. The data type also determines the actions one can perform on a field and how much memory the data will use. Fields also have properties that control the details of information inside them, including a character length, a default value, and a validation rule that makes sure the data meets certain criteria.

Tables may be created by either:

- Table wizard,

- Design view

- Entering data in a spreadsheet

JAVA SCRIPT

JavaScript

JavaScript was designed to add interactivity to HTML pages JavaScript is a scripting language A scripting language is a lightweight programming language JavaScript is usually embedded directly into HTML pages JavaScript is an interpreted language (means that scripts execute without preliminary compilation) Everyone can use JavaScript without purchasing a license

Are Java and JavaScript the same?


NO! Java and JavaScript are two completely different languages in both concept and design! Java (developed by Sun Microsystems) is a powerful and much more complex programming language - in the same category as C and C++.

What can a JavaScript do?

JavaScript gives HTML designers a programming tool - HTML authors are normally not programmers, but JavaScript is a scripting language with a very simple syntax! Almost anyone can put small "snippets" of code into their HTML pages

JavaScript can put dynamic text into an HTML page - A JavaScript statement like this: document.write("<h1>" + name + "</h1>") can write a variable text into an HTML page JavaScript can react to events - A JavaScript can be set to execute when something happens, like when a page has finished loading or when a user clicks on an HTML element JavaScript can read and write HTML elements - A JavaScript can read and change the content of an HTML element JavaScript can be used to validate data - A JavaScript can be used to validate form data before it is submitted to a server. This saves the server from extra processing JavaScript can be used to detect the visitor's browser - A JavaScript can be used to detect the visitor's browser, and - depending on the browser - load another page specifically designed for that browser JavaScript can be used to create cookies - A JavaScript can be used to store and retrieve information on the visitor's computer

SCREEN SHOTS & CODING

HOMEPAGE

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Clothes Fasion</title> <link rel="stylesheet" href="style.css" type="text/css" charset="utf-8" /> </head> <body> <div id="wrapper"> <div id="header"> <h1><a href="index.html"><em>Clothes</em><strong>COLLECTION</strong></a></h1> </div> <div id="left-person"></div> <div id="uppers"> <div id="nav-top"> <ul> <li><a href="sign in.html">Sign In</a> |</li> <li><a href="sign _up.html">Sign Up</a> |</li> <li><a href="contact_us.html">Contact us</a></li> </ul> </div> </div> <div id="nav"><div> <ul> <li><a href="index.html"></a> &nbsp;|&nbsp;</li> <li><a href="acc.html"></a> &nbsp;|&nbsp;</li> <li><a href="men.html">MEN COLLECTION</a> &nbsp;|&nbsp;</li> <li><a href="women.html">WOMEN COLLECTION</a> &nbsp;|&nbsp;</li>

<li><a href="kids.html">KIDS COLLECTION</a></li> </ul> </div></div> <div id="body"> <p>Clothes Collection Clothing is one of the leading companies in India manufacturing, retailing and exporting readymade garments. Established in 1999, the company is a trendsetter in designing and supplying garments at the most competitive prices. A young at heart company, Clothes Collection clothing is constantly innovating, keeping abreast of internationally in vogue trends and is in compliance with the worldwide standards. </p> Since our establishment, we have achieved outstanding sales and stable growth. Today our products are distributed to many countries across the globe. We owe our success to quality, timely delivery, price and satisfaction of the clients. </div> <div id="black-tl"> <div id="black-tr"> <div id="black-br"> <div id="black-bl"> <div class="black-box"> <h2>MEN</h2> <p><a href="men.html"><img src="images/pic_1.jpg" alt="Pic 1" width="120" height="105" border="0" /></a></p> <p>Men's Wear has always been a forte and strong hold of Clothes Collection Clothing. We have the best possible set up to design and produce any style in Men's Wear segment. Our range includes Formal wear, Club wear, Street wear and Denims. The fabrics used are normally cottons sourced from best of the mills in India. <p class="more">&nbsp;</p> </div> <div class="black-box"> <h2>WOMEN</h2> <p><a href="women.html"><img src="images/pic_2.jpg" alt="Pic 2" width="120" height="105" border="0" /></a></p> <p>Our design team specialises in designing the latest high fashion women's wear garments including Evening dresses, Tunics, Embroidered shirts, sequenced tops etc. The range is always designed keep in

mind the season's latest international fashion trends. The fabrics used are Georgette, Crepe, Viscose, Poplins and Cambric.</a>.</p> <p class="more">&nbsp;</p> </div> <div class="black-box"> <h2>KIDS</h2> <p><a href="kids.html"><img src="images/pic_3.jpg" alt="Pic 3" width="120" height="105" border="0" /></a></p> <p class="more">&nbsp;</p> </div> <div class="clear"></div> </div> </div> </div> </div> <div id="footer"> <div id="tips"> <h2><em>Fasion</em> tips</h2> <p>For those of you who are fat or on the heavier side, you don't desire to be tiring turtlenecks this wintry weather. Try to purchase sweaters or elongated covering tops with a V-neck. This obviously describes the eyes downhill producing the cause of a sleeker outline. It as well crafts you come out to enclose a longer neck instead of your small neck or dual chin. </p> <p class="more"><a href="http://www.freewebsitetemplates.com"></a></p> </div> <div id="choose"> <h2><em> Choose</em> a designer</h2> <p align="left">Choose a Designer</p> <form action=" "> <div align="left"> <select name="q"> <option value=" ">Designer</option> <option value="1">Manish Malhotra</option> <option value="2">Rohit Bal</option> <option value="3">Ritu kumar</option>

<option value="4">Zara</option> </select> <input type="image" name="submit" src="images/btn_footer.gif" id="submit" /> </div> </form> </div> </div> <div class="clear"></div> <div id="copyright"> <div align="center">Copyright information goes here. All rights reserved </div> </div> </div> </body> </html>

MEN CLOTHING

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>MEN COLLECTION</title> <link rel="stylesheet" href="style.css" type="text/css" charset="utf-8" /> <script type="text/javascript" src="swfobject.js"></script> <script type="text/javascript"> var flashvars = {}; flashvars.folderPath = "men/"; var params = {}; params.scale = "noscale"; params.salign = "tl"; params.wmode = "transparent"; var attributes = {}; swfobject.embedSWF("men/ImageScrollerFX.swf", "ImageScrollerFXDiv", "575", "700", "9.0.8", true, flashvars, params, attributes); </script>

</head> <body> <div id="wrapper"> <div id="header"> <h1><em><a href="index.html">Clothes</a></em><a href="index.html"><strong>COLLECTION</strong></a></h1> </div> <div id="left-person"></div> <div id="uppers"> <div id="nav-top"> <ul> <li><a href="sign in.html">Site in</a> |</li> <li><a href="sign _up.html">Sign Up</a> |</li>

<li><a href="contact_us.html">Contact us</a></li> </ul> </div> </div> <div id="nav"><div> <ul> <li><a href="index.html">HOME</a> &nbsp;|&nbsp;</li> <li><a href="acc.html">ACCESSORIES</a> &nbsp;|&nbsp;</li> <li><a href="women.html">WOMEN COLLECTION</a> &nbsp;|&nbsp;</li> <li><a href="kids.html">KIDS COLLECTION</a></li> </ul><div id="ImageScrollerFXDiv"> </div></div> <div id="copyright"> <div align="center">Copyright information goes here. All rights reserved </div> </div> </div> </body> </html>

WOMEN CLOTHING

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>WOMEN COLLECTION</title> <link rel="stylesheet" href="style.css" type="text/css" charset="utf-8" /> <script type="text/javascript" src="swfobject.js"></script> <script type="text/javascript"> var flashvars = {}; flashvars.folderPath = "women/"; var params = {}; params.scale = "noscale"; params.salign = "tl"; params.wmode = "transparent"; var attributes = {}; swfobject.embedSWF("women/ImageScrollerFX.swf", "ImageScrollerFXDiv", "575", "700", "9.0.8", true, flashvars, params, attributes); </script>

</head> <body> <div id="wrapper"> <div id="header"> <h1><em>Clothes</em><strong>COLLECTION</strong></h1> </div> <div id="left-person"></div> <div id="uppers"> <div id="nav-top"> <ul> <li><a href="sign in.html">Sign in</a> |</li> <li><a href="sign _up.html">Sign Up</a> |</li> <li><a href="contact_us.html">Contact us</a></li> </ul> </div>

</div> <div id="nav"><div> <ul> <li><a href="index.html">HOME</a> &nbsp;|&nbsp;</li> <li><a href="acc.html">ACCESSORIES</a> &nbsp;|&nbsp;</li> <li><a href="men.html">MEN COLLECTION</a> &nbsp;|&nbsp;</li> <li><a href="kids.html">KIDS COLLECTION</a></li> </ul><div id="ImageScrollerFXDiv"> </div></div> <div id="copyright">Copyright information goes here. All rights reserved </div> </div> </body> </html>

KIDS CLOTHING

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> <html> <head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>KIDS COLLECTION</title> <link rel="stylesheet" href="style.css" type="text/css" charset="utf-8" /> <script type="text/javascript" src="swfobject.js"></script> <script type="text/javascript"> var flashvars = {}; flashvars.folderPath = "kids/"; var params = {}; params.scale = "noscale"; params.salign = "tl"; params.wmode = "transparent"; var attributes = {}; swfobject.embedSWF("kids/ImageScrollerFX.swf", "ImageScrollerFXDiv", "575", "700", "9.0.8", true, flashvars, params, attributes); </script> </head> <body> <div id="wrapper"> <div id="header"> <h1><em>Clothes</em><strong>COLLECTION</strong></h1> </div> <div id="left-person"></div> <div id="uppers"> <div id="nav-top"> <ul> <li><a href="sign in.html">Sign in</a> |</li> <li><a href="sign _up.html">Sign Up</a> |</li> <li><a href="contact_us.html">Contact us</a></li> </ul> </div> </div> <div id="nav"><div> <ul> <li><a href="index.html">HOME</a> &nbsp;|&nbsp;</li>

<li><a href="acc.html">ACCESSORIES</a> &nbsp;|&nbsp;</li> <li><a href="men.html">MEN COLLECTION</a> &nbsp;|&nbsp;</li> <li><a href="women.html">WOMEN COLLECTION</a> &nbsp;|&nbsp;</li> </ul><div id="ImageScrollerFXDiv"> </div></div>

SIGN UP

<html> <head> <title>Sign Up </title>

<link rel="stylesheet" href="style.css" type="text/css" charset="utf-8" /> <script language="JavaScript" >

function validate(form) { var day=document.getElementById("txtday"); var month=document.getElementById("txtmonth"); var year=document.getElementById("txtyear"); var gender=document.getElementById("txtgender"); var country=document.getElementById("country"); var firstname=document.getElementById("firstname").value; var lastname=document.getElementById("lastname"); var username=document.getElementById("username"); var pwd=document.getElementById("pwd"); var pwd2=document.getElementById("pwd2"); var email=document.getElementById("email"); var email2=document.getElementById("email2") if(form.firstname.value =="") { alert("first name cannot be empty"); form.firstname.focus(); return false; } if(form.lastname.value =="") { alert("last name cannot be empty"); form.lastname.focus(); return false; } re = /^\w+$/; if(!re.test(form.username.value)) { alert("Error: Username must contain only letters, numbers and underscores!"); form.username.focus(); return false; }

if(form.pwd.value == form.firstname.value) { alert("Error: Password must be different from Username!"); form.pwd.focus(); return false; } if (form.pwd.value != form.pwd2.value) { alert('both password dont match!'); form.pwd.focus(); return false; } if(form.pwd.value.length <6) { alert("Error: Password must contain at least six characters!"); form.pwd.focus(); return false; } if (form.email.value != form.email2.value) { alert('both email address dont match!'); form.email.focus(); return false; }

var adoConn = new ActiveXObject("ADODB.Connection"); var adoRS = new ActiveXObject("ADODB.Recordset"); var day=document.getElementById("txtday"); var month=document.getElementById("txtmonth"); var year=document.getElementById("txtyear"); var gender=document.getElementById("txtgender"); var country=document.getElementById("country"); var firstname=document.getElementById("firstname"); var lastname=document.getElementById("lastname"); var username=document.getElementById("username"); var pwd=document.getElementById("pwd");

var pwd2=document.getElementById("pwd2"); var email=document.getElementById("email"); var email2=document.getElementById("email2")

adoConn.Open("Provider=Microsoft.Jet.OLEDB.4.0;Data Source=C:/customer2.mdb"); adoRS.Open("Select * From cust", adoConn, 1, 3); adoRS.AddNew; adoRS.Fields("firstname").value =firstname.value; adoRS.Fields("lastname").value = lastname.value; adoRS.Fields("username").value = username.value; adoRS.Fields("password").value = pwd.value; adoRS.Fields("email").value = email.value; for (i=0; i<document.kandy.sex.length; i++) { if (document.kandy.sex[i].checked==true) { adoRS.Fields("gender").value=document.kandy.sex[i].value } } var abc=day.options[day.selectedIndex].value + "/" + month.options[month.selectedIndex].value + "/" + year.options[year.selectedIndex].value; adoRS.Fields("dob").value=abc; adoRS.Fields("country").value= country.value; alert("THANK YOU!! for Registering"); adoRS.Update; adoRS.Close(); adoConn.Close();

</script> </head> <body> <div id="wrapper"> <div id="header"> <h1><a href="index.html"><em>Clothes</em><strong>COLLECTION</strong></a></h1> </div> <div id="left-person"></div> <div id="uppers"> <div id="nav-top"> <ul> <li><a href="site.html">Site map</a> |</li> <li><a href="sign.html">Sign Up</a> |</li> <li><a href="contact.html">Contact us</a></li> </ul> </div> </div> <div id="nav"><div> <ul> <li><a href="index.html"></a> &nbsp;|&nbsp;</li> <li><a href="acc.html">ACCESSORIES</a> &nbsp;|&nbsp;</li> <li><a href="men.html">MEN COLLECTION</a> &nbsp;|&nbsp;</li> <li><a href="women.html">WOMEN COLLECTION</a> &nbsp;|&nbsp;</li> <li><a href="kids.html">KIDS COLLECTION</a></li> </ul> </div></div> <div id="body"> <div id="black-tl"><div id="black-tr"> </div>

<div id="black-br"> <div id="black-bl"> <P><font color=white> <H1>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;& nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Sign Up Form</H1><br><br> <form name="kandy" method="POST" > <table><td valign="middle">First Name:</th>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&n bsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <input type="text" name="firstname" /></td></table><BR>

<table><td valign="center">Last Name:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;& nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <INPUT TYPE="TEXT" name="lastname" ></td></table><BR>

<table><td valign="center">User Id :&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <INPUT TYPE="TEXT" NAME="username" ></td></table><BR>

<table><td valign="center">Password :&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; <INPUT TYPE="PASSWORD" NAME="pwd" /></td></table><BR>

<table><td valign="center">Confirm Password &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

<INPUT TYPE="password" NAME="pwd2" ></td></table><BR>

<table><td valign="center">Email:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp ;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; <INPUT TYPE="text" NAME="email" ></td></table><BR>

<table><td valign="center">Confirm Email :&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <INPUT TYPE="text" NAME="email2" ></td></table><BR>

<table><td valign="center">Gender:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbs p;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <input type="radio" name="sex" value="male"> Male <input type="radio" name="sex" value="female"> Female <BR></td></table><br>

<table><td valign="center">Date of Birth:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<SELECT NAME="txtday" VALUE="[SELECTDATE]">

<OPTION>SELECT DATE</OPTION> <OPTION value="1">1</OPTION> <OPTION value="2">2</OPTION> <OPTION value="3">3</OPTION> <OPTION value="4">4</OPTION> <OPTION value="5">5</OPTION> <OPTION value="6">6</OPTION> <OPTION value="7">7</OPTION> <OPTION value="8">8</OPTION>

<OPTION value="9">9</OPTION> <OPTION value="10">10</OPTION> <OPTION value="11">11</OPTION> <OPTION value="12">12</OPTION> <OPTION value="13">13</OPTION> <OPTION value="14">14</OPTION> <OPTION value="15">15</OPTION> <OPTION value="16">16</OPTION> <OPTION value="17">17</OPTION> <OPTION value="18">18</OPTION> <OPTION value="19">19</OPTION> <OPTION value="20">20</OPTION> <OPTION value="21">21</OPTION> <OPTION value="22">22</OPTION> <OPTION value="23">23</OPTION> <OPTION value="24">24</OPTION> <OPTION value="25">25</OPTION> <OPTION value="26">26</OPTION> <OPTION value="27">27</OPTION> <OPTION value="28">28</OPTION> <OPTION value="29">29</OPTION> <OPTION value="30">30</OPTION> <OPTION value="31">31</OPTION> </SELECT> <SELECT NAME="txtmonth" VALUE="[SELECT VALUE]"> <OPTION >SELECT MONTH</OPTION> <OPTION value="01">JANUARY</OPTION <OPTION value="02">FEBUARY</OPTION> <OPTION value="03">MARCH</OPTION> <OPTION value="04">APRIL</OPTION> <OPTION value="05">MAY</OPTION> <OPTION value="06">JUNE</OPTION> <OPTION value="07">JULY</OPTION> <OPTION value="08">AUGUST</OPTION> <OPTION value="09">SEPTEMBER</OPTION> <OPTION value="10">OCTOBER</OPTION> <OPTION value="11">NOVEMBER</OPTION> <OPTION value="12">DECEMBER</OPTION> </SELECT> <SELECT NAME="txtyear" VALUE="YEAR"> <OPTION>SELECT YEAR</OPTION>

<OPTION value="1980">1980</OPTION> <OPTION value="1981">1981</OPTION> <OPTION value="1982">1982</OPTION> <OPTION value="1983">1983</OPTION> <OPTION value="1984">1984</OPTION> <OPTION value="1985">1985</OPTION> <OPTION value="1986">1986</OPTION> <OPTION value="1987">1987</OPTION> <OPTION value="1988">1988</OPTION> <OPTION value="1989">1989</OPTION> <OPTION value="1990">1990</OPTION> <OPTION value="1991">1991</OPTION> <OPTION value="1992">1992</OPTION> <OPTION value="1993">1993</OPTION> <OPTION value="1994">1994</OPTION> <OPTION value="1995">1995</OPTION> <OPTION value="1996">1996</OPTION> <OPTION value="1997">1997</OPTION> <OPTION value="1998">1998</OPTION> <OPTION value="1999">1999</OPTION> <OPTION value="2000">2000</option> </SELECT></td></table> <BR> <table> <td valign="center">country:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbs p;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp ;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <input type=text name="country"> </td></table><br> <table>

<tr> <td valign="top"> <b>Terms of Service:</b>

</td>

<td valign="top"> <font size="-1" > Please check the information you've entered above (feel free to change <br>anything you like), and review the Terms of Service below. you won't see blinking banner ads. Instead, we display ads you might find useful that are relevant to the content of your messages. <br> <td>&nbsp;</td></tr> <td></td><td><br> <font size="-1"> By clicking on 'I accept'below you are agreeing to the Terms of Service above. </font> </td></tr> </table> <center><input type="button" value=" I Accept Create my account" onclick="return validate(form)"></center><br>

<div class="black-box"><br> <br> <p class="more">&nbsp;</p> </div> <div class="clear"></div> </div> </div> </div> </div> </div> </div> <div class="clear"></div> <div id="copyright"> <div align="center">Copyright information goes here. All rights reserved </div> </div>

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

SIGN IN

<html>

<head> <title>login form</title> <link rel="stylesheet" href="style.css" type="text/css" charset="utf-8" /> <script language="JavaScript" > function login() { var adoConn = new ActiveXObject("ADODB.Connection"); adoConn.Open("Provider=Microsoft.Jet.OLEDB.4.0;Data Source=C:/customer2.mdb"); alert("fileopen") var adoRS = new ActiveXObject("ADODB.Recordset"); adoRS.Open("Select * From cust", adoConn, 1, 3); strQuery = "SELECT * FROM cust where username='" + username + "'" + " and password='"+ pwd + "'"; adoRS.open(strQuery, conn, adOpenDynamic, adLockOptimistic);

if(!adoRS.bof) { adoRS.MoveFirst(); while(!adoRS.eof) { strHtml += "<tr>"; strHtml += " <td><Font face ='tahoma'>Welcome " + username + "</font></td>"; strHtml += "</tr>"; adoRS.MoveNext(); } else { strHtml += " <td><Font face ='tahoma'>Record not found</font></td>"; } adoRS.Close(); adoConn.Close();

} </script>

</head> <body> <div id="wrapper"> <div id="header"> <h1><a href="index.html"><em>Clothes</em><strong>COLLECTION</strong></a></h1> </div> <div id="left-person"></div> <div id="uppers"> <div id="nav-top"> <ul> <li><a href="site.html">Sign IN</a> |</li> <li><a href="sign.html">Sign Up</a> |</li> <li><a href="contact.html">Contact us</a></li> </ul> </div> </div> <div id="nav"><div> <ul> <li><a href="index.html"></a> &nbsp;|&nbsp;</li> <li><a href="acc.html">ACCESSORIES</a> &nbsp;|&nbsp;</li> <li><a href="men.html">MEN COLLECTION</a> &nbsp;|&nbsp;</li> <li><a href="women.html">WOMEN COLLECTION</a> &nbsp;|&nbsp;</li> <li><a href="kids.html">KIDS COLLECTION</a></li> </ul> </div></div> <div id="body"> <br><br><br><br><br> </div>

<div id="black-tl"> <div id="black-tr"> <div id="black-br"> <div id="black-bl"> <div class="black-box"> <FORM NAME="KANDY" METHOD="GET"><P><font color=white> <CENTER><H1>Sign In</H1></CENTER><br><br> <B><div>User Name:<CENTER><INPUT TYPE="TEXT" NAME="username" ></CENTER></div><BR> <b><div>Password :</div><center><INPUT TYPE="Password" NAME="pwd"></center><br><center> <input type=button value="Log in" onclick="login()"><center> </div> <div class="black-box"> </div> <div class="black-box"> </div> <div class="clear"></div> </div> </div> </div> </div> <div id="footer"> </div> </div> <div class="clear"></div> <div id="copyright"> <div align="center">Copyright information goes here. All rights reserved </div> </div>

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

Vous aimerez peut-être aussi