The world has gotten to the point where web developers can’t really do much without back-end development. No matter the kind of website you’re building, you must deal with database, so in this very article, we’ll be talking about writing some php script to enable us send users information into php mysqli database.
We’ll first
build html form that will help hold the information that will be send to the
database, secondly, we’ll write some line php codes to trigger the action when
a user click the send button on the html form.
I believe
you already know much about how to create html form. Anyways, even though
you’re very good at it, we will still make it available to make balance
understanding for both new and old developers.
First we
will make the HTML form with two input fields, one to hold user’s email and the
second one is for user’s mobile number. Then we’ll use CSS to style the form a
bit and we move over to php for the action script.
HTML form
example;
<!DOCTYPE
html>
<html
lang="en">
<head>
<meta
http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Sign In</title>
<style
type="text/css">
</style>
</head>
<body>
<form method="POST"
class="signup-form-class">
<label>email</label><br
/>
<input
type="text" name="email" placeholder="enter email"
class="input-style"/><br /><br />
<label>Enter
Phone number</label><br />
<input
type="text" name="number" placeholder="enter phone
number" class="input-style"/><br /><br />
<input
type="submit" name="submit" value="send"
class="submit-style"/><br /><br />
</form>
</body>
</html>
This file
should be saving as form.html. The second step from here is to create another
file call style.css.
Note: the
style.css file should contain the styles for the form and will be linked to the
form.html file for the style effective on the form.
Style.css
file example;
.input-style
{
width:25%;
height:20px;
color:black;
font-size:15px;
}
.submit-style
{
width:10%;
height:45px;
color:white;
font-size:25px;
border-style:none;
background-color:skyblue;
}
Now that we
have our style.css file, it is time to link it with the form.html file. In
between the header open and closing tag (<head> </head>), write the
single line of code.
Style.css
file linking example;
<head>
<link rel=”stylesheet”
href=”style.css”>
</head>
We’ve
finally landed on the php aspect. First is to create a table inside our
database. The table is what stores the information the users will send across.
Php mysqli
table create script example;
CREATE TABLE
users_table(
ID int
PRIMARY KEY,
Email
varchar(250) NOT NULL,
Number
varchar (250) NOT NULL
);
You need to
keep record of every information about the table we’ll make use of them when
writing the php script to trigger the action we want.
1. The table name is “users_table”.
2. Each user information has auto
assigned ID.
3. Email column that not be empty.
4. Number column that will not be empty.
Now we know
the key things to work, it is time for the action script file and we’ll name it
send.php.
Send.php
file script example;
<?php
//start session
session_start();
//database connection
$mydb = new mysqli("localhost",
"root", "", example");
//Store empty form data variables
$email = $_POST['email'];
$number = $_POST['number'];
/* Select all in user
table where the user
email and password is
equal to form variables */
$su = $mydb->prepare("INSERT
INTO users_table (email,number) VALUES(?,?)");
$su->bind_param('ss', $email,
$number);
$su->execute();
?>
We fetched
the two values from the HTML form and stored them inside a variable called
$email and $number, then we send to the table according to the columns in the
table.
But before
we start writing the script, we first start a session, and then connect the
script to the database. We named our database “example” and username is root,
localhost and empty password because we’re running XAMPP in our system without
taking it to the internet.
The last thing
now is to assign the send.php to the HTML form using action attribute.
Linking
send.php file to HTML form example;
<form
action="send.php" method="POST"
class="signup-form-class">
Hope you now
understand everything about allowing users to send information into the
database.
Happy
learning!

0 Comments