HTML Form insert,update and delete in use php with mysql.

Today I am talk about. How to form insert,update and delete a simple html upload image with time stamp. I am just showing step by step all process. So, let go.............,

AT first create a simple html file. like name as index.html and code will be below.
///////////////////////////////////////////////////////////////////index.html/////////////////////////////////////////////////////
<form action="saveimage.php" enctype="multipart/form-data" method="post">
<table>
<tbody><tr>
<td><input name="uploadedimage" type="file"></td></tr>
<tr><td>
<input name="Upload Now" type="submit" value="Upload Image">
</td></tr>
</tbody></table>
</form>
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

Second Create a New Database Name and Table:
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
1. Syntax of DB: CREATE DATABASE dbname;( i use db name is: image_db).
2. Syntax of Table: CREATE TABLE images_tbl(images_id int(10) AUTO-INCREMENT,primary,
images_path varchar(255),
submission_date data,
);
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
Connection to Database with html form process into php and myslq As like as......
/////////////////////////////////////////////////////saveimage.php////////////////////////////////////////////////////////////////////////
<?php
/**********MYSQL Settings****************/
$host="localhost";
$databasename="image_db";
$user="root";
$pass="";
$conn=mysqli_connect($host,$user,$pass,$databasename);
$db_selected = mysqli_select_db($conn,$databasename);
/**************************/

/*Create a Functions*/
function GetImageExtension($imagetype)
        {
       if(empty($imagetype)) return false;
       switch($imagetype)
       {
           case 'image/bmp': return '.bmp';
           case 'image/gif': return '.gif';
           case 'image/jpeg': return '.jpg';
           case 'image/png': return '.png';
           default: return false;
       }
     }
/*Form Checking*/
if (!empty($_FILES["uploadedimage"]["name"])) {
    $file_name=$_FILES["uploadedimage"]["name"];
    $temp_name=$_FILES["uploadedimage"]["tmp_name"];
    $imgtype=$_FILES["uploadedimage"]["type"];
    $ext= GetImageExtension($imgtype);//Adding a function with image extension
    $imagename=$_FILES["uploadedimage"]["name"];
    $target_path = "images/".$imagename;
/*Validation same image file*/
if(file_exists($target_path)){
    echo "File is Already Exsists";
    return true;
}
/*Protected image size just edit what you went */
if($_FILES['uploadedimage']['size']>500000000){
    echo "File is Very Large, <b>Please check your Images</b>";
    return true;
}
/*Move image tmp file to target file*/
if(move_uploaded_file($temp_name, $target_path)) {
$query_upload="INSERT INTO images_tbl (images_path,submission_date)VALUES
('".$target_path."','".date("Y-m-d")."')";
    $result=mysqli_query($conn,$query_upload) or die("error in $query_upload == ".mysql_error());
        $id = (int) mysql_insert_id($result);
        header('Location:imag_view.php');
}else{
   exit("Error While uploading image on the server");
}
}

Note: If you have to get some error. Please check you php and mysql version and your code will be run successfully.
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
when Insert your image at your Database Please check to show image the code will be below:
/////////////////////////////////////////////imag_view.php/////////////////////////////////////////////////////////////////////////////
<?php
/**********MYSQL Settings*********************************************/
$host="localhost";
$databasename="image_db";
$user="root";
$pass="";
$conn=mysqli_connect($host,$user,$pass,$databasename);
$db_selected = mysqli_select_db($conn,$databasename);
/*******************************************************************/
/*mysql select query adding here*/
 $sql=mysqli_query($conn,"SELECT * FROM images_tbl");
  echo "<table border='1'>";//Just create a simple table to show all data here;
  echo "<tr>
      <th>ID</th>
      <th>Images</th>
      <th>Edit</th>
      <th>Delete</th>
    </tr>";
while($row = mysqli_fetch_array($sql,MYSQL_BOTH)){// MYSQL FETCH ARRAY LOOP
    $id=$row['images_id'];
    ?>
    <tr><td><?php echo $row['images_id']; ?></td>
    <td><?php echo "<img src='".$row['images_path']."'>"; ?></td>
    <td><a href="edit.php?images_id=<?php echo $id; ?>">Edit</a></td>
    <td><a href="delete.php?images_id=<?php echo $id?>">Delete</a></td>
    </tr>
    <?php
}
echo "</table>";
?>
//Simple style adding here if your image show large
<style type="text/css">
        img{
        width: 120px;
        }
    </style>
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
If you wish to edit your image again show your table code will be like here:
///////////////////////////////////////////////edit.php//////////////////////////////////////////////////////////////////////////////////////
<?php
/**********MYSQL Settings****************/
$host="localhost";
$databasename="image_db";
$user="root";
$pass="";
$conn=mysqli_connect($host,$user,$pass,$databasename);
$db_selected = mysqli_select_db($conn,$databasename);
/**************************/
/*Create function for image extension*/
function GetImageExtension($imagetype)
        {
       if(empty($imagetype)) return false;
       switch($imagetype){
           case 'image/bmp': return '.bmp';
           case 'image/gif': return '.gif';
           case 'image/jpeg': return '.jpg';
           case 'image/png': return '.png';
           default: return false;
       }
     }
/*Checking a image conditions*/
if (!empty($_FILES["uploadedimage"]["name"])) {
    $file_name=$_FILES["uploadedimage"]["name"];
    $temp_name=$_FILES["uploadedimage"]["tmp_name"];
    $imgtype=$_FILES["uploadedimage"]["type"];
    $ext= GetImageExtension($imgtype);
    $imagename=$_FILES["uploadedimage"]["name"];
    $target_path = "images/".$imagename;
/*Not allowed a same image again uploaded*/
if(file_exists($target_path)){
    echo "File is Already Exsists";
    return true;
}
/*Check Image size use large size if you use less, just your choices */
if($_FILES['uploadedimage']['size']>500000000){
    echo "File is Very Large, <b>Please check your Images</b>";
    return true;
}
/*move image to target files which is name is images */
 if(move_uploaded_file($temp_name, $target_path)) {
$id=$_GET['images_id'];
$sql=mysqli_query($conn,"UPDATE images_tbl SET images_path='$target_path', submission_date='".date("Y-m-d")."' WHERE images_id='$id'");//image updat query
$sql1=mysqli_query($conn,"SELECT * FROM images_tbl");//select query again
  while($row=mysqli_fetch_array($sql1,MYSQL_BOTH)){//fetch array
     ?>
     echo $row['images_id'];
    echo "<img src='".$row['images_path']."'>";
    }
header('Location:imag_view.php');
}else{
   exit("Error While uploading image on the server");
}
}
?>
<!---Again insert  form Here, because if you change your image than it's need it. --->
<form action="" enctype="multipart/form-data" method="post">
<table style="border-collapse: collapse; font: 12px Tahoma;" border="1" cellspacing="5" cellpadding="5">
<tbody><tr>
<td>
<input name="uploadedimage" type="file">
</td>
</tr>
<tr>
<td>
<input name="Update" type="submit" value="Update Image">
</td>
</tr>
</tbody></table>
</form>    
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
And Finally Adding Delete files,,,,,,,,,,,,,,,
///////////////////////////////////////delete.php/////////////////////////////////////////////////////////////////////////////////////////
<?php
/**********MYSQL Settings****************/
$host="localhost";
$databasename="image_db";
$user="root";
$pass="";
$conn=mysqli_connect($host,$user,$pass,$databasename);
$db_selected = mysqli_select_db($conn,$databasename);
/**************************/
/*setup delete query*/
$id=$_GET['images_id'];
$del=mysqli_query($conn,"DELETE FROM images_tbl WHERE images_id='$id'");
if($del){
    echo "Data is Successfully Deleted";
    header('Location:imag_view.php');
}else{
    echo 'Does not delete this items';
}
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
 I use simple form for image upload coding, If you find any kinds of error please knocked me. I am always in online. Thank you very much.

What is Web Design?

Design is the process of collecting ideas, and aesthetically arranging and implementing them, guided by certain principles for a specific purpose. Web design is a similar process of creation, with the intention of presenting the content on electronic web pages, which the end-users can access through the internet with the help of a web browser.

Elements of Web Design

Web design uses many of the same key visual elements as all types of design such as:

Layout: This is the way the graphics, ads and text are arranged. In the web world, a key goal is to help the view find the information they seek at a glance. This includes maintaining the balance, consistency, and integrity of the design.

Color: The choice of colors depends on the purpose and clientele; it could be simple black-and-white to multi-colored design, conveying the personality of a person or the brand of an organization, using web-safe colors.

Graphics: Graphics can include logos, photos, clipart or icons, all of which enhance the web design. For user friendliness, these need to be placed appropriately, working with the color and content of the web page, while not making it too congested or slow to load.

Fonts:  The use of various fonts can enhance a website design. Most web browsers can only read a select number of fonts, known as "web-safe fonts", so your designer will generally work within this widely accepted group.

Content: Content and design can work together to enhance the message of the site through visuals and text. Written text should always be relevant and useful, so as not to confuse the reader and to give them what they want so they will remain on the site. Content should be optimized for search engines and be of a suitable length, incorporating relevant keywords.

Creating User-Friendly Web Design

Besides the basic elements of web design that make a site beautiful and visually compelling, a website must also always consider the end user. User-friendliness can be achieved by paying attention to the following factors.

Navigation: Site architecture, menus and other navigation tools in the web design must be created with consideration of how users browse and search. The goal is to help the user to move around the site with ease, efficiently finding the information they require.

Multimedia: Relevant video and audio stimuli in the design can help users to grasp the information, developing understanding in an easy and quick manner. This can encourage visitors to spend more time on the webpage.

Compatibility: Design the webpage, to perform equally well on different browsers and operating systems, to increase its viewing.

Technology: Advancements in technology give designers the freedom to add movement and innovation, allowing for web design that is always fresh, dynamic and professional.

Interactive: Increase active user participation and involvement, by adding comment boxes and opinion polls in the design. Convert users from visitors to clients with email forms and newsletter sign-ups.

Toronto web design professionals create excellent User Interface (UI) Design for a satisfying web experience. They use critical planning and analysis for the design and they pay attention to individual client specifications, converting the intricate process into a simple and elegant piece of art.