Below is a simple example to create a user registration system using PHP, MySQL, CSS, and JavaScript.
First, create a MySQL database and a table for users. You can run the following SQL commands in your MySQL database:
CREATE DATABASE my_database; USE my_database; CREATE TABLE users ( id INT(11) UNSIGNED AUTO_INCREMENT PRIMARY KEY, username VARCHAR(50) NOT NULL, email VARCHAR(50) NOT NULL, password VARCHAR(255) NOT NULL, created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP );
This is the front-end part of the registration system. Write the HTML code in index.html
.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <title>User Registration</title> </head> <body> <div class="container"> <h2>User Registration</h2> <form id="registrationForm" action="register.php" method="POST"> <div class="form-group"> <label for="username">Username:</label> <input type="text" name="username" id="username" required> </div> <div class="form-group"> <label for="email">Email:</label> <input type="email" name="email" id="email" required> </div> <div class="form-group"> <label for="password">Password:</label> <input type="password" name="password" id="password" required> </div> <button type="submit">Register</button> </form> </div> <script src="script.js"></script> </body> </html>
This is the CSS for basic styling.
body { font-family: Arial, sans-serif; background-color: #f4f4f4; display: flex; justify-content: center; align-items: center; height: 100vh; } .container { background: white; padding: 20px; border-radius: 5px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } .form-group { margin-bottom: 15px; } label { display: block; margin-bottom: 5px; } input { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 4px; } button { padding: 10px; background: #007bff; border: none; color: white; border-radius: 4px; cursor: pointer; } button:hover { background: #0056b3; }
You can add some basic validation if necessary.
document.getElementById("registrationForm").addEventListener("submit", function(event) { let username = document.getElementById("username").value; let email = document.getElementById("email").value; let password = document.getElementById("password").value; if (username === "" || email === "" || password === "") { alert("All fields are required."); event.preventDefault(); // Prevent form from submitting } });
This is the PHP code to handle registration and store user data in the database.
<?php $servername = "localhost"; $username = "root"; // Change this as needed $password = ""; // Change this as needed $dbname = "my_database"; // Create connection $conn = new mysqli($servername, $username, $password, $dbname); // Check connection if ($conn->connect_error) { die("Connection failed: " . $conn->connect_error); } if ($_SERVER["REQUEST_METHOD"] == "POST") { $username = $_POST['username']; $email = $_POST['email']; $password = password_hash($_POST['password'], PASSWORD_DEFAULT); // Hashing password // Check if username or email already exists $sql = "SELECT * FROM users WHERE username='$username' OR email='$email'"; $result = $conn->query($sql); if ($result->num_rows > 0) { echo "Username or email already exists."; } else { // Insert user into the database $sql = "INSERT INTO users (username, email, password) VALUES ('$username', '$email', '$password')"; if ($conn->query($sql) === TRUE) { echo "Registration successful!"; } else { echo "Error: " . $sql . "<br>" . $conn->error; } } } $conn->close(); ?>
register.php
with your own.PHP provides a set of functions to work with MySQL databases. As of the more…
Below is a PHP script that demonstrates how to implement pagination when displaying records from…
Below is a simple PHP script that demonstrates how to search a MySQL database table…
Transferring a WordPress site to a new domain involves several detailed steps to ensure that…
Creating client-server programs in C++ helps in understanding network programming and communication between applications over…
Creating a bookmark system for WordPress can range from simple solutions to more complex ones.…