First commit

cyclobold · Mar 25, 2022 · 096e903 · 096e903
commit 096e903
Show file tree

Hide file tree

Showing 9 changed files with 292 additions and 0 deletions.
diff --git a/database.php b/database.php
@@ -0,0 +1,8 @@
+<?php
+$host = "localhost";
+$user = "root";
+$password = "";
+$db_name = "uploader";
+
+
+$conn = mysqli_connect($host, $user, $password, $db_name) or die("Could not connect");
diff --git a/index.php b/index.php
@@ -0,0 +1,61 @@
+ <?php ini_set("display_errors", "on"); ?>
+ <!DOCTYPE html>
+ <html lang="en">
+ <head>
+     <meta charset="UTF-8">
+     <meta http-equiv="X-UA-Compatible" content="IE=edge">
+     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+     <title>Document</title>
+     <style>
+         #upload_file{
+             display: none;
+         }
+
+         label[for="upload_file"]{
+             height: 30px;
+             display: inline-block;
+             padding-top: .5em;
+             padding-right: .5em;
+             padding-left: .5em;
+             border-radius: 5px;
+             color: white;
+             font-weight: bolder;
+             cursor: pointer;
+             background-image: linear-gradient(to right, teal, grey);
+         }
+
+         label:hover{
+             transform: scale(1.1);
+
+         }
+     </style>
+ </head>
+ <body>
+
+
+    <form id="upload_form" enctype="multipart/form-data">
+        <div style="margin-top: 100px;">
+            <label>Username</label>
+            <input type="text" name="username">
+        </div>
+        <div style="margin-top: 10px;">
+            <label>Password</label>
+            <input type="password" name="password">
+        </div>
+        <div style="margin-top: 10px;">
+            <div id="uploaded_img"></div>
+            <label for="upload_file">Upload Image</label>
+            <input type="file" name='upload_file' id="upload_file">
+        </div>
+
+        <div style="margin-top: 10px;">
+            <button>Register</button>
+        </div>
+
+        <a href='login.php'>Login</a>
+    </form>
+
+
+    <script src="script.js"></script>
+ </body>
+ </html>  
diff --git a/login.php b/login.php
@@ -0,0 +1,89 @@
+ <?php ini_set("display_errors", "on"); ?>
+ <!DOCTYPE html>
+ <html lang="en">
+ <head>
+     <meta charset="UTF-8">
+     <meta http-equiv="X-UA-Compatible" content="IE=edge">
+     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+     <title>Document</title>
+     <style>
+         #upload_file{
+             display: none;
+         }
+
+         label[for="upload_file"]{
+             height: 30px;
+             display: inline-block;
+             padding-top: .5em;
+             padding-right: .5em;
+             padding-left: .5em;
+             border-radius: 5px;
+             color: white;
+             font-weight: bolder;
+             cursor: pointer;
+             background-image: linear-gradient(to right, teal, grey);
+         }
+
+         label:hover{
+             transform: scale(1.1);
+
+         }
+     </style>
+ </head>
+ <body>
+
+    <?php
+        if(isset($_POST['login'])){
+            $user_username = $_POST['username'];
+            $user_password = $_POST['password'];
+
+            require "database.php";
+
+            $query = "SELECT * FROM `users` WHERE `username` = '$user_username' AND `password` = '$user_password' LIMIT 1";
+
+            $result = mysqli_query($conn, $query);
+
+            if($result){
+                if(mysqli_num_rows($result) == 1){
+                    //there is a match
+
+                    session_start();
+
+                    $_SESSION = mysqli_fetch_array($result, MYSQLI_ASSOC);
+
+                    header("location: user.php");
+
+
+                }else{
+                    //there is no match
+                }
+
+            }else{
+                //query did not run
+            }
+
+
+        }
+
+     ?>
+
+
+    <form id="login_form" action='' method='POST'>
+        <div style="margin-top: 100px;">
+            <label>Username</label>
+            <input type="text" name="username">
+        </div>
+        <div style="margin-top: 10px;">
+            <label>Password</label>
+            <input type="password" name="password">
+        </div>
+
+        <div style="margin-top: 10px;">
+            <button name='login'>Log in</button>
+        </div>
+
+        <a href='index.php'>Register</a>
+    </form>
+
+ </body>
+ </html>  
diff --git a/logout.php b/logout.php
@@ -0,0 +1,8 @@
+<?php
+session_start();
+
+$_SESSION = [];
+
+session_destroy();
+
+header("location: login.php");
diff --git a/process.php b/process.php
@@ -0,0 +1,44 @@
+<?php
+if(isset($_POST['username']) && isset($_POST['password']) && isset($_FILES['upload_file'])){
+
+
+	echo "Proceed";
+
+	$user_username = trim($_POST['username']);
+	$user_password = trim($_POST['password']);
+
+	require "database.php";
+
+
+	$query = "INSERT INTO `users`(`username`, `password`, `image_path`) VALUES('$user_username', '$user_password', 'none')";
+
+	$result = mysqli_query($conn, $query);
+
+	if($result){
+		$last_id = mysqli_insert_id($conn);
+
+		if(!is_dir("user_files/{$last_id}")){
+			mkdir("user_files/{$last_id}");
+		}
+
+		$destination = "user_files/{$last_id}/".$_FILES['upload_file']['name'];
+		move_uploaded_file($_FILES['upload_file']['tmp_name'], $destination);
+
+		$update_query = "UPDATE `users` SET `image_path` = '$destination' WHERE `id` = $last_id LIMIT 1";
+
+		$update_result = mysqli_query($conn, $update_query);
+
+		if($update_result){
+			echo "Account Created";
+		}
+
+	}
+
+
+
+
+
+
+
+}
+
diff --git a/script.js b/script.js
@@ -0,0 +1,52 @@
+const label = document.querySelector("label[for='upload_file']");
+const upload_form = document.querySelector("#upload_form");
+const upload_file = document.querySelector("#upload_file");
+const uploaded_image_info = document.querySelector("#uploaded_img");
+
+//handles the uploading of image
+upload_file.onchange = function(){
+
+    //console.log(this)
+    const file_item = this.files[0];
+
+
+    const filereader = new FileReader();
+    filereader.readAsDataURL(file_item)
+
+    //get the result
+    filereader.onload = function(){
+        // console.log(this.result);
+
+        uploaded_image_info.innerHTML = `<img src='${this.result}' width=250>`;
+
+    }
+
+}
+//end of image upload handling
+
+upload_form.addEventListener("submit", function(e){
+    e.preventDefault();
+
+    if(this.username.value.trim().length == 0 || this.password.value.trim().length == 0){
+        //
+    }else{
+
+        //process the form 
+        const formData = new FormData(upload_form);
+
+        const xhr = new XMLHttpRequest;
+
+
+        xhr.open("POST", "process.php");
+
+        xhr.onload = function(){
+            alert(xhr.response);
+        }
+
+
+        xhr.send(formData);
+
+    }
+
+
+})
diff --git a/user.php b/user.php
@@ -0,0 +1,30 @@
+<?php
+	session_start();
+	if(!isset($_SESSION['username'])){
+		header("location: login.php");
+	}else{
+		$username = $_SESSION['username'];
+		$image_path = $_SESSION['image_path'];
+
+	}
+
+ ?>
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>Document</title>
+</head>
+<body>
+	<h3>Welcome to your page</h3>
+	<h5><a href='logout.php'>Log out</a></h5>
+	<hr>
+	<img src="<?php echo $image_path; ?>" width='250'>
+
+
+
+
+</body>
+</html>
diff --git a/user_files/5/black-shoe1.png b/user_files/5/black-shoe1.png
diff --git a/user_files/6/running-shoes2.png b/user_files/6/running-shoes2.png