Scribd
Upload
3 views

Using only HTML-WPS Office

Html

Uploaded by

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

Using only HTML-WPS Office

Html

Uploaded by

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

Using only HTML, CSS, and JavaScript to interact with a database directly is not secure or recommended

for real-world applications, as JavaScript cannot directly communicate with databases (like MySQL)
without a server-side language like PHP, Python, or Node.js. However, for educational purposes or
testing, you can use local storage or indexedDB (a browser-based database) as an alternative.

Below, I'll show you how to create a mock database with JavaScript using localStorage. This will simulate
a simple signup and login system.

---

Example: Simple Database with JavaScript

HTML (index.html)

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Degree - Connect</title>

<link rel="stylesheet" href="styles.css">

</head>

<body>

<header>

<h1>Degree</h1>

</header>
<main>

<!-- Signup Form -->

<section id="signup">

<h2>Create an Account</h2>

<form id="signupForm">

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

<button type="submit">Sign Up</button>

</form>

</section>

<!-- Login Form -->

<section id="login">

<h2>Login</h2>

<form id="loginForm">

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

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


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

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

<button type="submit">Login</button>

</form>

</section>

</main>

<script src="script.js"></script>

</body>

</html>

---

CSS (styles.css)

/* General Styles */

body {

font-family: Arial, sans-serif;

margin: 0;

padding: 0;

background: #f0f2f5;

color: #333;
text-align: center;

header {

background: #4267B2;

color: white;

padding: 1rem 0;

main {

margin: 2rem auto;

width: 80%;

max-width: 500px;

form {

background: white;

padding: 1.5rem;

margin: 1rem 0;

border-radius: 10px;

box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);

form label {

display: block;
margin-top: 10px;

font-weight: bold;

form input {

width: 100%;

padding: 0.5rem;

margin-top: 5px;

margin-bottom: 15px;

border: 1px solid #ddd;

border-radius: 5px;

form button {

width: 100%;

padding: 0.7rem;

background: #4267B2;

color: white;

border: none;

border-radius: 5px;

cursor: pointer;

form button:hover {

background: #365899;
}

---

JavaScript (script.js)

// Function to save user to "localStorage"

function saveUser(username, email, password) {

const users = JSON.parse(localStorage.getItem('users')) || [];

users.push({ username, email, password });

localStorage.setItem('users', JSON.stringify(users));

// Function to check user credentials

function findUser(email, password) {

const users = JSON.parse(localStorage.getItem('users')) || [];

return users.find(user => user.email === email && user.password === password);

// Handle Signup

document.getElementById('signupForm').addEventListener('submit', (e) => {

e.preventDefault();

const username = document.getElementById('username').value;


const email = document.getElementById('email').value;

const password = document.getElementById('password').value;

saveUser(username, email, password);

alert('Signup successful! You can now log in.');

e.target.reset();

});

// Handle Login

document.getElementById('loginForm').addEventListener('submit', (e) => {

e.preventDefault();

const email = document.getElementById('loginEmail').value;

const password = document.getElementById('loginPassword').value;

const user = findUser(email, password);

if (user) {

alert(`Welcome back, ${user.username}!`);

} else {

alert('Invalid email or password. Please try again.');

});

---
How It Works

1. Signup Process:

The saveUser function adds the user to the browser's localStorage, which acts as a mock database.

Passwords are stored in plain text here (not secure but sufficient for learning purposes).

2. Login Process:

The findUser function checks if the email and password match any user in localStorage.

If a match is found, the user is logged in.

3. LocalStorage:

Data is stored in the browser. Open developer tools (F12 → Application tab → Local Storage) to view the
data.
---

Limitations

1. Security:

Passwords are not encrypted. For real applications, you need backend hashing (e.g., bcrypt).

Data is accessible to anyone using the same browser.

2. Scalability:

LocalStorage is limited to the user's browser. It cannot be accessed across devices.

3. No Server Communication:

This setup is entirely client-side and cannot support features like sharing data between users.
---

When to Use

Educational projects.

Prototyping or demonstrating concepts.

Offline applications where local storage suffices.

For real-world applications, you'll need to use a proper backend and database. Let me know if you'd like
guidance on that!

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy