final project part2.php

//home_guest_nav.php
<!--this will display on index.php for the guest (non-registered users) who wish to navigate photoshare-->
  <div class="nav1">
    <ul>
      <li id="home"><a href="index.php"><img src="images/camera.png" height="32" width="32" alt="camera icon"> | PhotoShare</a></li>
       <!--camera icon:
    Flaticon. (2019, July 24). Camera free icons designed by Freepik. Flaticon. https://www.flaticon.com/free-icon/camera_1998342 -->
      <li id="log"><a href="html/login.html">Login</a></li>
      <li id="reg"><a href="php/reg_form.php">Sign Up</a></li>
    </ul>
  </div>

  <div class="nav2">
    <ul>
      <li><a href="php/gallery.php">Gallery</a></li>
      <li><a href="html/contact.html">Contact</a></li>
    </ul>
    <form method="post" action="php/search.php" id="search_frm">

    <input type="text" placeholder="Search PhotoShare" name="search" id="search">

    <input type="submit" name="search_btn" value="Search" id="search_btn">
</form>
  </div>

//home_memeber_nav.php
<!--this will display on all the php files for the members (registered users) who wish to navigate photoshare-->
  <div class="nav1">
    <ul>
      <li><a href="index.php"><img src="images/camera.png" height="32" width="32"> | PhotoShare</a></li>
       <!--camera icon:
    Flaticon. (2019, July 24). Camera free icons designed by Freepik. Flaticon. https://www.flaticon.com/free-icon/camera_1998342 -->
      <li id="log_out"><form action='index.php' method='get'>
    <input type=submit value='logout' name='logout' id='logout'>
    </form></li>

      <li id="profile">
            <!--dropdown code:
    W3Schools. (n.d.). How to - hoverable dropdown. How To Create a Hoverable Dropdown Menu. https://www.w3schools.com/howto/howto_css_dropdown.asp -->
        <div class="dropdown">
          <button class="dropbtn">
            <?php echo $_SESSION['user']; ?>
            <i class="fa fa-ceret-down"></i>
          </button>
          <div class="drp_content">
            <a href="php/profile.php">Profile</a>
            <a href="php/edit_profile.php">Edit Profile</a>
          </div>
        </div>
      </li>
    </ul>
  </div>

  <div class="nav2">
    <ul>
      <li><a href="php/gallery.php">Gallery</a></li>
      <li><a href="php/upload.php">New Post</a></li>
      <li><a href="html/contact.html">Contact</a></li>
    </ul>
    <form method="post" action="php/search.php">

    <input type="text" placeholder="Search PhotoShare" name="search" id="search">

    <input type="submit" name="search_btn" value="Search" id="search_btn">
</form>
  </div>

//member_nav.php
<!--this will display on the index.php page for the members (egistered users) who wish to navigate photoshare-->
  <div class="nav1">
    <ul>
      <li><a href="../index.php"><img src="../images/camera.png" height="32" width="32"> | PhotoShare</a></li>
       <!--camera icon:
    Flaticon. (2019, July 24). Camera free icons designed by Freepik. Flaticon. https://www.flaticon.com/free-icon/camera_1998342 -->

      <li id="log_out"><form action='../index.php' method='get'>
    <input type=submit value='logout' name='logout' id='logout'>
    </form></li>

      <li id="profile">

      <!--dropdown code:
    W3Schools. (n.d.). How to - hoverable dropdown. How To Create a Hoverable Dropdown Menu. https://www.w3schools.com/howto/howto_css_dropdown.asp -->
        <div class="dropdown">
          <button class="dropbtn">
            <?php echo $_SESSION['user']; ?>
            <i class="fa fa-ceret-down"></i>
          </button>
          <div class="drp_content">
            <a href="profile.php">Profile</a>
            <a href="edit_profile.php">Edit Profile</a>
          </div>
        </div>
      </li>
    </ul>
  </div>

  <div class="nav2">
    <ul>
      <li><a href="gallery.php">Gallery</a></li>
      <li><a href="upload.php">New Post</a></li>
      <li><a href="../html/contact.html">Contact</a></li>
    </ul>
    <form method="post" action="search.php">

    <input type="text" placeholder="Search PhotoShare" name="search" id="search">

    <input type="submit" name="search_btn" value="Search" id="search_btn">
</form>
  </div>

//profile.php
<?php
//session info
require('session.php');
?>

<!--a member's only page to view their profile which will pull all their posts from the post_info table on the database with the help of the session information-->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Profile</title>

  <link href="../css/style.css" rel="stylesheet" type="text/css">

  <link rel="icon" type="image/png" sizes="32x32" href="../images/favicon-32x32.png">

</head>
<body class="box">

<!--Navigation bar-->
<?php
  require('member_nav.php');
?>

<h1 class="header_center"><?php echo $_SESSION['user']; ?></h1>

<?php

//database connection
require('db_connect.php');

//query string
$qry = "select * from post_info where author = '$_SESSION[user]'";

//execute the query
$result = mysqli_query($conn, $qry);

if ($result) {

  if (mysqli_num_rows($result) > 0) {

    while ($row = mysqli_fetch_assoc($result)) {

      //displays all the user's posts
      echo "<div class=\"gallery\">

      <img src='$row[picture]'  alt='User Upload' width='500' height='333'>

      <br>

      <div class=\"caption\">$row[caption]</div>

      <div class=\"author\"><strong>$row[author]</strong></div>

      <div class=\"date\"><strong>$row[post_date]</strong></div>

      </div>";

    }
    //end while loop

  }
  //end if 1 or more rows

  else
    echo "<br>No posts avaliable.";
}
mysqli_close($conn);
?>

<?php
 //footer
 require('footer.php');
 ?>

</body>
</html>

//reg_form.php
<?php
//session info
require('session.php');
?>

<!--registration page to sign up for photoshare-->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Register on PhotoShare</title>

  <link href="../css/style.css" rel="stylesheet" type="text/css">

  <link rel="icon" type="image/png" sizes="32x32" href="../images/favicon-32x32.png">

</head>
<body>

<?php

//database connection
require("db_connect.php");

//server-side validation
//fixed the validation (i forgot a ; in my javascript file so i added it in) and added in the verify password input

//initalizing php variables to hold form data

$username = $email = $pword = $vpass = $fname = $lname = $age = $phone = "";

$userErr = $emailErr = $pwordErr = $vpass = $fnErr = $lnErr = $ageErr = $phoneErr = "";

$valid = true;

if ($_SERVER["REQUEST_METHOD"] == "POST" && !empty($_POST["submit"])) {

 $vpass = $_POST["vpass"];
 $pword = $_POST["pword"];

  if(!($pword===$vpass)) {
    die("The passwords do not match. Please return to <a href='reg_form.php'>registration page</a>");
  }

  //testing username

  //testing if username field is empty
  if(empty($_POST["user_name"])) {
    //error message will display if field is empty
    $userErr = "Username is required.";
    $valid = false;
  }
  //further assessment if field is not empty
  else {
    //retrieves username data
    $username = $_POST["user_name"];
    //cleans up username data
    $username = test_input($username);

    //test data type and format using regular expression
    if (!preg_match("/^[a-zA-Z0-9_-]{4,30}$/", $username)) {
      $userErr = "Username must only contain no less than 4 characters, letters, numbers, _, and -.";

      $valid = false;
    }
  }

  //testing email

  //testing if email field is empty
  if(empty($_POST["email"])) {
    //error msg will display if field is empty
    $emailErr = "Email is required.";
    $valid = false;
}
//further assesment if field is not empty
else {
//retrieves email data
$email = $_POST["email"];
//clean up the email data
$email = test_input($email);

//test data type and format using regular expression
if(!preg_match("/^[a-zA-Z0-9.]{2,30}@[a-zA-Z0-9.]{2,20}.[a-zA-Z]{2,4}$/", $email)) {
    //error msg will display if data doesn't match regex
    $emailErr = "Invalid email address entered.";
    $valid = false;

}
}

//testing password

//testing if password field is empty
if(empty($_POST["pword"])) {
  //an error msg will dispay if field is empty
  $pwordErr = "Password is required.";
  $valid = false;
}
//futher assesssment if field is not empty
else {
  //retrives password data
  $pword = $_POST["pword"];
  //cleans up password data
  $pword = test_input($pword);

  //test data type and format using regular expression
  if(!preg_match("/^[a-zA-Z0-9@&!*%$]{10,60}$/", $pword)) {
    //error msg will display if data doesn't match regex
    $pwordErr = "Password must only contain letters, numbers, @, &, !, *, %, and $.";
    $valid = false;
  }
}

//testing first name

//testing if fname field is empty
if(empty($_POST["fname"])) {
  //an error msg will dispay if field is empty
  $fnErr = "First Name is required.";
  $valid = false;
}
//further assessment if fname field isn't empty
else {
  //retrieves fname data
  $fname = $_POST["fname"];
  //clean up the fname data
  $fname = test_input($fname);

  //test data type and format using regular expression
  if(!preg_match("/^[a-zA-Z'!-]{2,30}$/", $fname)) {
      //error msg will display if data doesn't match regex
      $fnErr = "First name must only contain letters, ', !, and -.";
      $valid = false;
  }
}

//testing last name
//testing if lname field is empty
if(empty($_POST["lname"])) {
  //an error msg will dispay if field is empty
  $lnErr = "Last Name is required.";
  $valid = false;
}


//testing if lname field isn't empty
if(!empty($_POST["lname"])) {
  //retrives form data
  $lname = $_POST["lname"];
  //clean up lname data
  $lname = test_input($lname);

  //test data type and format using regular expression
  if(!preg_match("/^[a-zA-Z'!-]{2,50}$/", $lname)) {
    //error msg will display if data doesn't match regex
    $lnErr = "Last name must only contain letters, ', !, and -.";
    $valid = false;
}
}

//testing age

//testing if the age field is empty
if (empty($_POST["age"])) {
  //error msy will display if age field is empty
  $ageErr = "Age is required.";
}
//futher assessment if age field isn't empty
else {
  //retrieves age data from form
  $age = $_POST["age"];
  //cleans up age data
  $age = test_input($age);

  //test data type and format using regular expression
  if(!preg_match("/^[0-9]{2,3}$/", $age)) {
      $ageErr = "Age must only contain numbers.";
      $valid = false;
    }
    else {
      //test if age is above 15 but under 100 years
  if($age < 15 && $age > 100) {
    $ageErr = "You must be over 15 to sign up.";
    $valid = false;
  }
    }
}

//testing phone number

//testing if the phone num field is empty
if (empty($_POST["phone"])) {
  //error msy will display if age field is empty
  $phoneErr = "Phone number is required.";
}
//futher assessment if age field isn't empty
else {
  //retrieves age data from form
  $phone = $_POST["phone"];
  //cleans up age data
  $phone = test_input($phone);

  //test data type and format using regular expression
  if(!preg_match("/^\([0-9]{3}\)[0-9]{3}\-[0-9]{4}$/", $phone)) {
    $phoneErr = "Phone number must be in the format: (000)000-0000.";
    $valid = false;
  }
}

//for all valid data
if($valid) {
  //once all data is valid, it will insert the data into the database

  //encrypting password before it enters the database
  $pword_hash = hash('sha256', $pword);

   //use PHP variables as input to MySQL query.
$qry = "INSERT INTO user_info (username, email, pword, fname, lname, age, phone_num) VALUES ('$username', '$email', '$pword_hash', '$fname', '$lname', '$age', '$phone');";

//execute the query
$result = mysqli_query($conn, $qry);

//check on the success of the query
 if(!$result) echo 'Error occurred: ' . mysqli_error($conn) . '<br><br>';
 //close the connection
 mysqli_close($conn);

 //once all the info is validated, the user will be sent to the login page to log into their profile
 header("Location: ../html/login.html");
}
}

function test_input($data)
{
  $data = trim($data);
  $data = stripslashes($data);
  $data = htmlspecialchars($data);
  return $data;
}

?>

   <!--Navigation bar-->

   <?php
if (isset($_SESSION['user'])) {
  require('member_nav.php');
}
else {
require('guest_nav.php');
}
?>

<br>

  <!--Banner-->

  <div class="banner">
    <img src="../images/photoshare_banner.png" width="1099" alt="An image of the PhotoShare logo.">
  </div>

  <br>

  <div id="reg_sign">
    <h1 class="header_center">Sign Up Today!</h1>
  </div>

  <br>

  <!--Registration form-->

  <div class="reg_form">
    <form
    id="register"
    action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>"
    onsubmit="return validate();"
    method="post">

      <fieldset>
        <legend><strong>Account Information:</strong></legend>

        <input type="text" name="user_name" id="user_name" placeholder="Username" value="<?php echo $username; ?>">

        <span id="userErr" class="error"> <?php echo $userErr; ?> </span>

        <br><br>

        <input type="text" name="email" id="email" placeholder="Email" value="<?php echo $email; ?>">

        <span id="emailErr" class="error"><?php echo $emailErr; ?></span>

        <br><br>

        <input type="password" name="pword" id="pword" placeholder="Password" value="<?php echo $pword; ?>">

        <span id="pwordErr" class="error"> <?php echo $pwordErr; ?> </span>

        <br><br>

        <input type="password" name="vpass" id="vpass" placeholder="Verify Password">

      </fieldset>

      <br>

      <fieldset>
        <legend><strong>Personal Information:</strong></legend>

        <input type="text" name="fname" id="fname" placeholder="First Name" value="<?php echo $fname; ?>">

        <span id="fnErr" class="error"> <?php echo $fnErr; ?> </span>

        <br><br>

        <input type="text" name="lname" id="lname" placeholder="Last Name" value="<?php echo $lname; ?>">

        <span id="lnErr" class="error"> <?php echo $lnErr; ?> </span>

        <br><br>

        <input type="text" name="age" id="age" placeholder="Age" value="<?php echo $age; ?>">

        <span id="ageErr" class="error"> <?php echo $ageErr; ?> </span>

        <br><br>

        <input type="text" name="phone" id="phone" placeholder="Phone Number" value="<?php echo $phone; ?>">

        <span id="phoneErr" class="error"> <?php echo $phoneErr; ?> </span>
      </fieldset>

      <br>

      <input type="submit" name="submit" value="REGISTER">

    </form>
  </div>

  <p class="form_para">Already have an account? Login in <a href="../html/login.html">here.</a></p>

  <?php
 //footer
 require('footer.php');
 ?>

<!--javascript link for client side validation-->
<script type="text/javascript" src="../javascript/myJS.js" ></script>

</body>
</html>

//search.php
<?php

//functioning search bar code comes from:

//YouTube. (2017). 57: How to create a search field with PHP and MySQLi | PHP tutorial | Learn PHP programming. YouTube. Retrieved December 16, 2023, from https://www.youtube.com/watch?v=lwgG_uIJYQM.


require('session.php');

require('db_connect.php');
?>

<!--search results page that will display information from the post_info table in the database-->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Search Results</title>

  <link href="../css/style.css" rel="stylesheet" type="text/css">

  <link rel="icon" type="image/png" sizes="32x32" href="../images/favicon-32x32.png">
</head>
<body>

<?php
  //navigation bar
if (isset($_SESSION['user'])) {
  require('member_nav.php');
}
else {
require('guest_nav.php');
}
?>

  <h1 class="header_center">Results</h1>

    <?php
    if(isset($_POST["search_btn"])) {
      $search = mysqli_real_escape_string($conn, $_POST["search"]);

      //query string, which includes the mysql wildcard
      $qry = "select * from post_info where caption like '%$search%' or author like '%$search%';";

      $result = mysqli_query($conn, $qry);

      if($result) {
        if (mysqli_num_rows($result) > 0) {
          while ($row = mysqli_fetch_assoc($result)) {
            //displaying search results
            echo " <div class=\"gallery\">
            <img src='$row[picture]'  alt='User Upload' width='500' height='333'>

            <br>

            <div class=\"caption\">$row[caption]</div>

            <div class=\"author\"><strong>$row[author]</strong></div>

            <div class=\"date\"><strong>$row[post_date]</strong></div>

            </div>";

          } //end while loop
        } //end 3rd if statement
        else
          echo "No results found.";

      } //end 2nd if statement
  mysqli_close($conn);

    } //end 1st if statement
    ?>
</body>
</html>

//session.php
<!--stores all the session information and will be included in all files that needs this info-->
<?php
session_start();

if (isset($_GET['logout'])) {
    //code to close the session
    session_unset();
    // unset the session array i.e. destroy the data and the array
    session_destroy();
    // terminate the session.
    header('Location: index.php');
    //reload the index page.
}
?>

//update_frm.php
<?php
require('session.php');
?>

<!--a member's only page, will display after users update their profile-->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Profile Updated</title>

  <link href="../css/style.css" rel="stylesheet" type="text/css">

  <link rel="icon" type="image/png" sizes="32x32" href="../images/favicon-32x32.png">

</head>
<body>

  <?php
  //navigation bar
  require('member_nav.php');

  //connect to database
  require('db_connect.php');

  //the user must enter their password to update the form
  //edited to ensure the update won't go through if password isn't entered.
if(empty($_POST["pword"])) {
  die("Password must be entered to update. Go back to the <a href='edit_profile.php'>update</a> form.");
}

  //initalizing variables
  $username = $email = $pword = $fname = $lname = $age = $phone = "";

  //retrieving form data
  $username = $_POST["user_name"];
  $email = $_POST["email"];
  $pword = $_POST["pword"];
  $fname = $_POST["fname"];
  $lname = $_POST["lname"];
  $age = $_POST["age"];
  $phone = $_POST["phone"];


//to encrypt the password again
  $pword_hash = hash('sha256', $pword);

  //Create the query string
  $query = "update user_info set email = '$email', pword = '$pword_hash', fname = '$fname', lname = '$lname', age = '$age', phone_num = '$phone' where username = '$username';";

  //execute the query
  $result = mysqli_query($conn, $query);

  //process the results and provide feedback
  if ($result)
  {
   //query successfully executed in MySQL
   $rows_aff = mysqli_affected_rows($conn);
   //retrieves the number of rows updated
   if ($rows_aff > 0) {// at least 1 row was updated
     echo "<h1 class=\"header_center\">Profile Information Updated</h1>

     $rows_aff rows were updated as requested. <br><br>";
   }
   else
    {
     // query executed but no rows were updated
     echo "Sorry no rows were found for username: $username. <br><br>";
    }
    }
    else {
     echo "Sorry, there was an error in processing this update. <br><br>";
 }

    //close the connection
    mysqli_close($conn);
  ?>
</body>
</html>

//upload.php
<?php
require('session.php');
?>

<!--a member's only page, allows users to upload their pictures to the website and store it in the post_info table in the database-->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>New Post</title>

  <link href="../css/style.css" rel="stylesheet" type="text/css">

  <link rel="icon" type="image/png" sizes="32x32" href="../images/favicon-32x32.png">
</head>
<body class="box">

  <!--Navigation bar-->

  <?php
if (isset($_SESSION['user'])) {
  require('member_nav.php');
}
else {
require('guest_nav.php');
}
?>

<br><br>

<?php

//database connection
require('db_connect.php');

if ($_SERVER["REQUEST_METHOD"] == "POST" && !empty($_POST["submit"])) {



//inputs from the form upload.html
$caption = $_POST["caption"];

/*
Code for the image upload comes from:
  W3Schools. (n.d.). PHP File Upload. PHP file upload. https://www.w3schools.com/php/php_file_upload.asp
Retrieved 21st Oct. 2023.*/

  //upload image
$target_dir = "../user_images/";
$target_file = $target_dir . basename($_FILES["user_upload"]["name"]);
$uploadOk = 1;
$imageFileType = strtolower(pathinfo($target_file,PATHINFO_EXTENSION));

// Check file size
if ($_FILES["user_upload"]["size"] > 500000) {
  echo "Sorry, your file is too large.";
  $uploadOk = 0;
}

// Allow certain file formats
if($imageFileType != "jpg" && $imageFileType != "png" && $imageFileType != "jpeg"
&& $imageFileType != "gif" ) {
  echo "Sorry, only JPG, JPEG, PNG & GIF files are allowed.";
  $uploadOk = 0;
}

// Check if $uploadOk is set to 0 by an error
if ($uploadOk == 0) {
  echo "Sorry, your file was not uploaded.";
// if everything is ok, try to upload file
} else {
  if (move_uploaded_file($_FILES["user_upload"]["tmp_name"], $target_file)) {
    echo "The file ". htmlspecialchars( basename( $_FILES["user_upload"]["name"])). " has been uploaded.";
  } else {
    echo "Sorry, there was an error uploading your file.";
  }
}

//insert into database
//use PHP variables as input to MqSQL query.

$qry = "INSERT INTO post_info (picture, caption, author) VALUES ('$target_file', '$caption', '$_SESSION[user]')";

//execute the query
$result = mysqli_query($conn, $qry);

//check on the success of the query
if($result) echo 'record successfully inserted.<br><br>';
else echo 'Error occurred: ' . mysqli_error($conn) . '<br><br>';

//close the connection
mysqli_close($conn);

//after info is inserted into the database, the user will be directed to the gallery page to view their post
header("Location: gallery.php");

}
?>

<form id="postfrm" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method="post" enctype="multipart/form-data">
      <fieldset>
        <legend><strong>Upload Picture</strong></legend>

        <input type="file" name="user_upload" id="user_upload" required>
      </fieldset>

      <fieldset>
        <legend><strong>Post Information</strong></legend>

        <textarea name="caption" rows="5" cols="30" placeholder="Type your caption here" maxlength="300"></textarea>
      </fieldset>

      <br><br>

      <input type="submit" name="submit" value="POST">
    </form>

    <?php
 //footer
 require('footer.php');
 ?>

</body>
</html>

//verify_login.php
<?php
//session info
require('session.php');
?>

<!--login authentication to ensure the data the user uses to login is the same as the one stored in the database-->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Welcome Back!</title>
  <link href="../css/style.css" rel="stylesheet" type="text/css">

  <link rel="icon" type="image/png" sizes="32x32" href="../images/favicon-32x32.png">
</head>
<body>
  <?php

  $username = $pword = $db_pass = "";

  if ($_SERVER["REQUEST_METHOD"] == "POST" && !empty($_POST["submit"])) {

    //storing form data into php variables
    $username = $_POST["user_name"];
    $pword = $_POST["password"];

    //database connection
    require("db_connect.php");

    //Create the query string
    $query = "select * from user_info where username = '$username';";

    //execute the query
    $result = mysqli_query($conn, $query);
    if ($result) {

        if (mysqli_num_rows($result) > 0) {

            while ($row = mysqli_fetch_assoc($result)) {


                //storing database password into a php variable
        $db_pass = $row["pword"];

            }
            //end while loop

        }
        //end if 1 or more rows

        else {
            echo "<br>Incorrect Username.";
    }

}

  //encrypting password from login form
  $pword_hash = hash('sha256', $pword);

  //verifying password and setting up session data

  if($pword_hash != $db_pass) {
  echo "<h3>Incorrect password.</h3>";
}
else {
   $_SESSION['user'] = $username;
  }

  mysqli_close($conn);

  }
  ?>

   <!--Navigation bar-->

   <?php
if (isset($_SESSION['user'])) {
  require('member_nav.php');
}
else {
require('guest_nav.php');
}
?>

<br>

  <?php
  if(isset($_SESSION['user'])) {
    echo "<h1 class=\"header_center\">Welcome Back!</h1>
    <br><br>
    <p>You can create a post <a href='upload.php'>here</a> or check out other users posts in the <a href='gallery.php'>Gallery</a>.</p>";
  }
  else {
    echo "<h3>You need to <a href='../html/login.html'>login</a> again.</h3>";
  }

  //footer
 require('footer.php');
  ?>
</body>
</html>