I want to create an html code that submits a form into a php file with phpMyAdmin, this is the file:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE-edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Add New Patient</title>
<meta name="author" content="Ryufath">
<meta name="description" content="Our Official Restaurant Site">
<link rel="stylesheet" href="home.css">
<style>
/* General styles for the entire page */
html {
background-color: white;
}
/* Header styles */
header {
display: flex;
justify-content: center;
justify-content: flex-end;
color: white;
align-items: center;
text-align: center;
background-color: #14d8a7;
z-index: 1000; /* Ensure the header is on top of other elements */
position: fixed;
font-size: 14px;
padding-top: 35px;
padding-bottom: 35px;
padding-right: 10px;
padding-left: 10px;
margin-right: 20%;
width: 100%;
left: 0;
right: 0;
top: 0;
}
footer {
padding: 10px;
size: 5px;
background-color: #14d8a7;
color: white;
}
/* Navigation styles */
.nav__links {
list-style: none;
margin: 0;
padding: 0;
}
.nav__links li {
display: inline-block;
margin-right: 20px;
position: relative;
}
.nav__links li a {
font-weight: bold;
color: white;
text-decoration: none;
transition: color 0.3s ease;
}
.nav__links li a:hover {
color: #ffff4d;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #4D4D4F;
min-width: 160px;
box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: #ffff4d;
color: black;
}
.nav__links li:hover .dropdown-content {
display: block;
}
.Home {
width: 3%;
height: 3%;
position: fixed;
top: 32px;
left: 6px;
}
/* Form styles */
.form-container {
margin: 100px auto;
width: 60%;
padding: 20px;
border: 1px solid #14d8a7;
border-radius: 8px;
background-color: #f9f9f9;
}
.form-container h2 {
text-align: center;
color: #14d8a7;
}
.form-container label {
display: block;
margin: 10px 0 5px;
color: #333;
}
.form-container input,
.form-container select {
width: 100%;
padding: 10px;
margin-bottom: 20px;
border: 1px solid #ccc;
border-radius: 4px;
}
.form-container .tel-container {
display: flex;
gap: 10px;
}
.form-container .tel-container select {
width: 30%;
}
.form-container .tel-container input {
width: 70%;
}
.form-container button {
display: block;
width: 100%;
padding: 10px;
background-color: #14d8a7;
color: white;
border: none;
border-radius: 4px;
font-size: 16px;
cursor: pointer;
}
.form-container button:hover {
background-color: #0ebd95;
}
</style>
</head>
<body>
<header>
<a href="index.html">
<img class="Home" src="C:UsersASUSDownloads237-2378542_icon-symbol-gui-house-home-start-top-check-removebg-preview.png">
</a>
<nav>
<ul class="nav__links">
<li><a href="AboutUs.html">About Us</a></li>
<li>
<a href="#">Patient Management</a>
<div class="dropdown-content">
<a href="AddNewPatient.html">Add New Patient</a>
<a href="http://localhost/php-projects/Patient.php">Find & Search Patient</a>
</div>
</li>
<li><a href="Appointments.html">Appointments</a></li>
<li><a href="#">Medication Management</a>
<div class="dropdown-content">
<a href="MedicationList.html">Medication List</a>
<a href="AddMedication.html">Add Medication</a>
</div>
</li>
<li><a href="#">Reports</a></li>
<li><a href="#">User Book</a></li>
</ul>
</nav>
</header>
<main>
<div class="form-container">
<h2>Fill in Your Details</h2>
<form action="http://localhost/php-projects/Patient.php" method="post">
<label for="fullname">Full Name</label>
<input type="text" id="fullname" name="fullname" required>
<label for="dob">Date of Birth</label>
<input type="date" id="dob" name="dob" required>
<label for="birthplace">Birth Place</label>
<input type="text" id="birthplace" name="birthplace" required>
<label for="gender">Gender</label>
<select id="gender" name="gender" required>
<option value="male">Male</option>
<option value="female">Female</option>
</select>
<label for="tel">Telephone Number</label>
<div class="tel-container">
<select id="telcode" name="telcode" required>
<option value="+1">+1</option>
<option value="+44">+44</option>
<option value="+61">+61</option>
<option value="+91">+91</option>
<!-- Add more options as needed -->
</select>
<input type="tel" id="tel" name="tel" required>
</div>
<label for="email">Email</label>
<input type="email" id="email" name="email" required>
<button type="submit">Submit</button>
</form>
</div>
</main>
<footer>
<p>All Rights Reserved (c)</p>
</footer>
</body>
</html>
Then, I wrote that php file to display the results from the forms. Note that this can be seen from the XAAMP that I have:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE-edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Mentcare IS - View Patients</title>
<meta name="author" content="Ryufath">
<meta name="description" content="Our Official Patient Management Site">
<link rel="stylesheet" href="home.css">
<style>
/* General styles for the entire page */
html {
background-color: white;
}
/* Header styles */
header {
display: flex;
justify-content: center;
justify-content: flex-end;
color: white;
align-items: center;
text-align: center;
background-color: #14d8a7;
position: fixed;
font-size: 14px;
padding-top: 35px;
padding-bottom: 35px;
padding-right: 10px;
padding-left: 10px;
margin-right: 20%;
width: 100%;
left: 0;
right: 0;
top: 0;
}
footer {
padding: 10px;
background-color: #14d8a7;
color: white;
position: fixed;
bottom: 0;
width: 100%;
text-align: center;
}
/* Navigation styles */
.nav__links {
list-style: none;
margin: 0;
padding: 0;
}
.nav__links li {
display: inline-block;
margin-right: 20px;
position: relative; /* Needed for the dropdown */
}
.nav__links li a {
font-weight: bold;
color: white; /* Header text color*/
text-decoration: none;
transition: color 0.3s ease;
}
.nav__links li a:hover {
color: #ffff4d;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #4D4D4F;
min-width: 160px;
box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: #ffff4d;
color: black;
}
.nav__links li:hover .dropdown-content {
display: block;
}
.Home {
width: 4%;
height: 4%;
position: fixed;
top: 32px;
left: 15px;
}
/* Table styles */
table {
width: 100%;
border-collapse: collapse;
margin: 80px 0 20px;
}
table, th, td {
border: 1px solid #ddd;
text-align: left;
}
th, td {
padding: 12px;
}
th {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<header>
<a href="index.html">
<img class="Home" src="C:UsersASUSDownloads237-2378542_icon-symbol-gui-house-home-start-top-check-removebg-preview.png">
</a>
<nav>
<ul class="nav__links">
<li><a href="AboutUs.html">About Us</a></li>
<li>
<a href="#">Patient Management</a>
<div class="dropdown-content">
<a href="AddNewPatient.html">Add New Patient</a>
<a href="Patients.php">Find & Search Patient</a>
</div>
</li>
<li><a href="Appointments.html">Appointments</a></li> <!-- It will lead directly to calendar-->
<li><a href="#">Medication Management</a>
<div class="dropdown-content">
<a href="MedicationList.html">Medication List</a>
<a href="AddMedication.html">Add Medication</a>
</div>
</li>
<li><a href="#">Reports</a></li>
<li><a href="#">User Book</a></li>
</ul>
</nav>
</header>
<main>
<table>
<tr>
<th>Patient ID</th>
<th>Full Name</th>
<th>Date of Birth</th>
<th>Birth Place</th>
<th>Gender</th>
<th>Telephone</th>
<th>Email</th>
</tr>
<?php
// Database connection details
$servername = "localhost";
$username = "root";
$password = "pass";
$dbname = "MentcareDB";
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
// Fetch data from the 'patients' table
$sql = "SELECT * FROM patients";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
// Output data of each row
while($row = $result->fetch_assoc()) {
echo "<tr>
<td>" . $row["patient_id"] . "</td>
<td>" . $row["full_name"] . "</td>
<td>" . $row["date_of_birth"] . "</td>
<td>" . $row["birth_place"] . "</td>
<td>" . $row["gender"] . "</td>
<td>" . $row["telephone_code"] . " " . $row["telephone_number"] . "</td>
<td>" . $row["email"] . "</td>
</tr>";
}
} else {
echo "<tr><td colspan='7'>No records found</td></tr>";
}
// Close connection
$conn->close();
?>
</table>
</main>
<footer>
<p>All Rights Reserved (c)</p>
</footer>
</body>
</html>
For some reason, it keeps showing Warning: Undefined array key “fullname” in C:xampphtdocsphp-projectsPatient.php on line 20 and all that.
Please help me fix it
For some reason, it keeps showing Warning: Undefined array key “fullname” in C:xampphtdocsphp-projectsPatient.php on line 20 and all that.
Please help me fix it
ryu_0210 is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.