How to Upload File Into a Database With a Html Form

Introduction

The post-obit steps are required to design a registration form (Sign Upward Form):

Step 1: Firstly, install a virtual server on your computer (eg Xampp, Wamp).

Xampp is a free and open up-source cross-platform web server solution stack package developed by Apache Friends, consisting mainly of the Apache HTTP Server, MySQL database, and interpreters for scripts written in the PHP and Perl programming languages. XAMPP stands for Cross-Platform (X), Apache (A), MySQL (1000), PHP (P), and Perl (P).

Figure:Xampp Server

Step ii: Next we will crave an editor where the HTML code has to be written. You lot tin employ any editor (such equally Notepad++, Adobe Dreamweaver, NetBeans, etc). Here we volition use Notepad ++.

Step 3:Install Notepad++. Here are the steps:

Figure: Notepad ++

Notepad++ is a source code editor used with Microsoft Windows. It supports editing in tabular form, which allows us to work with multiple open up files in a single window.

Notepad++ is distributed every bit gratuitous software.

Click on the showtime link in the browser window. Later clicking the kickoff link the following window will appear.

Figure: Download Notepad ++

Download the software by clicking the download button.

Step 4: Open the Notepad++ text editor and write the HTML lawmaking for designing the HTML Sign Upwards page.\

We volition utilise various HTML tags to design the folio.

You can include the fields co-ordinate to your convenience (i.due east whichever fields y'all require for the form).

Here I have included the fields according to my convenience.

Take a view of the lawmaking written in notepad++,

1. < html >
2. < head >
3. < championship > Registration Form </ title >
4. </ head >
5. < body >
6. < link href  = "registration.css" blazon  = "text/css" rel  = "stylesheet" />
7. < h2 > Sign Up </ h2 >
8. < form name  = "form1" action = "modified.php" method  = "post" enctype  = "multipart/grade-data" >
9. < div class  = "container" >
10. < div course  = "form_group" >
11. < characterization > First Name: </ characterization >
12. < input type  = "text" name  = "fname" value  = ""  required />
13. </ div >
14. < div form  = "form_group" >
15. < characterization > Middle Name: </ label >
16. < input blazon  = "text" proper noun  = "mname" value  = ""  required />
17. </ div >
18. < div grade  = "form_group" >
19. < label > Last Proper name: </ label >
20. < input type  = "text" name  = "lname" value  = ""  required />
21. </ div >
22. < div class  = "form_group" >
23. < label > Password: </ label >
24. < input type  = "countersign" proper noun  = "pwd" value  = ""  required />
25. </ div >
26. </ div >
27. </ form >
28. </ torso >
29. </ html >

Here I accept included the LINK tag to link the CSS file for this HTML page.

HTML or Hypertext Markup Linguistic communication is the standard and most basic linguistic communication in use to create web pages.

CSS stands for Cascading Manner Sheets This is used for styling purpose. HTML coding is but a structure and CSS is applied to dictate your website's look and experience. Font size, font color, font way styling of images, page layout, mouse-over furnishings and more than are determined past CSS. The CSS applied over the above HTML coding is given below.

1. .container {
2. max-width : 1350px ;
3. width : 100% ;
4. margin : 50px ;
5. summit : auto ;
6. display : block ;
7. }
9. body {
10. color : #8A2BE2 ;
11. font-size : 20px ;
12. font-family unit : Verdana , Arial , Helvetica , monospace ;
13. background-colour : #F0E8A0 ;
14. }
16. htwo  {
17. text-align : eye ;
18. }
20. .form_group {
21. padding : 10px ;
22.   ;
23. display : block ;
24. }
26. label {
27. bladder : left ;
28. padding-right : 50px ;
29. line-elevation : 10% ;
30. display : block ;
31. width : 208px ;
32. }

Here yous would be wondering why I accept used <div> in HTML. Let me explain to yous the importance of using <div>.

The <div> element is oftentimes used as a layout tool.

We need to see how to use them after on in the body section of the page. To use your class, all you need to practise is add the class=" " aspect to the tag you wish to have the way of your class. So, if you wanted a line of text to be read, you could add the class attribute to a <DIV> tag, like this:

<div grade="form_group">. Here we have used this class because nosotros can directly utilise CSS on this course. The tags which has been opened should be closed too.

At present permit us move further.

Step five:  Utilize CSS on the HTML code. General rules for applying CSS are:

We employ dot(.) beside any form to use effects into it and '#' tag before any ID. East.thousand.

.container {

// css attributes will be written hither }

Here I have taken container as a form. Class is user-divers.

Note: Save the Sign_Up page in the xampp binder->htdocs->create a new folder( user-defined). Inside this new folder, you lot have to keep all the data related to your project. Information technology may be any kind of images used in webpage, HTML coding, or CSS coding. I mean to say all the things that are used in creating a web page must be under i roof (i.e nether one binder).

Figure: Sign_Up

Afterward writing the HTML lawmaking and applying the to a higher place CSS, the registration page would look similar to a higher place.

Next, we will insert data into the fields of the sign_up page and store the data in MySQL.

For that, we take to outset the xampp controller. Get-go Apache and MYSQL in the XAMPP controller.

At present nosotros volition get to the next level where we will make use of PHP syntax.

PHP

PHP is a server-side scripting language designed for web development but also used every bit a general-purpose programming language. PHP is an acronym for "PHP: Hypertext Preprocessor".

Figure: Xammp Start

PHP is a widely-used, open-source scripting language. PHP scripts are executed on the server. PHP is free to download and use. PHP code is executed on the server, and the result is returned to the browser as plain HTML. PHP files have extension ".php". PHP tin collect course data.

PHP can add, delete, alter data in your database. Information technology runs on various platforms (Windows, Linux, Unix, Mac OS X, etc.) and supports a wide range of databases. PHP is easy to acquire and runs efficiently on the server-side.

PHP Variables (Rules)

• A variable starts with the $ sign, followed by the proper noun of the variable.
• A variable name must first with a letter of the alphabet or the underscore graphic symbol.
• A variable name cannot start with a number.
• Variable names are case-sensitive ($age and $AGE are two dissimilar variables).

Output Variable

The PHP 'echo' statement is often used to output data to the screen.

PHP FORMS

Write Html coding for sign_up page and salvage information technology as index.php. Again create a PHP page named connection.php where we will write the code for creating a connection with the database.

1. <?php
2.        $servername  = "localhost" ;
3.        $username  = "root" ;
4.        $password  = "" ;
5.        $conn  = mysql_connect ( $servername  , $username  , $password ) or die ( "unable to connect to host" );
6.        $sql  = mysql_select_db ( 'test' , $conn ) or die ( "unable to connect to database" );
7. ?>

The PHP script are always written between (<?php (opening) and ?> endmost).

Here every bit you are seeing that I have used user-defined variables to assign something. This makes me easy to write code effectively and in a clean way.

Here I have assigned localhost to $servername, 'root' to $username and password has been left blank. Again I have written mysql_connect()—this is mainly used to open up a connection to MySQL server. Again we have used mysql_select_db()—this is used to select the database created in localhost/phpmyadmin.

At present permit us create a database in MySQL. The PHPMyAdmin window will look like the following screenshot:

Figure:phpmyadmin

Here you can create your own database and as many tables within that.

Suppose here I have created a database named 'test', within that I accept created a table named 'registration'. In this table, nosotros will create fields that are used in our registration form such every bit fname, mname, lname, pwd, cnf, mail, number, sex, address, lawmaking, city, land, skills, attach_file.

Note: Here we can write any proper name for the concerned fields, just go along in mind the names you take given for the relative fields.

Yous can create a table manually or past writing queries. Here, I have created it manually.

Figure: Insert fields

Here write information blazon (nearly of the time we use varchar), length in numbers. After filling the fields name click Go to continue.

Afterwards inserting you can view the inserted fields where the information will exist fetched from the grade.

The structure is equally in the post-obit screenshot:

Figure: Structure

Now create another php page and name it modified.php.

On this folio, nosotros will write code to come across how we tin can fetch information from the fields.

For this, we volition brand use of form methods through which nosotros will retrieve the data entered into the fields and store it into our MySQL database.

The method attribute specifies how to ship form-data (the form-information is sent to the folio specified in the action attribute). The class-data can exist sent as URL variables (with method="get") or as HTTP post transaction (with method="mail").

Basically we apply any of the post-obit two methods to fetch data from the fields.

• GET Method: The Become method produces a long string that appears in the browser's location. It has a restriction of sending up to 1024 characters merely. We should never utilise the GET method if we have a password or other sensitive information to be sent to the server. The PHP provides $_GET associative array to access all the data sent using the Get method.
• POST Method: In this method, parameters are not saved in browser history. Information is not shown in the browser'southward URL. POST is safer than GET. The PHP provides $_POST associative array to admission all the information sent using the Post method.

Here I accept included listing.php file because in this PHP file I have written the code for listing all the inserted data.

1. <?php
3. include "connection.php" ;
5. if (isset( $_GET [ 'id' ])){
6. $sql  = "delete from registration where id = '" . $_GET ['id ']."' ";
7. $result  = mysql_query( $sql );
8. }
10. $sql  = "select * from registration" ;
11. $result  = mysql_query( $sql );
12. ?>
13. <html>
14.     <trunk>
15.         <table width ="100%"  border = "1"  cellspacing = "1"  cellpadding = "1" >
16.             <tr>
17.                 <td>Id</td>
18.                 <td>First Proper noun</td>
19.                 <td>Centre Name</td>
20.                 <td>Terminal Proper name</td>
21.                 <td>Password</td>
22.                 <td>Confirm Password</td>
23.                 <td>Electronic mail</td>
24.                 <td>Contact No.</td>
25.                 <td>Gender</td>
26.                 <td>Address</td>
27.                 <td>Pincode</td>
28.                 <td>City</td>
29.                 <td>State</td>
30.                 <td>Skills</td>
31.                 <td>Files</td>
32.                 <td colspan ="2" >Activeness</td>
33.             </tr>
34.         </tabular array>
35.     </body>
36. </html>

Now write a php code in this page only.

Notation: We have to include connection.php file in all the pages considering the connection code has been written in connectedness.php file simply. Until and unless the connection is established, the data tin't exist sent to the database. Hither I have written an IF-ELSE condition to check whether any id is coming or not.

The isset () function is used to check whether a variable is set or non.

Then I have written a query for delete and saved in a local variable named $sql.

Subsequently that mysql_query() is used to execute the query written in a higher place. Again nosotros have written a query to select all the elements of the table created.

1. <?php
3. while ( $row  = mysql_fetch_object( $result )){
6. ?>
7.     <tr>
8.         <td>
9.             <?phpecho $row ->id;?>
10.         </td>
11.         <td>
12.             <?phpecho $row ->fname;?>
13.         </td>
14.         <td>
15.             <?phprepeat $row ->mname;?>
16.         </td>
17.         <td>
18.             <?phpecho $row ->lname;?>
19.         </td>
20.         <td>
21.             <?phpecho $row ->pwd;?>
22.         </td>
23.         <td>
24.             <?phpecho $row ->cnf;?>
25.         </td>
26.         <td>
27.             <?phpecho $row ->mail service;?>
28.         </td>
29.         <td>
30.             <?phpecho $row ->number;?>
31.         </td>
32.         <td>Thou
33.             <?phpecho $row ->sex;?>
34.         </td>
35.         <td>
36.             <?phpecho $row ->address;?>
37.         </td>
38.         <td>
39.             <?phpecho $row ->code;?>
40.         </td>
41.         <td>
42.             <?phpecho $row ->city;?>
43.         </td>
44.         <td>
45.             <?phpecho $row ->country;?>
46.         </td>
47.         <td>
48.             <?phpecho $row ->skills;?>
49.         </td>
50.         <td>
51.             <?phpecho $row ->attach_file;?>
52.         </td>
53.         <td> <a href="listing.php?id =
54.             <?phpecho $row ->id;?> " onclick=" return  ostend( 'Are You Certain' )"> Delete
55.         </a> | <a href="alphabetize.php?id =
56.             <?phpecho $row ->id;?> " onclick=" return  confirm( 'Are Y'all Sure' )">Edit
57.         </a> </td>
58.         <tr>
59.             <? php } ?>

On the same page that is modified.php, at present we will write another group of lawmaking for displaying the information into the table created.

For that, we will write a while status where we will fetch the data from the database until and unless the information is coming.

Here I accept saved the query mysql_fetch_object() into a local variable '$row'.

And then I accept echoed the relative fields data into the respective table entry.

At present this tutorial of insertion of data into the database and showing it in the grade of lists has been successfully completed.

Accept a look at the final result.

Figure:Terminal View

montanoeyess1990.blogspot.com

Source: https://www.c-sharpcorner.com/UploadFile/52bd60/create-an-html-form-and-insert-data-into-database162/

Share this post