Milestone 4: improved image uploader 14. Modify the form to allow applying image
ID: 3861194 • 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>
<div>
<?php if(empty($_SESSION["user_id"])) { ?>
<form action="" method="post" id="frmLogin">
<div class="errMssg"><?php if(isset($mssg)) { echo $mssg; } ?></div>
<div class="fldGrp">
<div><label for="logged">Username</label></div>
<div><input name="uname" type="text" class="div11"></div>
</div>
<div class="fldGrp">
<div><label for="pswd">Password</label></div>
<div><input name="pswd" type="pswd" class="div11"> </div>
</div>
<div class="fldGrp">
<div><input type="submit" name="logged" value="Login" class="submitBtn"></span></div>
</div>
</form>
<?php
} else {
$res = mysqlI_query($con,"SELECT * FROM users WHERE user_id='" . $_SESSION["user_id"] . "'");
$ro = mysqli_fetch_array($res);
?>
<form action="" method="post" id="logout">
<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>
</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>
<body>
<div class="upload">
<form method="POST" enctype="multipart/form-data" id="imageform">
<br>
<input type="file" name="image" id="photoimg" >
<br><br>
<input type="submit" name="submit" value="UPLOAD">
</form>
</div>
</body>
</html>
Explanation / Answer
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>
<div>
<?php if(empty($_SESSION["user_id"])) { ?>
<form action="" method="post" id="frmLogin">
<div class="errMssg"><?php if(isset($mssg)) { echo $mssg; } ?></div>
<div class="fldGrp">
<div><label for="logged">Username</label></div>
<div><input name="uname" type="text" class="div11"></div>
</div>
<div class="fldGrp">
<div><label for="pswd">Password</label></div>
<div><input name="pswd" type="pswd" class="div11"> </div>
</div>
<div class="fldGrp">
<div><input type="submit" name="logged" value="Login" class="submitBtn"></span></div>
</div>
</form>
<?php
} else {
$res = mysqlI_query($con,"SELECT * FROM users WHERE user_id='" . $_SESSION["user_id"] . "'");
$ro = mysqli_fetch_array($res);
?>
<form action="" method="post" id="logout">
<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>
</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>
<body>
<div class="upload">
<form method="POST" enctype="multipart/form-data" id="imageform">
<br>
<input type="file" name="image" id="photoimg" >
<br><br>
<input type="submit" name="submit" value="UPLOAD">
</form>
</div>
</body>
</html>