final project part1.php

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

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

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

  <link rel="icon" type="image/png" sizes="32x32" href="images/favicon-32x32.png">
  <!--favicon was made by [user thotfrnk] using Adobe logo maker-->
</head>
<body>

<!--Navigation bar-->

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

<div class="header_center"> <h1>Welcome to PhotoShare</h1> </div>

<div class="about">

 <!--All images used came from pexels.com-->

 <!--Wheeler, J. (2013, September 2). Symmetrical Photography of clouds covered blue sky - pexels. https://www.pexels.com/photo/symmetrical-photography-of-clouds-covered-blue-sky-1486974/ . Retrieved 15th Oct. 2023.-->

 <img src="images/pexels-james-wheeler.jpg" width="200" height="250" id="img1" alt="A shot of a lake with the sky reflected in it. The sky has clouds and a pinkish colour to it. In the backgroud grassy fields and trees can be seen.">

  <div id="paragraph1">
  <p>PhotoShare aims to build a community for aspiring photographers.
  </p>

  </div>

  <div id="paragraph2">

  <!--Lastovich, T. (2017, March 4). Brown wooden dock surrounded with green grass near mountain under white ... https://www.pexels.com/photo/brown-wooden-dock-surrounded-with-green-grass-near-mountain-under-white-clouds-and-blue-sky-at-daytime-808465/ . Retrieved 15th Oct. 2023.-->

  <img src="images/pexels-tyler-lastovich.jpg" width="200" height="250" id="img2" alt="A shot of a mountainous trail, with dried grass on both sides of the wooden trail.">

  <p>We want to foster talent in a safe environment and inspire photographers to aim high.</p>

  </div>

  <br>

  <div id="paragraph3">

    <p>On PhotoShare you will be able to make posts, comment, and interact with other photographers.</p>

  <!--Gould, D. (2016, November 21). Scenic view of river · Free Stock Photo - PEXELS. https://www.pexels.com/photo/scenic-view-of-river-325807/ . Retrieved 15th Oct. 2023.-->

  <img src="images/pexels-dom-gould.jpg" width="400" height="250" id="img3" alt="A shot of a crystal blue lake in between rocky land and it is surrounded by trees.">

  <!--Berger, S. (2015, June 7). Scenic view of mountains during Dawn · free stock photo - PEXELS. https://www.pexels.com/photo/scenic-view-of-mountains-during-dawn-1266810/ . Retrieved 15th Oct. 2023.-->

  <img src="images/pexels-simon-berger.jpg" width="200" height="250" id="img4" alt="A shot at the top of a mountain, in the foreground flowers growing from its surface can be seen, the middle ground shows mountains and the background is the sun hidden behind cloud coverage.">

  <!--Bartus, D. (2018, June 12). Photo lavender flower field under Pink Sky · free stock photo - PEXELS. https://www.pexels.com/photo/photo-lavender-flower-field-under-pink-sky-1166209/ . Retrieved 15th Oct. 2023.-->

  <img src="images/pexels-david-bartus.jpg" width="400" height="250" id="img5" alt="A shot of a lavender field, showing rows and rows and bright purple lavender, set with the pinkish clounds and blue sky.">

  </div>

</div>

<!--Footer
will turn this into a incl. php file!-->

<div class="footer">
<footer>
  <p>&copy; 2023 PhotoShare</p>
</footer>
</div>

</body>
</html>

//comment_display.php
<!--file to be included on the gallery.php file-->
  <?php
  //database connection
  require('db_connect.php');


  //Create the query string
  $query1 = "select * from comment_section";

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

    if (mysqli_num_rows($result1) > 0) {

      while ($row1 = mysqli_fetch_assoc($result1)) {

        //comparing the post_id in the comment_section table to the post_info table to ensure the comments are being displayed on the correct post
        if($row1['post_id'] == $row['post_id']) {

        //echo statement to output the comments and how it will be formatted in html+css
          echo "
        <div id=\"comment\">
        <div class=\"author\"><strong>$row1[username]</strong></div>
        <br>
        <div class=\"caption\">$row1[comment]</div>
        <br>

        <div class=\"date\"><strong>$row1[comment_date]</strong></div>
        </div>
        <br><br>";

      }
    }
      //end while loop

    }
    //end if 1 or more rows

    else
      echo "<br>No comments avaliable.";
  }
  ?>

//comment_frm.php
<!--file to be included on gallery.php-->
<?php
//if statement to ensure only users who are logged in will be allowed to view and use the post comment form
if(isset($_SESSION['user'])) {
  //echo statement to display the comment form
  echo "<form id='comment_frm'
  action='comment_upload.php'
  method='post'>

    <textarea name='comment'></textarea>

    <input type='hidden' name='post_id' id='post_id' value='".$row['post_id']. "'>

    <input type='submit' name='submit' value='Comment'>
  </form>";
}
?>

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Comment Posted</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');

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

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

  $comment = $_POST["comment"];
  $post_id = $_POST["post_id"];

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

$qry = "INSERT INTO comment_section (comment, username, post_id) VALUES ('$comment', '$_SESSION[user]', '$post_id')";

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

//check on the success of the query
if(!$result2) {
echo 'Error occurred: ' . mysqli_error($conn) . '<br><br>';
}

//close the connection
mysqli_close($conn);
}
?>

<h1 class="header_center">Your Comment has been posted.</h1>

<p>You can view your comment <a href="gallery.php">here</a>.</p>

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

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

<!--this file will display after contact form is submitted and it will input the data into the databse-->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Welcome!</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
  //guests and members will see different nav bars.
if (isset($_SESSION['user'])) {
  require('member_nav.php');
}
else {
require('guest_nav.php');
}
?>

  <br><br>

  <?php

//storing information from the form in php variables
$username = $_POST["user_name"];
$email = $_POST["email"];
$feedback = $_POST["feedback"];

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

  //use PHP variables as input to MqSQL query.
$qry = "INSERT INTO user_feedback (username, email, feedback) VALUES ('$username', '$email', '$feedback');";

//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>';
 mysqli_close($conn);

  ?>

<p>Thank you for your feedback! We will get back to you soon.</p>

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

</body>
</html>

//db_connect.php
<!--this file will be called whenever a database connection is needed-->
<?php
//store our connection credentials in variables;
//names removed for privacy
$server = '';
$user = '';
$pass = '';
$dbase = '';
//making the actual connection to mysql and the chosen database
$conn = mysqli_connect($server, $user, $pass, $dbase);
 //if the connection failed print error message
 if (!$conn) {
    die('Could not connect to database because: ' . mysqli_connect_error());
 }
?>

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

<!--this is a member's only page to edit their 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</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');

  //initalizing php variables to hold form data

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

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


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

  //creating query string
  $query = "select * from user_info where username = '$_SESSION[user]'";

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

   if (mysqli_num_rows($result) > 0) {

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

      //storing database info to input it into the form
      $username = $row['username'];
       $email = $row['email'];
       $fname = $row['fname'];
       $lname = $row['lname'];
       $age = $row['age'];
       $phone = $row['phone_num'];

     }
     //end while loop

   }
   //end if 1 or more rows

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

  <h1 class="header_center">Edit Profile</h1>

  <div class="update_form">
    <form
    id="update"
    action="update_form.php"
    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="text" name="pword" id="pword" placeholder="Password" value="<?php echo $pword; ?>">

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

      </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="update" value="UPDATE">

    </form>
  </div>

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

  <script type="text/javascript" src="../javascript/myJS.js" ></script>

</body>
</html>

//footer.php
<!--footer info to include on all php files that will be displayed-->
<footer>
<div class="footer">
    <footer>
      <p>&copy; 2023 PhotoShare</p>
    </footer>
  </div>
</footer>

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

<!--this is the gallery page that will display all the user posts 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>Gallery</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>

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

  <br><br>

  <h1 class="header_center">User Posts</h1>

  <!--All images used came from pexels.com under the 'landscape' search, the orginal photographers' names are in the names of the images used in this gallery. Retrieved 21st Oct. 2023.-->

 <?php

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


 //Create the query string
 $query = "select * from post_info";

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

   if (mysqli_num_rows($result) > 0) {

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

      //to display the gallery
      echo "<div class=\"gallery\">

       <div class=\"pic\"><img src='$row[picture]'  alt='User Upload' width='500' height='333'></div>
       <input type='hidden' name='post_id' value='$row[post_id]'>

       <br>

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

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

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

       //comment form for users to write comments on posts
       include('comment_frm.php');

       //to format the comment section
       echo "<div id=\"comment_section\">";

       //to display the comments from the comment_section table in the database
       include('comment_display.php');

       //to close off the div tags from the prev. echo statements
       echo "</div>";

      echo "</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>

//guest_nav.php
<!--this will display on all the php files 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="reg_form.php">Sign Up</a></li>
    </ul>
  </div>

  <div class="nav2">
    <ul>
      <li><a href="gallery.php">Gallery</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>