Scribd
Upload
41 views30 pages

E Commerce

The document describes how to create an e-commerce website using HTML, CSS, and JavaScript for front-end development. It includes code for registration and login pages that connect to a database to store user information. It also includes code for a shopping page that allows adding products to a cart stored in the session.

Uploaded by

Tharunkumar Tharun
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
41 views30 pages

E Commerce

The document describes how to create an e-commerce website using HTML, CSS, and JavaScript for front-end development. It includes code for registration and login pages that connect to a database to store user information. It also includes code for a shopping page that allows adding products to a cart stored in the session.

Uploaded by

Tharunkumar Tharun
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 30

Creating an E commerce website using HTML, CSS and JavaScript for front end development

Register.html
<!DOCTYPE html>

<html>

<head>

<title>Registration Page</title>

<link rel="stylesheet"

type="text/css"

href="style.css">

</head>

<body>

<div class="container">

<h1>Registration Page</h1>

<form method="post" action="register.php">

<label for="name">

Name:

</label>

<input type="text"

id="name"

name="name" required>

<label for="username">

Username:

</label>

<input type="text"

id="username"

name="username" required>

<label for="email">Email:</label>

<input type="email"
id="email"

name="email" required>

<label for="password">Password:</label>

<input type="password"

id="password"

name="password" required>

<input type="submit"

value="Register">

</form>

<p> Already have an account?</p>

<a href="login.html">Click Here</a>

</div>

<br>

</body>

</html>

Register.php

<?php

if ($_SERVER["REQUEST_METHOD"] == "POST") {

$name = $_POST["name"];

$username = $_POST["username"];

$email = $_POST["email"];

$password = $_POST["password"];

// Hash the password

$hashed_password = password_hash($password, PASSWORD_BCRYPT);

$host = "localhost";

$dbname = "shp";
$username_db = "root";

$password_db = "";

try {

$db = new PDO(

"mysql:host=$host;dbname=$dbname",

$username_db, $password_db);

$db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

// Insert the user into the database

$stmt = $db->prepare(

"INSERT INTO users (name,username,email, password)

VALUES (:name, :username, :email,:password)");

$stmt->bindParam(":name", $name);

$stmt->bindParam(":username", $username);

$stmt->bindParam(":email", $email);

$stmt->bindParam(":password", $hashed_password);

$stmt->execute();

echo "<h2>Registration Successful</h2>";

echo "Thank you for registering, " . $name . "!<br>";

echo "You'll be redirected to login page in 3 seconds";

header("refresh:3;url=login.html");

catch(PDOException $e) {

echo "Connection failed: " . $e->getMessage();

?>
Style.css
body {

background-color: green;

.container {

display: flex;

flex-direction: column;

justify-content: center;

align-items: center;

height: 100vh;

form {

display: flex;

flex-direction: column;

align-items: center;

label {

display: block;

margin-bottom: 5px;

input[type="text"],

input[type="email"],

input[type="password"] {

width: 100%;

padding: 10px;

margin-bottom: 20px;

border: 1px solid #ccc;

border-radius: 5px;
}

input[type="submit"] {

background-color: #4caf50;

color: white;

padding: 10px 20px;

border: none;

border-radius: 5px;

cursor: pointer;

input[type="submit"]:hover {

background-color: #45a049;

Login.html
<!DOCTYPE html>

<html>

<head>

<title>Login Page</title>

<link rel="stylesheet"

type="text/css"

href="style.css">

</head>

<body>

<div class="container">

<h1>Login Page</h1>

<form method="post"

action="login.php">
<label for="username">Username:</label>

<input type="text"

id="username"

name="username" required>

<label for="password">Password:</label>

<input type="password"

id="password"

name="password" required>

<input type="submit"

value="Login">

</form>

<br><br>

<p> Does not have an account?

<a href="register.html">Click Here</a>

</p>

</div>

</body>

</html>

Login.php
<?php

if ($_SERVER["REQUEST_METHOD"] == "POST") {

$username = $_POST["username"];

$password = $_POST["password"];

// Connect to the database

$host = "localhost";
$dbname = "shp";

$username_db = "root";

$password_db = "";

try {

$db = new PDO(

"mysql:host=$host;dbname=$dbname",

$username_db,

$password_db

);

$db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

// Check if the user exists in the database

$stmt = $db->prepare("SELECT * FROM users WHERE username = :username");

$stmt->bindParam(":username", $username);

$stmt->execute();

$user = $stmt->fetch(PDO::FETCH_ASSOC);

if ($user) {

// Verify the password

if (password_verify($password, $user["password"])) {

session_start();

$_SESSION["user"] = $user;

echo '<script type="text/javascript">

window.onload = function () {

alert("Welcome to GFG shopping website");

window.location.href = "shop.php";

};
</script>

';

} else {

echo "<h2>Login Failed</h2>";

echo "Invalid email or password.";

} else {

echo "<h2>Login Failed</h2>";

echo "User doesn't exist";

} catch (PDOException $e) {

echo "Connection failed: " . $e->getMessage();

?>

Shop.php
<?php

session_start();

// Start the session

// Check if the add to cart button is clicked

if (isset($_POST["add_to_cart"])) {

// Get the product ID from the form

$product_id = $_POST["product_id"];

// Get the product quantity from the form

$product_quantity = $_POST["product_quantity"];
// Initialize the cart session variable

// if it does not exist

if (!isset($_SESSION["cart"])) {

$_SESSION["cart"] = [];

header("location:cart.php");

// Add the product and quantity to the cart

$_SESSION["cart"][$product_id] = $product_quantity;

header("location:cart.php");

?>

<!DOCTYPE html>

<html>

<head>

<title> Shopping Web Application</title>

<link rel="stylesheet"

href="shop.css">

</head>

<body>

<header>

<h1>Welcome <?php

$user = $_SESSION["user"];

echo $user["name"];

?> to GFG Shopping Web Application</h1>

</header>

<nav>

<ul>
<li><a href="shop.html">Home</a></li>

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

<li><a href="cart.php">Cart</a></li>

<li><a href="logout.php">Logout</a></li>

</ul>

</nav>

<main>

<section>

<h2>Products</h2>

<ul>

<li>

<h3>GFG Bag</h3>

<img src="bag.jpg"

alt="Product 1">

<p>Bag with 2 Extra pockets</p>

<p><span>$12</span></p>

<form method="post" action="shop.php">

<input type="hidden"

name="product_id"

value="1">

<label for="product1_quantity">

Quantity:

</label>

<input type="number"

id="product1_quantity"

name="product_quantity"

value=""
min="0"

max="10">

<button type="submit"

name="add_to_cart">

Add to Cart</button>

</form>

</li>

<li>

<h3>GFG T-Shirt</h3>

<img src=“tshirts.jpg"

alt="Product 2">

<p>100% cotton t-shirts</p>

<p>

<span>$20</span>

</p>

<form method="post" action="shop.php">

<input type="hidden"

name="product_id"

value="2">

<label for="product2_quantity">

Quantity:

</label>

<input type="number"

id="product2_quantity"

name="product_quantity"

value=""

min="0"

max="10">
<button type="submit"

name="add_to_cart">

Add to Cart

</button>

</form>

</li>

<li>

<h3>GFG Hoodie</h3>

<img src="hoodie.jpg"

alt="Product 3">

<p>Black Color Stylish Hoodie</p>

<p>

<span>$50</span>

</p>

<form method="post" action="shop.php">

<input type="hidden"

name="product_id"

value="3">

<label for="product3_quantity">

Quantity:

</label>

<input type="number"

id="product3_quantity"

name="product_quantity"

value=""

min="0"

max="10">

<button type="submit"
name="add_to_cart">

Add to Cart

</button>

</form>

</li>

<!-- Add forms for the other products here -->

</ul>

</section>

</main>

<footer>

<p>&copy; 2023 GFG Shopping Web Application</p>

</footer>

<script src="shop.php"></script>

</body>

</html>

Shop.css
body {

margin: 0;

padding: 0;

background-color: white;

color: green;

font-family: Arial, sans-serif;

header {

background-color: white;

color: green;

padding: 20px;
}

nav {

background-color: #999999;

padding: 10px;

nav ul {

list-style: none;

margin: 2px;

padding: 0;

nav a {

color: red;

text-decoration: none;

padding: 2px;

display: flex;

cursor: pointer;

nav a:hover {

background-color: green;

color: red;

main {

max-width: 1200px;

margin: 0 auto;

padding: 20px;
}

section {

margin-bottom: 20px;

h2 {

font-size: 32px;

margin-top: 0;

ul {

list-style: none;

margin: 0;

padding: 0;

display: flex;

flex-wrap: wrap;

li {

margin-right: 20px;

margin-bottom: 20px;

flex-basis: calc(33.33% - 20px);

h3 {

font-size: 24px;

margin-top: 0;

}
img {

max-width: 200px;

height: 200px;

margin-bottom: 10px;

button {

background-color: #333;

color: #fff;

border: none;

padding: 10px;

cursor: pointer;

Cart.php
<!DOCTYPE html>

<html>

<head>

<title>Shopping Cart</title>

</head>

<style>

body {

background-color: green;

header, nav, main, footer {

background-color: white;

}
table {

border-collapse: collapse;

width: 100%;

th, td {

text-align: left;

padding: 8px;

th {

background-color: #dddddd;

tr:nth-child(even) {

background-color: #f2f2f2;

footer {

background-color: green;

margin-top: 348px;

color: black;

max-width: 264px;

</style>

<body>

<header>

<h1><?php session_start();

$user = $_SESSION['user'];
echo $user['name']; ?> Shopping Cart</h1>

</header>

<nav>

<ul>

<li>

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

</li>

<li>

<a href="shop.html">Products</a>

</li>

<li>

<a href=

"[email protected]">Contact Us</a>

</li>

<li>

<a href="cart.php">Cart</a>

</li>

</ul>

</nav>

<main>

<section>

<table>

<tr>

<th>Product Name </th>

<th>Quantity </th>

<th>Price </th>

<th>Total </th>

</tr>
<?php

$servername = "localhost";

$username = "root";

$password = "";

$dbname = "shp";

// Create connection

$conn =

new mysqli($servername, $username, $password, $dbname);

// Check connection

if ($conn->connect_error) {

die("Connection failed: " . $conn->connect_error);

$total = 0;

// Loop through items in cart and display in table

foreach ($_SESSION['cart'] as $product_id => $quantity) {

$sql = "SELECT * FROM products WHERE id = $product_id";

$result = $conn->query($sql);

if ($result->num_rows > 0) {

$row = $result->fetch_assoc();

$name = $row['name'];

$price = $row['price'];

$item_total = $quantity * $price;

$total += $item_total;

echo "<tr>";

echo "<td>$name</td>";

echo "<td>$quantity</td>";

echo "<td>$price $</td>";


echo "<td>$item_total $</td>";

echo "</tr>";

// Display total

echo "<tr>";

echo "<td colspan='3'>Total:</td>";

echo "<td>$total $</td>";

echo "</tr>";

?>

</table>

<form action="checkout.php" method="post">

<input type="submit"

value="Checkout"

class="button" />

</form>

</section>

</main>

<footer> <p>&COPY;2023 GFG Shopping Web Application</p>

</footer>

</body>

</html>

Checkout.php
<!DOCTYPE html>

<html>

<head>

<title>Checkout Page</title>

<link rel="stylesheet"

type="text/css"
href="checkout.css">

</head>

<style>

body {

background-color: #ffffff;

font-family: Arial, sans-serif;

header {

background-color: green;

color: #ffffff;

padding: 20px;

nav ul {

margin: 0;

padding: 0;

list-style: none;

nav li {

display: inline-block;

margin-right: 20px;

nav a {

color: #ffffff;

text-decoration: none;

nav a:hover {

text-decoration: underline;

section {
max-width: 600px;

margin: 0 auto;

padding: 20px;

h1 {

color: green;

font-size: 32px;

margin-bottom: 20px;

h2 {

color: green;

font-size: 24px;

margin-bottom: 10px;

label {

display: block;

margin-bottom: 5px;

color: #666666;

input[type="text"],

input[type="email"] {

width: 100%;

padding: 10px;

border: 1px solid #cccccc;

border-radius: 5px;

margin-bottom: 10px;

font-size: 16px;

input[type="submit"] {
background-color: green;

color: #ffffff;

padding: 10px 20px;

border: none;

border-radius: 5px;

font-size: 16px;

cursor: pointer;

input[type="submit"]:hover {

background-color: #228B22;

footer {

background-color: green;

color: #ffffff;

padding: 20px;

text-align: center;

</style>

<body>

<header>

<nav>

<ul>

<li>

<a href="shop.php">Home</a>

</li>

<li>

<a href="shop.php">Shop</a>

</li>

<li>
<a href="cart.php">Cart</a>

</li>

<li>

<a href=

"dhiyanesh2004@gmail,com">Contact</a>

</li>

</ul>

</nav>

</header>

<section>

<h1>Checkout</h1>

<form action="thanks.php" method="post">

<h2>Billing Information</h2>

<label for="name">Name:</label>

<input type="text"

id="name"

name="name" required>

<label for="email">Email:</label>

<input type="email"

id="email"

name="email" required>

<label for="address">Address:</label>

<input type="text"

id="address"

name="address" required>

<label for="city">City:</label>

<input type="text"
id="city"

name="city" required>

<label for="state">State:</label>

<input type="text"

id="state"

name="state" required>

<label for="zip">Zip Code:</label>

<input type="text"

id="zip"

name="zip" required>

<h2>Payment Information</h2>

<label for="cardholder">Name on Card:</label>

<input type="text" id="cardholder"

name="cardholder" required>

<label for="cardnumber">Card Number:</label>

<input type="text"

id="cardnumber"

name="cardnumber" required

pattern="\d{4}-?\d{4}-?\d{4}-?\d{4}" required=>

<label for="expmonth">Expiration Month:</label>

<input type="text"

id="expmonth"

name="expmonth" required>

<label for="expyear">Expiration Year:</label>

<input type="text"

id="expyear"

name="expyear" required>

<label for="cvv">CVV:</label>

<input type="text"
id="cvv"

name="cvv" required>

<input type="submit"

value="Place Order">

</form>

</section>

<footer>

<p>&copy; 2023 Shopping Web Application</p>

</footer>

</body>

</html>

Thanks.php
<html>

<head>

<style>

body {

background-color: #f2f2f2;

font-family: Arial, sans-serif;

h1 {

color: #008000;

font-size: 2.5em;

text-align: center;

margin-top: 50px;

p{

color: #333;
font-size: 1.2em;

text-align: center;

margin-top: 20px;

</style>

</head>

<?php

// Start the session

session_start();

// Retrieve the customer name from the session variable

if (isset($_SESSION['user'])) {

$user = $_SESSION['user'];

$customerName = $user['name'];

} else {

$customerName = "Valued Customer";

// Display the thank you message

echo "<h1>Thank You, $customerName!</h1>";

echo

"<p>Your order has been received and will be delivered soon.</p>";

?>

</html>

Logout.php
<?php
session_start();

// Destroy all sessions

session_destroy();

// Redirect to login page

header("Location: login.html");

exit;

?>

DataBase
Connect mysql to visual studio code and set user name localhost, port 3306

CREATE TABLE users (

name TEXT NOT NULL ,

username VARCHAR(18) NOT NULL PRIMARY KEY,

email VARCHAR(21) NOT NULL UNIQUE,

password TEXT NOT NULL );

CREATE TABLE products (

id INT NOT NULL ,

name TEXT NOT NULL,

price INT NOT NULL,

PRIMARY KEY (id)

);
Register.jsp
<!DOCTYPE html>

<html>

<head>

<title>Registration Page</title>

</head>

<body>

<h1>Registration Page</h1>

<form method="post" action="RegisterServlet">

<label for="name">Name:</label>

<input type="text" id="name" name="name" required>

<label for="username">Username:</label>

<input type="text" id="username" name="username" required>

<label for="email">Email:</label>

<input type="email" id="email" name="email" required>

<label for="password">Password:</label>

<input type="password" id="password" name="password" required>

<input type="submit" value="Register">

</form>

</body>

</html>

RegisterServelet.java
import java.io.IOException;

import java.io.PrintWriter;

import javax.servlet.ServletException;

import javax.servlet.annotation.WebServlet;

import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

@WebServlet("/RegisterServlet")

public class RegisterServlet extends HttpServlet {

protected void doPost(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

response.setContentType("text/html");

PrintWriter out = response.getWriter();

String name = request.getParameter("name");

String username = request.getParameter("username");

String email = request.getParameter("email");

String password = request.getParameter("password");

// Perform database operations to insert user data

// Note: Replace this with your actual database code

out.println("<h2>Registration Successful</h2>");

out.println("Thank you for registering, " + name + "!<br>");

out.println("You'll be redirected to the login page shortly...");

// Redirect to login page after registration

response.setHeader("Refresh", "3;URL=login.jsp");

You might also like