i need to create a form with react.js and the following should be included in a
ID: 3701884 • Letter: I
Question
i need to create a form with react.js and the following should be included in a file called App.js:
Develop a ContactList database. Things to do: 1. Create a form to enter a new record 2. Search bar to search for matching records Things to remember: 1. Contact data should contain - ID, Name, Gender, Level of Education, Address, Email, Telephone 2. Form should contain all the fields to enter a new record except ID. ID is generated randomly or a sequential number. 3. Form Validation Validate the form to check that the entered name is not empty and entered email address is in the right format 4. Ensure that you have at least three records when you start the app. 5. The data should be shown in a tabular format. 6. Search bar should search for a substring by ignoring the case of the lettersExplanation / Answer
Database -:
create table user(id number(3) NOT NULL AUTO INCREMENT,name varchar(30),email varchar(30),loedu varchar(20),mobile number(10),gender varchar(10),address varchar(50));
Insert three records-:
insert into user values(1,'John',john@ail.com','MSc',239043489,'Male','New Jersey');
insert into user values(2,'Julia',julia@ail.com','MBA',9933228712,'FeMale','Delhi,India');
insert into user values(3,'Angela',angela12@ail.com','Phd',211348909,'Female','New York');
1.Form to enter a new record .
<html>
<body >
<script src="react.js"> </script>
<center>
<fieldset align="center"><legend><strong>Form</strong></legend>
<table bgcolor="999999" align="center" cellpadding = "10">
<tr> <form name="myform" method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>" >
<tr> <td><strong>Name : </strong> </td><td> <input type="text" name="name" ></td></tr>
<tr> <td><strong>E-mail :</strong> </td><td> <input type="text" name="email"></td></tr>
<tr> <td><strong>Level of Education:</strong> </td><td> <input type="text" name="loedu"></td></tr>
<tr> <td><strong>Telephone:</strong></td><td> <input type="text" name="mobile" ></td></tr>
<tr> <td><strong>Gender:</strong></td><td><select name="gender" required><option value=""></option><option value="Male">Male</option> <option value="Female">Female</option><option value="Other">Other</option></select></td></tr>
<tr> <td><strong>Address:</strong></td><td><textarea name="addr" rows="5" cols="22" ></textarea></td></tr>
<tr> <td><button id = "button" name="submit" type="submit" >Sign Up</button></td><td></td></tr>
</form>
</table>
</fieldset>
</div>
</center>
</body>
</html>
<?php
<?php
$con=mysqli_connect("localhost","root",""); //connection string
$db=mysqli_select_db($con,"student"); //student is database name
if(isset($_POST['name'])&& isset($_POST['email']) isset($_POST['loedu'])&& && isset($_POST['mobile']))&& isset($_POST['gender']) && isset($_POST['addr']))
{
$name = $_POST['name'] ;
$email = $_POST['email'];
$loedu=$_POST['loedu'];
$mobile = $_POST['mobile'] ;
$gender = $_POST['gender'] ;
$address = $_POST['addr'] ;
$q= "SELECT * FROM user WHERE email='$email'";
$result= mysqli_query($con,$q)or die("Query not executed");
$num= mysqli_num_rows($result);
if($num>0)
{
echo "User already exist";
}
else
{
//$q= "SELECT * FROM register WHERE email='$email'";
//$result= mysqli_query($con,$q)or die("Query not executed");
//$num= mysqli_num_rows($result);
//if($num>0)
//{
//echo "Duplicate data <br>";
//}
//else
//{
$qy="insert into user(id,name,email,loedu,mobile,gender,address)values(NULL,'$name','$email','$loedu','$mobile','$gender','$address')";
mysqli_query($con,$qy);
echo "You are registered Successfully";
}
}
?>
react.js file- for validation:
function validate()
{
var x= document.forms["myform"]["name"].value;
var y= document.forms["myform"]["email"].value;
if (x == "")
{
alert("Name Can't be empty");
return false;
}
if(!(/^w+([.-]?w+)*@w+([.-]?w+)*(.w{2,3})+$/).test(y))
{
alert("You have entered an invalid email address!");
return false;
}
}
show data in tabular format-:
<!doctype html>
<html>
<body>
<center><table border='1' width='50%' height='50%' id='empTable' cellpadding='10' bgcolor='9999FF'>
<tr>
<th>Id</th>
<th>Name</th>
<th>Email</th>
<th>Level of Education</th>
<th>Telephone</th>
<th>Gender</th>
<th>Address</th>
</tr>
<?php
$r= "SELECT * FROM user";
$res = mysqli_query($con,$r)or die("Query not executed");
if($res)
{
while( $row = mysqli_fetch_array($res) )
{
//print_r($row);
echo "<tr>";
echo "<td>$row[0]</td><td>$row[1]</td><td>$row[2]</td><td>$row[3]</td><td>$row[4]</td><td>$row[5]</td><td>$row[6]</td>";
echo "</tr>";
}
}
echo "</table>";
</body>
</html>
Related Questions
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.