Scribd
Upload
27 views

Webtech Codes

Uploaded by

Khushi Gupta
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
27 views

Webtech Codes

Uploaded by

Khushi Gupta
Copyright
© © All Rights Reserved
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