Scribd
Upload
41 views

Webtech Codes

Uploaded by

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

Webtech Codes

Uploaded by

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

HOME PAGE <!

-- navigation bar -->

final_homepage.html <div class="nav">

<!DOCTYPE html> <input type="checkbox" id="check" />

<html lang="en"> <div class="btn_one">

<head> <label for="check">

<meta charset="UTF-8"> <i class="fa-solid fa-bars"></i>

<meta name="viewport" content="width=device- </label>


width, initial-scale=1.0"> </div>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="final_homepage.css"/> <div class="sidebar_menu">
<link rel="preconnect" <div class="logo-nav">
href="https://fonts.googleapis.com" />
<a href="#">GLOBO<span>MART</span></a>
<link rel="preconnect"
href="https://fonts.gstatic.com" crossorigin /> </div>

<link rel="stylesheet"
href="https://fonts.googleapis.com/css2?
<div class="btn_two">
family=Material+Symbols+Outlined:opsz,wght,FILL,GR
AD@24,400,0,0" /> <label for="check">
<meta name="viewport" content="width=device- <i class="fa-solid fa-xmark"></i>
width, initial-scale=1.0">
</label>
<link href="https://fonts.cdnfonts.com/css/amazon-
ember" rel="stylesheet"> </div>

<link href="https://fonts.googleapis.com/css2?
family=Major+Mono+Display&display=swap" <div class="menu">
rel="stylesheet">
<ul>
<link
<li>
href="https://fonts.googleapis.com/css2?
family=Poppins&display=swap" <i class="fa-solid fa-image"></i>

rel="stylesheet"/> <a href="final_homepage.html">Home</a>

<link href="https://fonts.googleapis.com/css2? </li>


family=Major+Mono+Display&family=Montserrat&dis
<li>
play=swap" rel="stylesheet">
<i class="fa-solid fa-arrow-up-right-from-
<link
square"></i>
rel="stylesheet"
<a href="#">Wishlist</a>
href="https://cdnjs.cloudflare.com/ajax/libs/font-
</li>
awesome/6.4.0/css/all.min.css">
<li>
<i class="fa-solid fa-photo-film"></i>
<title>Home Page</title>
<a href="#">Cart</a>
</head>
</li>
<body>
<li>
<i class="fa-solid fa-calendar-days"></i>
<a href="#">Order History</a> <div class="ls-button">
</li> <a href="final_siginpage.html"
class="signup">Sign Up</a>
<li>
</div>
<i class="fa-solid fa-store"></i>
<a href="#">About us</a>
</li>
<div class="icon-cart">
<li>
<svg aria-hidden="true"
<i class="fa-solid fa-phone"></i> xmlns="http://www.w3.org/2000/svg" fill="none"
<a href="#">Contact</a> viewBox="0 0 18 20">

</li> <path stroke="currentColor" stroke-


linecap="round" stroke-linejoin="round" stroke-
<li> width="2" d="M6 15a2 2 0 1 0 0 4 2 2 0 0 0 0-4Zm0
<i class="fa-regular fa-comments"></i> 0h8m-8 0-1-4m9 4a2 2 0 1 0 0 4 2 2 0 0 0 0-4Zm-9-
4h10l2-7H3m2 7L3 4m0 0-.792-3H1"/>
<a href="#">Feedback</a>
</svg>
</li>
<span>0</span>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- first div -->
<form action="index.html">
<div class="header">
<div class="first_block">
<h2>Discover, Shop, Delight</h2>
<div class="logo">
<p>Your one-stop shop for all your needs, with
<h1>GLOBO<span>MART</span></h1> easy browsing, secure transactions, and fast
delivery.</p>
</div>
<button class="test_now">SHOP NOW</button>
</div>
<div class="header-search">
</form>
<input class="header-search-input" type="text">
<span class="material-symbols-outlined">search
</span> <!-- to be edited --> <!-- second div -->
</div>
<div class="second_div">
<div class="button-header"> <h2>NEW COLLECTION</h2>
<div class="ls-button"> <div class="container">
<a href="final_login_page.html"
class="login">Login</a>
</div>
<div class="listProduct">
</div>
</div>
<div class="cartTab">
<h1>Shopping Cart</h1>
<div class="listCart">

</div>
<div class="btn">
<button class="close">CLOSE</button>
<button class="checkOut">Check Out</button>
</div>
</div>
<!-- fourth block -->
<div class="totalAmount">Total Amount: $<span
id="totalAmountValue">0</span></div>

<div class="footer">
<p>GLOBO MART | Manipal University Jaipur | Web
Tech Project</p>
</div>

<script src="app.js"></script>
</body>
</html>
SIGN IN PAGE </div>

final_signin_page.html
<!DOCTYPE html> <div class="sidebar_menu">

<html lang="en"> <div class="logo">

<head> <a href="#">GLOBO<span>MART</span></a>

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

<meta http-equiv="X-UA-Compatible"
content="IE=edge" /> <div class="btn_two">
<meta name="viewport" content="width=device- <label for="check">
width, initial-scale=1.0" />
<i class="fa-solid fa-xmark"></i>
<title></title>
</label>
<link rel="stylesheet" href="final_siginpage.css">
</div>
<link rel="preconnect"
href="https://fonts.googleapis.com" />
<link rel="preconnect" <div class="menu">
href="https://fonts.gstatic.com" crossorigin />
<ul>
<link href="https://fonts.googleapis.com/css2?
<li>
family=Major+Mono+Display&display=swap"
rel="stylesheet"> <i class="fa-solid fa-image"></i>
<link <a href="final_homepage.html">Home</a>
href="https://fonts.googleapis.com/css2? </li>
family=Poppins&display=swap"
<li>
rel="stylesheet"/>
<i class="fa-solid fa-arrow-up-right-from-
<link href="https://fonts.googleapis.com/css2? square"></i>
family=Major+Mono+Display&family=Montserrat&dis
play=swap" rel="stylesheet"> <a href="#">Wishlist</a>

<link </li>

rel="stylesheet" <li>

href="https://cdnjs.cloudflare.com/ajax/libs/font- <i class="fa-solid fa-photo-film"></i>


awesome/6.4.0/css/all.min.css" <a href="#">Cart</a>
/> </li>
</head> <li>
<body> <i class="fa-solid fa-calendar-days"></i>
<div class="main_box"> <a href="#">Order History</a>
<input type="checkbox" id="check" /> </li>
<div class="btn_one"> <li>
<label for="check"> <i class="fa-solid fa-store"></i>
<i class="fa-solid fa-bars"></i> <a href="#">About us</a>
</label> </li>
<li> <input type="password" id="password1"
placeholder="Password" name="password"
<i class="fa-solid fa-phone"></i> onkeyup="return validate()">
<a href="#">Contact</a> <div class="errors">
</li> <ul>
<li> <li id="upper">Atleast one uppercase</li>
<i class="fa-regular fa-comments"></i> <li id="lower">Atleast one lowercase</li>
<a href="#">Feedback</a> <li id="special_char">Atleast one special
</li> symbol</li>

</ul> <li id="number">Atleast one number</li>

</div> <li id="length">Atleast 8 characters</li>


</ul>

<div class="social_media"> </div>

<ul>
<a href="#"><i class="fa-brands fa- <button class="sub" type="submit"
facebook"></i></i></a> value="register">Create Account</button>

<a href="#"><i class="fa-brands <header class="login">


fa-twitter"></i></a> <p>Already a user? <a
<a href="#"><i class="fa-brands fa- href="final_login_page.html">Login</a></p>
instagram"></i></i></a> </header>
<a href="#"><i class="fa-brands </form>
fa-youtube"></i></a>
</div>
</ul>
</ul>
</div>
<!-- <ul class="username_box">
</div>
<div class="box">
<div class="container">
<h3>Login</h3>
<h1>GLOBO<span>MART</span></h1>
<label for="username2">Username:</label>
<ul class="username_box">
<input type="text" id="username2"
<div class="box"> placeholder="username">
<form action="test.php" method="post"> <label for="password2">Password:</label>
<h2>Sign Up</h2> <input type="password" id="password2"
<input type="text" id="name" placeholder="Full placeholder="enter password">
Name" name="fullname"> <button class="sub"
<input type="email" id="email" type="submit">Submit</button>
placeholder="Email" name="email"> </div>
<input type="tel" id="phno" </ul> -->
placeholder="Mobile Number" name="number"
pattern="[0-9]{10}" required> </div>
<input type="text" id="username1" </div>
placeholder="Username" name="username">
<script>
function validate(){ len.style.color='green'
var pass=document.getElementById('password1'); } }
var upper=document.getElementById('upper'); </script>
var lower=document.getElementById('lower'); </body>
var num=document.getElementById('number'); </html>
var len=document.getElementById('length'); <! -- Sidebar html ends here -->
var <! -- <div class="container">
sp_char=document.getElementById('special_char');
<ul class="username_box">
if(pass.value.match(/[0-9]/)){
<div class="box">
num.style.color='green'
<h3>Sign Up</h3>
}
<label for="username1">Username:</label>
else {
<input type="text" id="username1"
num.style.color='red' placeholder="username">
} <label for="password1">Password:</label>
if(pass.value.match(/[A-Z]/)){ <input type="password" id="password1"
placeholder="set password">
upper.style.color='green'
<button class="sub"
} type="submit">Submit</button>
else { </div>
upper.style.color='red' </ul>
} <ul class="username_box">
if (pass.value. match(/[a-z]/)) { <div class="box">
lower. style. color='green' <h3>Login</h3>
} <label for="username2">Username:</label>
else { <input type="text" id="username2"
lower. style. color='red' placeholder="username">

} <label for="password2">Password:</label>

if(pass.value.match(/[!\@\#\$\%\^\&\*\(\)\_\-\+\ <input type="password" id="password2"


=\?\>\<\.\,]/)){ placeholder="enter password">

sp_char.style.color='green' <button class="sub"


type="submit">Submit</button>
}
</div>
else{
</ul>
sp_char.style.color='red'
</body>
}
</html> -->
if(pass.value.length<8){
len.style.color='red'
}
else{
LOGIN PAGE </div>

final_login_page.html <div class="sidebar_menu">

<!DOCTYPE html> <div class="logo">

<html lang="en"> <a href="#">GLOBO<span>MART</span></a>

<head> </div>

<meta charset="UTF-8" />


<meta http-equiv="X-UA-Compatible" <div class="btn_two">
content="IE=edge" /> <label for="check">
<meta name="viewport" content="width=device- <i class="fa-solid fa-xmark"></i>
width, initial-scale=1.0" />
</label>
<title></title>
</div>
<link rel="stylesheet" href="final_login_page.css">
<div class="menu">
<link rel="preconnect"
href="https://fonts.googleapis.com" /> <ul>

<link rel="preconnect" <li>


href="https://fonts.gstatic.com" crossorigin />
<i class="fa-solid fa-image"></i>
<link href="https://fonts.googleapis.com/css2?
<a
family=Major+Mono+Display&display=swap"
href="http://127.0.0.1:5500/final_homepage.html">H
rel="stylesheet">
ome</a>
<link
</li>
href="https://fonts.googleapis.com/css2?
<li>
family=Poppins&display=swap"
<i class="fa-solid fa-arrow-up-right-from-
rel="stylesheet"/>
square"></i>
<link href="https://fonts.googleapis.com/css2?
<a href="#">Wishlist</a>
family=Major+Mono+Display&family=Montserrat&dis
play=swap" rel="stylesheet"> </li>
<link <li>
rel="stylesheet" <i class="fa-solid fa-photo-film"></i>
href="https://cdnjs.cloudflare.com/ajax/libs/font- <a href="#">Cart</a>
awesome/6.4.0/css/all.min.css"
</li>
/>
<li>
</head>
<i class="fa-solid fa-calendar-days"></i>
<body>
<a href="#">Order History</a>
<div class="main_box">
</li>
<input type="checkbox" id="check" />
<li>
<div class="btn_one">
<i class="fa-solid fa-store"></i>
<label for="check">
<a href="#">About us</a>
<i class="fa-solid fa-bars"></i>
</li>
</label>
<li>
<i class="fa-solid fa-phone"></i> </form>
<a href="#">Contact</a> </div>
</li> </ul>
<li> </div>
<i class="fa-regular fa-comments"></i> </div>
<a href="#">Feedback</a> </body>
</li> </html>
</ul>
</div>
<div class="social_media">
<ul> app.js
<a href="#"><i class="fa-brands fa- require("dotenv").config();
facebook"></i></i></a>
const app = require('express')();
<a href="#"><i class="fa-brands
fa-twitter"></i></a> var http = require('http').Server(app);

<a href="#"><i class="fa-brands fa- const paymentRoute =


instagram"></i></i></a> require('./routes/paymentRoute');

<a href="#"><i class="fa-brands app.use('/',paymentRoute);


fa-youtube"></i></a> http.listen(3000, function(){
</ul> console.log('Server is running');
</div> });
</div>
<div class="container"> paymentController.js
<h1>GLOBO<span>MART</span></h1> const Razorpay = require('razorpay');
<ul class="username_box"> const { RAZORPAY_ID_KEY, RAZORPAY_SECRET_KEY } =
<div class="box"> process.env;

<h3>Login</h3> const razorpayInstance = new Razorpay({

<br><br> key_id: RAZORPAY_ID_KEY,

<form action="login.php" method="post"> key_secret: RAZORPAY_SECRET_KEY

<!-- <label });


for="username2">Username:</label> --> const renderProductPage = async(req,res)=>{
<input type="text" id="username2" try {
placeholder="Username" name="username">
res.render('product');
<!-- <label for="password2">Password:</label>
--> } catch (error) {
<input type="password" id="password2" console.log(error.message);
placeholder="Password" name="password">
}
<button class="sub"
}
type="submit">Submit</button>
const createOrder = async(req,res)=>{ }
try { product.ejs
const amount = req.body.amount*100 <div class="product-container">
const options = { <img
src="https://cdn.pixabay.com/photo/2017/03/19/01/
amount: amount,
43/living-room-2155376_960_720.jpg"
currency: 'INR', alt="Armchair">

receipt: '[email protected]' <p>Armchair</p>

} <p><b>Amount: Rs. 1500</b></p>

razorpayInstance.orders.create(options, <form class="pay-form">

(err, order)=>{ <input type="hidden" name="name"


value="Armchair">
if(!err){
<input type="hidden" name="amount"
res.status(200).send({ value="1500">
success:true, <input type="hidden" name="description"
msg:'Order Created', value="Armchair Buying">

order_id:order.id, <input type="submit" value="Pay Now">

amount:amount, </form>

key_id:RAZORPAY_ID_KEY, </div>

product_name:req.body.name, <div class="product-container">

description:req.body.description, <img
src="https://cdn.pixabay.com/photo/2016/11/18/17/
contact:"8567345632", 20/living-room-1835923_960_720.jpg" alt="Shoes">
name: "Sandeep Sharma", <p>Shoes</p>
email: "[email protected]" <p><b>Amount: Rs. 4500</b></p>
}); <form class="pay-form">
} <input type="hidden" name="name"
value="Shoes">
else{ res.status(400).send({success:false,msg <input type="hidden" name="amount"
:'Something went wrong!'}); value="4500">
} <input type="hidden" name="description"
value="Shoes Buying">
}
<input type="submit" value="Pay Now">
);
</form>
} catch (error) {
</div>
console.log(error.message);
</body>
}
</html>
}
</html>
module.exports = {
<script
renderProductPage,
src="https://checkout.razorpay.com/v1/checkout.js"><
createOrder /script>
<script> },
$(document).ready(function(){ "theme": {
"color": "#2300a3"
$('.pay-form').submit(function(e){ }
e.preventDefault(); };
var formData = $(this).serialize(); var
$.ajax({ razorpayObject = new Razorpay(options);

url:"/createOrder",
razorpayObject.on('payment.failed', function
type:"POST", (response){
data: formData, alert("Payment Failed");

success:function(res){ });
razorpayObject.open();
if(res.success){
}
var options = {
else{
"key":
""+res.key_id+"", alert(res.msg);

"amount": }
""+res.amount+"", }
"curre })
ncy": "INR",
"nam
e": ""+res.product_name+"", });

"desc });
ription": ""+res.description+"", </script>
"imag
products.json
e": "https://dummyimage.com/600x400/000/fff",
[
"orde
r_id": ""+res.order_id+"", {
"hand "id": 1,
ler": function (response){
alert("Payment Succeeded"); "name":" LD01 LOUNGE CHAIR",
}, "price": 200,
"prefil "image": "1.png"
l": {
},

"contact":""+res.contact+"", {
"id": 2,
"name": ""+res.name+"",
"name":" LD02 LOUNGE CHAIR",
"price": 250,
"email": ""+res.email+""
"image": "2.png"
},
"notes" : { },
"description":""+res.description+"" {
"id": 3, // Establishing a connection to the database
"name":" LD03 LOUNGE CHAIR", $conn = new mysqli('localhost', 'root', '', 'test');
"price": 180, // Checking the connection
"image": "3.png" if ($conn->connect error) {
}, die('Connection Failed: ' . $conn->connect error);
... } else {
] // Preparing the INSERT statement
$stmt = $conn->prepare("INSERT INTO registration
(fullname, email, number, username, password)
paymentRoute.js VALUES (?, ?, ?, ?, ?)");
const express = require('express'); // Binding parameters
const payment_route = express(); $stmt->bind_param("ssiss", $fullname, $email,
$number, $username, $password);

const bodyParser = require('body-parser'); // Executing the statement

payment_route.use(bodyParser.json()); $stmt->execute();

payment_route.use(bodyParser.urlencoded({ extende // Closing the statement


d:false })); $stmt->close();
const path = require('path'); // Closing the connection
payment_route.set('view engine','ejs'); $conn->close();
payment_route.set('views',path.join(__dirname, // Redirecting to the login page
'../views'));
header("Location: final_login_page.html");
const paymentController =
require('../controllers/paymentController'); exit;
}

payment_route.get('/', ?>
paymentController.renderProductPage);
payment_route.post('/createOrder',
login.php
paymentController.createOrder);
<?php
$username = $_POST['username'];
module.exports = payment_route;
$password = $_POST['password'];

test.php
$con = new mysqli("localhost", "root", "", "test");
<?php
if ($con->connect error) {
$fullname = $_POST['fullname'];
die("Failed to connect: " . $con->connect error);
$email = $_POST['email'];
} else
$number = $_POST['number'];
{
$username = $_POST['username'];
$stmt = $con->prepare("SELECT * FROM registration
$password = $_POST['password'];
WHERE username = ?");
$stmt->bind_param("s", $username);
$stmt->execute();
$stmt_result = $stmt->get_result();
if ($stmt_result->num_rows > 0) {
$data = $stmt_result->fetch_assoc();
if ($data['password'] === $password) {
// Start a session to maintain login status
session_start();
// Store user information in session variables if
needed
$_SESSION['username'] = $username;
// Redirect to homepage upon successful login
header("Location: final_homepage.html");
exit;
} else {
echo "<h2>Invalid Email or password</h2>";
}
} else {
echo "<h2>Invalid Email or password</h2>";
}
}
?>

You might also like