Developing website on localhost using XAMPP. Here’s a basic guide:

  1. Install XAMPP:

    • Download XAMPP from the official website.
    • Follow the installation instructions for your operating system (Windows, macOS, or Linux).

  2. Start Apache and MySQL:

    • Open the XAMPP control panel.
    • Start the Apache server and MySQL database.

  3. Create a Database:

  4. Create Project Folder:

    • Navigate to the htdocs folder in your XAMPP installation directory.
    • Create a new folder for your project.

  5. Develop Your Website:

    • Create your HTML, CSS, and PHP files inside the project folder.
    • You can use any code editor of your choice (e.g., Visual Studio Code, Sublime Text).

  6. Access Your Project:

  7. Database Connection:

    • In your PHP files, establish a connection to the MySQL database using mysqli or any other suitable method.

  8. Test and Debug:

    • Continuously test your website on localhost.
    • Use the browser’s developer tools and error logs to debug any issues.

Replace “your_project_folder” with the actual name of your project folder. This setup allows you to work on your website or web application locally before deploying it to a live server.

The following example assumes a basic form that collects user data and stores it in a MySQL database. Adjust it according to your specific project requirements.

1. HTML (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>Simple Form</title>
</head>
<body>
<div class=”container”>
<h2>Contact Form</h2>
<form action=”process.php” method=”post”>
<label for=”name”>Name:</label>
<input type=”text” name=”name” required>

<label for=”email”>Email:</label>
<input type=”email” name=”email” required>

<button type=”submit”>Submit</button>
</form>
</div>
</body>
</html>

2. CSS (style.css):

body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}

.container {
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

form {
display: flex;
flex-direction: column;
}

label {
margin-bottom: 8px;
}

input {
padding: 8px;
margin-bottom: 16px;
}

button {
background-color: #4caf50;
color: #fff;
padding: 10px;
border: none;
border-radius: 4px;
cursor: pointer;
}

button:hover {
background-color: #45a049;
}

3. PHP (process.php):

<?php
// Assuming you’ve already established a database connection
// Replace ‘your_host’, ‘your_username’, ‘your_password’, and ‘your_database’ with your actual database credentials

$host = ‘your_host’;
$username = ‘your_username’;
$password = ‘your_password’;
$database = ‘your_database’;

$conn = new mysqli($host, $username, $password, $database);

if ($conn->connect_error) {
die(“Connection failed: ” . $conn->connect_error);
}

if ($_SERVER[“REQUEST_METHOD”] == “POST”) {
$name = $_POST[“name”];
$email = $_POST[“email”];

$sql = “INSERT INTO users (name, email) VALUES (‘$name’, ‘$email’)”;

if ($conn->query($sql) === TRUE) {
echo “Record added successfully”;
} else {
echo “Error: ” . $sql . “<br>” . $conn->error;
}
}

$conn->close();
?>

Create a database table named users with columns name and email before testing this code. Adjust the database connection details in the PHP file accordingly.

This example is quite basic and serves as a starting point. Depending on your project requirements, you may need to expand and customize the code further.

Shopping Cart
Scroll to Top