Create a new folder for your project, e.g., instagram_clone.

File Structure:

Inside the instagram_clone folder, create the following structure:

Copy
instagram_clone/
├── assets/
│ ├── css/ # For CSS files
│ ├── js/ # For JavaScript files
│ └── images/ # For uploaded images
├── includes/ # For PHP includes (e.g., database connection)
├── pages/ # For individual pages (e.g., login, signup)
├── index.php # Homepage
├── login.php # Login page
├── signup.php # Signup page
└── profile.php # Profile page
3. Set Up MySQL Database
Open phpMyAdmin:

In your browser, go to http://localhost/phpmyadmin.

Create a Database:

Click on New in the left sidebar.

Enter a database name, e.g., instagram_clone, and click Create.

Create Tables:

We’ll design the database schema in the next step. For now, just create the
database.

4. Test PHP and MySQL

Create a Test PHP File:

Inside your instagram_clone folder, create a file named test.php.

Add the following code to test PHP and MySQL:

php
Copy
<?php
echo "PHP is working!";
?>
Open http://localhost/instagram_clone/test.php in your browser. You should see "PHP
is working!".

Test MySQL Connection:

Create a file named db_test.php:

php
Copy
<?php
$host = 'localhost';
$user = 'root'; // Default XAMPP MySQL username
$password = ''; // Default XAMPP MySQL password
$dbname = 'instagram_clone';

// Create connection
$conn = new mysqli($host, $user, $password, $dbname);

// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
echo "Connected successfully!";
?>
Open http://localhost/instagram_clone/db_test.php in your browser. You should see
"Connected successfully!".

Next Steps
Once you’ve completed the above steps, let me know, and we’ll move on to Step 2:
Database Design. I’ll provide the MySQL schema for the users, posts, likes,
comments, and follows tables, along with their relationships.

Let me know if you need further clarification or if you’re ready to proceed!

next
Great! Let’s move on to Step 2: Database Design.

Step 2: Database Design

We’ll design the MySQL schema for the following tables:

users: Stores user information.

posts: Stores posts made by users.

likes: Stores likes on posts.

comments: Stores comments on posts.

follows: Stores follow relationships between users.

1. Table: users
This table will store user information, including their credentials and profile
details.

sql
Copy
CREATE TABLE users (
id INT AUTO_INCREMENT PRIMARY KEY,
username VARCHAR(50) NOT NULL UNIQUE,
email VARCHAR(100) NOT NULL UNIQUE,
password VARCHAR(255) NOT NULL, -- Hashed password
profile_picture VARCHAR(255) DEFAULT 'default.jpg', -- Path to profile picture
bio TEXT,
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);
Fields:

id: Unique identifier for each user.

username: Unique username for login and display.

email: Unique email for login.

password: Hashed password for secure storage.

profile_picture: Path to the user’s profile picture (default is default.jpg).

bio: Optional bio for the user.

created_at: Timestamp for when the user was created.

2. Table: posts
This table will store posts made by users.

sql
Copy
CREATE TABLE posts (
id INT AUTO_INCREMENT PRIMARY KEY,
user_id INT NOT NULL,
image_path VARCHAR(255) NOT NULL, -- Path to the uploaded image
caption TEXT,
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE CASCADE
);
Fields:

id: Unique identifier for each post.

user_id: Foreign key referencing the users table to associate the post with a user.

image_path: Path to the uploaded image.

caption: Optional caption for the post.

created_at: Timestamp for when the post was created.

3. Table: likes
This table will store likes on posts.

sql
Copy
CREATE TABLE likes (
id INT AUTO_INCREMENT PRIMARY KEY,
user_id INT NOT NULL,
post_id INT NOT NULL,
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE CASCADE,
FOREIGN KEY (post_id) REFERENCES posts(id) ON DELETE CASCADE,
UNIQUE KEY unique_like (user_id, post_id) -- Ensure a user can like a post only
once
);
Fields:

id: Unique identifier for each like.

user_id: Foreign key referencing the users table to associate the like with a user.

post_id: Foreign key referencing the posts table to associate the like with a post.

created_at: Timestamp for when the like was created.

UNIQUE KEY: Ensures a user can like a post only once.

4. Table: comments
This table will store comments on posts.

sql
Copy
CREATE TABLE comments (
id INT AUTO_INCREMENT PRIMARY KEY,
user_id INT NOT NULL,
post_id INT NOT NULL,
comment TEXT NOT NULL,
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE CASCADE,
FOREIGN KEY (post_id) REFERENCES posts(id) ON DELETE CASCADE
);
Fields:

id: Unique identifier for each comment.

user_id: Foreign key referencing the users table to associate the comment with a
user.

post_id: Foreign key referencing the posts table to associate the comment with a
post.

comment: The comment text.

created_at: Timestamp for when the comment was created.

5. Table: follows
This table will store follow relationships between users.

sql
Copy
CREATE TABLE follows (
id INT AUTO_INCREMENT PRIMARY KEY,
follower_id INT NOT NULL, -- User who is following
following_id INT NOT NULL, -- User who is being followed
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
FOREIGN KEY (follower_id) REFERENCES users(id) ON DELETE CASCADE,
FOREIGN KEY (following_id) REFERENCES users(id) ON DELETE CASCADE,
UNIQUE KEY unique_follow (follower_id, following_id) -- Ensure a user can
follow another user only once
);
Fields:

id: Unique identifier for each follow relationship.

follower_id: Foreign key referencing the users table for the user who is following.

following_id: Foreign key referencing the users table for the user who is being
followed.

created_at: Timestamp for when the follow relationship was created.

UNIQUE KEY: Ensures a user can follow another user only once.
6. Create the Tables
Open phpMyAdmin (http://localhost/phpmyadmin).

Select the instagram_clone database.

Go to the SQL tab and paste the above CREATE TABLE statements one by one.

Click Go to create each table.

7. Verify the Tables

After creating the tables, you should see the following tables in your database:

users

posts

likes

comments

follows

Next Steps
Once you’ve created the tables, let me know, and we’ll move on to Step 3: Create
User Authentication. This will include:

Creating a signup system.

Creating a login system.

Implementing password hashing and session management.

Let me know if you need further clarification or if you’re ready to proceed!

next
Great! Let’s move on to Step 3: Create User Authentication. This step will cover:

Signup System: Allow users to create an account.

Login System: Allow users to log in.

Password Hashing: Securely store passwords using password_hash().

Session Management: Use PHP sessions to keep users logged in.

Input Validation: Ensure secure and valid user inputs.

Step 3: Create User Authentication

1. Create the Signup System
Create the Signup Form:

Inside the instagram_clone folder, create a file named signup.php.

Add the following HTML code for the signup form:

html
Copy
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Signup - Instagram Clone</title>
<link rel="stylesheet" href="assets/css/styles.css">
</head>
<body>
<div class="container">
<h2>Signup</h2>
<form action="signup.php" method="POST">
<input type="text" name="username" placeholder="Username" required>
<input type="email" name="email" placeholder="Email" required>
<input type="password" name="password" placeholder="Password" required>
<input type="password" name="confirm_password" placeholder="Confirm
Password" required>
<button type="submit" name="signup">Signup</button>
</form>
<p>Already have an account? <a href="login.php">Login</a></p>
</div>
</body>
</html>
Run HTML
Process the Signup Form:

Add PHP code to signup.php to handle form submission:

php
Copy
<?php
session_start();

// Include database connection

include 'includes/db_connection.php';

if (isset($_POST['signup'])) {
$username = trim($_POST['username']);
$email = trim($_POST['email']);
$password = trim($_POST['password']);
$confirm_password = trim($_POST['confirm_password']);

// Validate inputs
if (empty($username) || empty($email) || empty($password) ||
empty($confirm_password)) {
echo "All fields are required!";
} elseif ($password !== $confirm_password) {
echo "Passwords do not match!";
} else {
// Check if username or email already exists
$sql = "SELECT * FROM users WHERE username = ? OR email = ?";
$stmt = $conn->prepare($sql);
$stmt->bind_param("ss", $username, $email);
$stmt->execute();
$result = $stmt->get_result();

if ($result->num_rows > 0) {
echo "Username or email already exists!";
} else {
// Hash the password
$hashed_password = password_hash($password, PASSWORD_DEFAULT);
 // Insert user into the database
$sql = "INSERT INTO users (username, email, password) VALUES
(?, ?, ?)";
$stmt = $conn->prepare($sql);
$stmt->bind_param("sss", $username, $email, $hashed_password);

if ($stmt->execute()) {
echo "Signup successful! <a href='login.php'>Login</a>";
} else {
echo "Error: " . $stmt->error;
}
}
}
}
?>
Create the Database Connection File:

Inside the includes folder, create a file named db_connection.php.

Add the following code to connect to the database:

php
Copy
<?php
$host = 'localhost';
$user = 'root'; // Default XAMPP MySQL username
$password = ''; // Default XAMPP MySQL password
$dbname = 'instagram_clone';

// Create connection
$conn = new mysqli($host, $user, $password, $dbname);

// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
?>
2. Create the Login System
Create the Login Form:

Inside the instagram_clone folder, create a file named login.php.

Add the following HTML code for the login form:

html
Copy
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login - Instagram Clone</title>
<link rel="stylesheet" href="assets/css/styles.css">
</head>
<body>
<div class="container">
<h2>Login</h2>
<form action="login.php" method="POST">
 <input type="text" name="username" placeholder="Username" required>
<input type="password" name="password" placeholder="Password" required>
<button type="submit" name="login">Login</button>
</form>
<p>Don't have an account? <a href="signup.php">Signup</a></p>
</div>
</body>
</html>
Run HTML
Process the Login Form:

Add PHP code to login.php to handle form submission:

php
Copy
<?php
session_start();

// Include database connection

include 'includes/db_connection.php';

if (isset($_POST['login'])) {
$username = trim($_POST['username']);
$password = trim($_POST['password']);

// Validate inputs
if (empty($username) || empty($password)) {
echo "All fields are required!";
} else {
// Fetch user from the database
$sql = "SELECT * FROM users WHERE username = ?";
$stmt = $conn->prepare($sql);
$stmt->bind_param("s", $username);
$stmt->execute();
$result = $stmt->get_result();

if ($result->num_rows === 1) {
$user = $result->fetch_assoc();

// Verify password
if (password_verify($password, $user['password'])) {
// Set session variables
$_SESSION['user_id'] = $user['id'];
$_SESSION['username'] = $user['username'];

// Redirect to the homepage

header("Location: index.php");
exit();
} else {
echo "Invalid username or password!";
}
} else {
echo "Invalid username or password!";
}
}
}
?>
3. Create the Logout System
Create the Logout Script:
Inside the instagram_clone folder, create a file named logout.php.

Add the following code to log the user out:

php
Copy
<?php
session_start();
session_unset();
session_destroy();
header("Location: login.php");
exit();
?>
4. Test the Authentication System
Signup:

Go to http://localhost/instagram_clone/signup.php.

Fill out the form and submit it. You should see a success message.

Login:

Go to http://localhost/instagram_clone/login.php.

Enter your credentials and submit the form. You should be redirected to index.php.

Logout:

Go to http://localhost/instagram_clone/logout.php.

You should be redirected to login.php.

Next Steps
Once you’ve tested the authentication system, let me know, and we’ll move on to
Step 4: User Profiles. This will include:

Allowing users to update their profiles (e.g., profile picture, bio).

Displaying profile information on the user’s page.

Let me know if you need further clarification or if you’re ready to proceed!

next
Great! Let’s move on to Step 4: User Profiles. In this step, we’ll:

Allow users to update their profiles (e.g., profile picture, bio).

Display profile information on the user’s page.

Step 4: User Profiles

1. Create the Profile Page
Create the Profile File:

Inside the instagram_clone folder, create a file named profile.php.

Add the following code to display the profile information:

php
Copy
<?php
session_start();

// Redirect to login if user is not logged in

if (!isset($_SESSION['user_id'])) {
header("Location: login.php");
exit();
}

// Include database connection

include 'includes/db_connection.php';

// Fetch user data

$user_id = $_SESSION['user_id'];
$sql = "SELECT * FROM users WHERE id = ?";
$stmt = $conn->prepare($sql);
$stmt->bind_param("i", $user_id);
$stmt->execute();
$result = $stmt->get_result();
$user = $result->fetch_assoc();
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Profile - Instagram Clone</title>
<link rel="stylesheet" href="assets/css/styles.css">
</head>
<body>
<div class="container">
<h2>Profile</h2>
<div class="profile-info">
<img src="assets/images/<?php echo $user['profile_picture']; ?>"
alt="Profile Picture" class="profile-picture">
<h3><?php echo $user['username']; ?></h3>
<p><?php echo $user['bio']; ?></p>
</div>
<a href="edit_profile.php">Edit Profile</a>
<a href="logout.php">Logout</a>
</div>
</body>
</html>
2. Create the Edit Profile Page
Create the Edit Profile File:

Inside the instagram_clone folder, create a file named edit_profile.php.

Add the following code to allow users to update their profile:

php
Copy
<?php
session_start();

// Redirect to login if user is not logged in

if (!isset($_SESSION['user_id'])) {
header("Location: login.php");
 exit();
}

// Include database connection

include 'includes/db_connection.php';

// Fetch user data

$user_id = $_SESSION['user_id'];
$sql = "SELECT * FROM users WHERE id = ?";
$stmt = $conn->prepare($sql);
$stmt->bind_param("i", $user_id);
$stmt->execute();
$result = $stmt->get_result();
$user = $result->fetch_assoc();

// Handle form submission

if (isset($_POST['update_profile'])) {
$bio = trim($_POST['bio']);

// Handle profile picture upload

if ($_FILES['profile_picture']['error'] === UPLOAD_ERR_OK) {
$file_name = $_FILES['profile_picture']['name'];
$file_tmp = $_FILES['profile_picture']['tmp_name'];
$file_ext = strtolower(pathinfo($file_name, PATHINFO_EXTENSION));
$allowed_extensions = ['jpg', 'jpeg', 'png', 'gif'];

if (in_array($file_ext, $allowed_extensions)) {
$new_file_name = uniqid('', true) . '.' . $file_ext;
$upload_path = 'assets/images/' . $new_file_name;

if (move_uploaded_file($file_tmp, $upload_path)) {
// Delete old profile picture if it's not the default
if ($user['profile_picture'] !== 'default.jpg') {
unlink('assets/images/' . $user['profile_picture']);
}

// Update profile picture in the database

$sql = "UPDATE users SET profile_picture = ? WHERE id = ?";
$stmt = $conn->prepare($sql);
$stmt->bind_param("si", $new_file_name, $user_id);
$stmt->execute();
} else {
echo "Error uploading file!";
}
} else {
echo "Invalid file type!";
}
}

// Update bio in the database

$sql = "UPDATE users SET bio = ? WHERE id = ?";
$stmt = $conn->prepare($sql);
$stmt->bind_param("si", $bio, $user_id);
if ($stmt->execute()) {
echo "Profile updated successfully!";
} else {
echo "Error updating profile!";
}
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Edit Profile - Instagram Clone</title>
<link rel="stylesheet" href="assets/css/styles.css">
</head>
<body>
<div class="container">
<h2>Edit Profile</h2>
<form action="edit_profile.php" method="POST" enctype="multipart/form-
data">
<label for="profile_picture">Profile Picture:</label>
<input type="file" name="profile_picture" accept="image/*">
<label for="bio">Bio:</label>
<textarea name="bio" placeholder="Enter your bio"><?php echo
$user['bio']; ?></textarea>
<button type="submit" name="update_profile">Update Profile</button>
</form>
<a href="profile.php">Back to Profile</a>
</div>
</body>
</html>
3. Create the Images Folder
Create the assets/images Folder:

Inside the assets folder, create a subfolder named images.

Add a default profile picture named default.jpg to this folder.

4. Test the Profile System

View Profile:

Go to http://localhost/instagram_clone/profile.php.

You should see your profile information, including the default profile picture and
bio.

Edit Profile:

Go to http://localhost/instagram_clone/edit_profile.php.

Upload a new profile picture and update your bio.

Submit the form and check if the changes are reflected on the profile page.

Next Steps
Once you’ve tested the profile system, let me know, and we’ll move on to Step 5:
Post Creation. This will include:

Allowing users to upload images (posts) with captions.

Displaying posts in a feed.

Let me know if you need further clarification or if you’re ready to proceed!

part 1 wait for the part-2