Milestone 4: improved image uploader 14. Modify the form to allow applying image

ID: 3865976 • Letter: M

Question

Milestone 4:

improved image uploader 14. Modify the form to allow applying image filters (implemented using CSS) to an image before uploading. 15. Change the WALL table to include a field that will store information about applied/selected filter. 16. Change the PHP scripts accordingly. 17. See example of desired functionality1 at: http://lamp.cse.fau.edu/~efortes/hw8/index.php (signup / login page) and http://lamp.cse.fau.edu/~efortes/hw8/form.php (form) and http://lamp.cse.fau.edu/~efortes/hw8/wall.php (wall) 18. Integrate the latest code with previous milestone(s). 19. Test your app after every significant change / addition. 20. IMPORTANT: NAMING CONVENTIONS o Name your starting page (with login/signup screen) index.php o Name the upload form (which should only be accessible to registered users) form.php o Name your wall file (which should only be accessible to registered users) wall.php o Make all files available at your p7 folder. o In summary, my grader and I should be able to go to http://lamp.cse.fau.edu/~username/p7/index.php to signup/login, then to http://lamp.cse.fau.edu/~username/p7/form.php to test the upload functionality, and to http://lamp.cse.fau.edu/~username/p7/wall.php to see the results (and other people’s photos, too).

My index.php

<?php
session_start();

require_once './php/db_connect.php';

$con = mysqli_connect("localhost","root","phppot_examples");

$mssg="";

if(!empty($_POST["logged"])) {

$res = mysqli_query($con,"SELECT * FROM users WHERE uname='" . $_POST["uname"] . "' and pswd = '". $_POST["pswd"]."'");

$ro = mysqli_fetch_array($res);

if(is_array($ro)) {

$_SESSION["user_id"] = $ro['user_id'];

} else {

$mssg = "Invalid Username or Password!";

}

if(!empty($_POST["logout"])) {

$_SESSION["user_id"] = "";

session_destroy();

}

<html>

<head>

<title>User Login</title>

<style>

#frmLogin {

padding: 20px 60px;

background: #B6E0FF;

color: #555;

display: inline-block;

border-radius: 4px;

}

.fldGrp {

margin:15px 0px;

}

.div11 {

padding: 8px;width: 200px;

border: #A3C3E7 1px solid;

border-radius: 4px;

}

.submitBtn {

background: #65C370;

border: 0;

padding: 8px 20px;

border-radius: 4px;

color: #FFF;

text-transform: uppercase;

}

.memDash {

padding: 40px;

background: #D2EDD5;

color: #555;

border-radius: 4px;

display: inline-block;

text-align:center;

}

.outBtn {

color: #09F;

text-decoration: none;

background: none;

border: none;

padding: 0px;

cursor: pointer;

}

.errMssg {

text-align:center;

color:#FF0000;

}

.demo-content label{

width:auto;

}

</style>

</head>

<body>

<div>

<?php if(empty($_SESSION["user_id"])) { ?>

<div><label for="logged">Username</label></div>

</div>

<div><label for="pswd">Password</label></div>

</div>

</div>

</form>

<?php

} else {

$res = mysqlI_query($con,"SELECT * FROM users WHERE user_id='" . $_SESSION["user_id"] . "'");

$ro = mysqli_fetch_array($res);

<div class="memDash">Welcome <?php echo ucwords($ro['display_name']); ?>, You have successfully logged in!<br>

Click to <input type="submit" name="logout" value="Logout" class="outBtn">.</div>

</form>

</div>

<?php

}

</body>

</html>

my form.php

<?php
require_once './php/db_connect.php';
if(isset($_POST['submit'])){
if(@getimagesize($_FILES['image']['tmp_name']) == FALSE){
echo "<span class='image_select'>please select an image</span>";

}
else{
$image = addslashes($_FILES['image']['tmp_name']);
$name = addslashes($_FILES['image']['name']);
$image = file_get_contents($image);
$image = base64_encode($image);

//-- Rename image name as your wish. Currently used username with some random number.
$img_detail = explode(".", $_FILES['image']['name']);
$newfilename = "username_" .rand(). '.' . end($img_detail);

//-- Save you image in DB
saveImage($newfilename,$image);

//-- Save image in particular path in local directory
$uploaddir = '../test/image/'; //your local directory path. Check folder permission.
$uploadfile = $uploaddir . $newfilename;

echo "<p>";
if (move_uploaded_file($_FILES['image']['tmp_name'], $uploadfile)) { //-- Move image to your local path
//-- If successfully done then display the message
echo "Uploaded successfully";
}
else {
//-- If any failure occurred display the message
echo "There is an error occurred while uploading an image";
}
echo "</p>";
}

}

displayImage();
function saveImage($name,$image)
{
$con = mysqli_connect("localhost","root","phppot_examples");

$timestamp = date('Y-m-d H:i:s');
$title = $_SESSION['title']; //-- if you have
$text = $_SESSION['text']; //-- if you have

//-- Check image present for logged user name in a WALL table
$res = mysqli_query($con,"SELECT * FROM WALL WHERE USER_USERNAME='" . $_SESSION["uname"] . "'");
$ro = mysqli_fetch_array($res);

if(is_array($ro)) { //-- If already present in a table then update the data
$qry = "UPDATE WALL SET IMAGE_NAME='$image', TIME_STAMP = '$timestamp'";
}
else{ //-- If not present in table then insert the data
$qry = "INSERT INTO WALL (USER_USERNAME,STATUS_TEXT,STATUS_TITLE, IMAGE_NAME, TIME_STAMP) VALUES ('".$_SESSION["uname"]."','".$text."', '".$title."','".$image."', '".$timestamp."')";
}
$result = mysqli_query($con, $qry);
if($result)
{
//-- If uploaded
echo "Uploaded";
}
else
{
//-- If not uploaded
echo "Not Uploaded";
}
//-- Close mysql connection
mysqli_close($con);
}
/*
* Get/Fetch the image from table and display it in a required place based on user name.
*/
function displayImage()
{
$con = mysqli_connect("localhost","root","phppot_examples");
$res = mysqli_query($con,"SELECT IMAGE_NAME FROM WALL WHERE USER_USERNAME='" . $_SESSION["uname"] . "' ORDER BY DESC");

while($ro = mysqli_fetch_array($res))
{
echo '<img class="image" src="data:image;base64,'.$ro[1].'">';

}
mysqli_close($con);
}

<!DOCTYPE html>
<html>
<head>
</head>

Explanation / Answer

login.php:

<?php
ob_start();
session_start();
require_once 'dbconnect1.php';

// it will never let you open index(login) page if session is set
if ( isset($_SESSION['user'])!="" ) {
header("Location: home.php");
exit;
}

$error = false;

if( isset($_POST['btn-login']) ) {

// prevent sql injections/ clear user invalid inputs
$username= trim($_POST['username']);
$username = strip_tags($username);
$username = htmlspecialchars($username);

$password= trim($_POST['pass']);
$password= strip_tags($pass);
$password= htmlspecialchars($pass);
// prevent sql injections / clear user invalid inputs

if(empty($username)){
$error = true;
$usernameError = "Please enter your username address.";
} else if ( !filter_var($username,FILTER_VALIDATE_username) ) {
$error = true;
$usernameError = "Please enter valid username address.";
}

if(empty($pass)){
$error = true;
$passError = "Please enter your password.";
}

// if there's no error, continue to login
if (!$error) {

$password = hash('sha256', $pass); // password hashing using SHA256

$res=mysql_query("SELECT userId, userName, userpasswordFROM users WHERE userusername='$username'");
$row=mysql_fetch_array($res);
$count = mysql_num_rows($res); // if uname/passwordcorrect it returns must be 1 row

if( $count == 1 && $row['userPass']==$password ) {
$_SESSION['user'] = $row['userId'];
header("Location: home.php");
} else {
$errMSG = "Incorrect Credentials, Try again...";
}

}

}
?>
<body>

<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="panel panel-login">
<div class="panel-heading">
<div class="row">
<div class="col-xs-6">
<a href="#" class="active" id="login-form-link">Login</a>
</div>
<div class="col-xs-6">
<a href="#" id="register-form-link">Register</a>
</div>
</div>
<hr>
</div>
<div class="panel-body">
<div class="row">
<div class="col-lg-12">


<form id="login-form" action="index.php" method="post" role="form">
<div class="form-group">
<input type="text" name="username" id="username" tabindex="1" class="form-control" placeholder="Username" value="">
</div>
<div class="form-group">
<input type="password" name="password1" id="password1" tabindex="2" class="form-control" placeholder="Password">
</div>
<div class="form-group text-center">
<input type="checkbox" tabindex="3" class="" name="remember" id="remember">
<label for="remember"> Remember Me</label>
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<input type="submit" name="login-submit" id="login-submit" tabindex="4" class="form-control btn btn-login" value="Log In">
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-lg-12">
<div class="text-center">
<a href="#" tabindex="5" class="forgot-password">Forgot Password?</a>
</div>
</div>
</div>
</div>
</form>


<form id="register-form" action="index.php" method="post" role="form">
                                   <div class="form-group">
<input type="text" name="username1" id="username1" tabindex="1" class="form-control" placeholder="Username" value="">
</div>

                                   <div id="alert" class="alert alert-danger">
                                       Someone already has that username. Try another user username
                                   </div>


<div class="form-group">
<input type="text" name="forename" id="forename" tabindex="1" class="form-control" placeholder="First Name" value="">
</div>
<div class="form-group">
<input type="text" name="surname" id="surname" tabindex="1" class="form-control" placeholder="Last Name" value="">
</div>
<div class="form-group">
<input type="password" name="password" id="password" tabindex="2" class="form-control" placeholder="Password">
</div>
<div class="form-group">
<input type="password" name="confirm-password" id="confirm-password" tabindex="2" class="form-control" placeholder="Confirm Password">
</div>

                                   <div id="alert1" class="alert alert-danger">
                                       Passwords dont Match.
                                   </div>


<div class="form-group">
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<input type="submit" name="register-submit" id="register-submit" tabindex="4" class="form-control btn btn-register" value="Register Now">
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

</body>

<?php ob_end_flush(); ?>

register.php:

<?php
   ob_start();
   session_start();
   if( isset($_SESSION['user'])!="" ){
       header("Location: home.php");
   }
   include_once 'dbconnect.php';

$error = false;

   if ( isset($_POST['btn-signup']) ) {

       // clean user inputs to prevent sql injections
       $name = trim($_POST['name']);
       $name = strip_tags($name);
       $name = htmlspecialchars($name);

       $email = trim($_POST['email']);
       $email = strip_tags($email);
       $email = htmlspecialchars($email);

       $pass = trim($_POST['pass']);
       $pass = strip_tags($pass);
       $pass = htmlspecialchars($pass);

       // basic name validation
       if (empty($name)) {
           $error = true;
           $nameError = "Please enter your full name.";
       } else if (strlen($name) < 3) {
           $error = true;
           $nameError = "Name must have atleat 3 characters.";
       } else if (!preg_match("/^[a-zA-Z ]+$/",$name)) {
           $error = true;
           $nameError = "Name must contain alphabets and space.";
       }

       //basic email validation
       if ( !filter_var($email,FILTER_VALIDATE_EMAIL) ) {
           $error = true;
           $emailError = "Please enter valid email address.";
       } else {
           // check email exist or not
           $query = "SELECT userEmail FROM users WHERE userEmail='$email'";
           $result = mysql_query($query);
           $count = mysql_num_rows($result);
           if($count!=0){
               $error = true;
               $emailError = "Provided Email is already in use.";
           }
       }
       // password validation
       if (empty($pass)){
           $error = true;
           $passError = "Please enter password.";
       } else if(strlen($pass) < 6) {
           $error = true;
           $passError = "Password must have atleast 6 characters.";
       }

       // password encrypt using SHA256();
       $password = hash('sha256', $pass);

       // if there's no error, continue to signup
       if( !$error ) {

           $query = "INSERT INTO users(userName,userEmail,userPass) VALUES('$name','$email','$password')";
           $res = mysql_query($query);

           if ($res) {
               $errTyp = "success";
               $errMSG = "Successfully registered, you may login now";
               unset($name);
               unset($email);
               unset($pass);
           } else {
               $errTyp = "danger";
               $errMSG = "Something went wrong, try again later...";
           }

       }


   }
?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Coding Cage - Login & Registration System</title>
<link rel="stylesheet" href="assets/css/bootstrap.min.css" type="text/css" />
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>

<body>

</body>

</body>
</html>
<?php ob_end_flush(); ?>

Navigate

Milestone 4: improved image uploader 14. Modify the form to allow applying image

Milestone 5: Definition of System Quality Standards The Recreation and Wellness

Milestone 4: improved image uploader 14. Modify the form to allow applying image

Question

Explanation / Answer

Related Questions

Navigate