EGVN 601 Assignment 1 - Solution

Nepal Open University
Faculty of Science, Health and Technology

Master in e-Governance (3rd Semester)
Course Code: EGVN601 Course Title: Web Technology

Roll No.: 77241093 Name: Arun Kumar Chhetri
Assignment – I
1. Project Work
Create a simple web application with at least one form to enter data. The data entered from the form
should be stored in the database. The application should also display data from the database. Use your
own concept to implement the application.
Report Contents:
 Title
 Introduction
 Code Pieces
 Screenshot
 Conclusion
 References/Bibliography
Answer:
Title: Simple Web Application with Contact Form Data Entry into Database & Display Record.
Introduction:
In this project, I have creating a simple web application that will allow end-users to enter contact details data
using a form. The data entered by the end-users will be stored in a MySQL database, and the application will
retrieve inserted data using PHP script to display the data in the webpage. Here I am using HTML, CSS and
PHP to create the application. For the database, I am using MySQL.
Code Pieces:
1) Creating the HTML Form webpage name “contactform.php”
I have created an HTML form that will allow the user to enter data. I am used the "POST" method to
send the data to the server. Below listed is the code for the form:
<?php
include("config.php");
$result=mysqli_query($conn,"select *from contactinfo order by id ASC");
?>
<!DOCTYPE html>
<html>
1
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Simple Contact Form</title>
</head>
<body>
<div class="container">
<form method="POST" action="process.php">
<div class="title">
Contact Details Form
</div>
<div class="Form">
<div class="input_field">
<label>Name</label>
<input type="text" class="input" name="nm">
</div>
<label>Age</label>
<input type="text" class="input" name="ag">
</div>
<label>Address</label>
<textarea class="textarea" name="ad"></textarea>
</div>
<label>Email</label>
<input type="text" class="input" name="em">
</div>
<label>Mobileno.</label>
<input type="text" class="input" name="mb">
</div>
<label>Gender</label>
<input type="text" class="input" name="gd">
</div>
<label>City</label>
<input type="text" class="input" name="ct">
</div>
<input type="submit" value="Register" class="btn" name="sb">
</div>
</div>
</from>
<table border="2">
<tr>
<th>S.No.</th>
<th>Name</th>
<th>Age</th>
2
<th>Address</th>
<th>Email</th>
<th>Mobile No.</th>
<th>Gender</th>
<th>City</th>
</tr>
<?php
while ($res=mysqli_fetch_array($result)) {
echo '<tr>';
echo '<td>'.$res['id'].'</td>';
echo '<td>'.$res['Name'].'</td>';
echo '<td>'.$res['age'].'</td>';
echo '<td>'.$res['address'].'</td>';
echo '<td>'.$res['email'].'</td>';
echo '<td>'.$res['mobileno'].'</td>';
echo '<td>'.$res['gender'].'</td>';
echo '<td>'.$res['city'].'</td>';
echo '</tr>';
}
?>
</table>
</div>
</body>
</html>
2) Create database connection PHP Script to “Config.php”. Below is the code for the Database
Connection:
<?php
//Connect to database
$conn = mysqli_connect("localhost", "root", "root", "simpleweb");
?>
3) Creating the PHP Script to “Process.php” to insert Form Data
Next, I have created a PHP script that will receive the Contact form data and store it in the database
table “contactinfo”. Below is the code for the script:
<?php
include("config.php");
//Check connection
if (!$conn) {
die("Connection failed: " . mysqli_connect_error());
}
//Retrieve data from form

if($_POST['sb'])
{
$name = $_POST['nm'];
$age = $_POST['ag'];
$add = $_POST['ad'];
$email = $_POST['em'];
$mobile = $_POST['mb'];
$gender = $_POST['gd'];
$city = $_POST['ct'];
}
3
//Insert data into database
$sql = "INSERT INTO contactinfo (Name,age,address,email,mobileno,gender,city)
VALUES ('$name','$age','$add','$email','$mobile','$gender','$city')";
if (mysqli_query($conn, $sql))
{
//echo "Data inserted successfully";
header("location:contactform.php");
}
else
{
echo "Error: " . $sql . "<br>" . mysqli_error($conn);
}
//Close connection
mysqli_close($conn);
?>
4) Displaying Data from the Database. Similarly, I have created a PHP script within “contactform.php”
that will display the data from the database. Below is the code for the script:
<?php
while ($res=mysqli_fetch_array($result)) {
echo '<tr>';
echo '<td>'.$res['id'].'</td>';
echo '<td>'.$res['Name'].'</td>';
echo '<td>'.$res['age'].'</td>';
echo '<td>'.$res['address'].'</td>';
echo '<td>'.$res['email'].'</td>';
echo '<td>'.$res['mobileno'].'</td>';
echo '<td>'.$res['gender'].'</td>';
echo '<td>'.$res['city'].'</td>';
echo '</tr>';
}
?>
5) CSS script for Form Design for Contact Details.in “contactform.php” that will display the data from
the database. Below is the code for the css script:
*
{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body
{
background-color: #ab0a2d;
padding: 0 10px;
.container
{
4
border: 2px solid black;
width: 70%;
background-color:white ;
box-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}
.container .title
{
font-size: 24px;
font-weight: 700;
margin: 20px;
color: #ab0a2d;
text-transform: uppercase;
text-align: left;
}
.container .Form .input_field

{
margin-bottom: 5px;
display: flex;
align-items: right;
}
.container .Form .input_field label
{
width: 60px;
margin-right:10px;
font-size: 15px;
}
.container .Form .input_field .input,
.container .Form .input_field .textarea
{
width: 50%;
outline: none;
border: 1px solid #ab0a2d;
font-size: 12px;
padding: 8px 10px;
border-radius: 3px;
transition: all 0.5s ease;
}
.container .Form .input_field .textarea
{
resize: none;
height: 30px;
}
.container .Form .input_field .btn
{
width: 40%;
padding: 6px 10px;
font-size: 15px;
border: 5;
background: #ab0a2d;
cursor: pointer;
border-radius: 3px;
outline: none;
text-align: center;
}
5
.container .Form .input_field .btn:hover
{
background:purple;
}
@media (max-width:400px)
{
.container .Form .input_field
{
flex-direction: coloum;
align-items: flex-start;
}
.container .Form .input_field label
{
margin-bottom: 5px;
}
}
Screenshot:
Fig.1. Web Application Screenshot
Conclusion:
In this project, I have created a simple web application that allows end-users to enter data using a contact form,
which is then stored in a MySQL database. I have also created a script that displays the data from the database.
This is just a basic practice, but this same concept can be used to create more complex web applications with
more advanced features.
References/Bibliography:
 https://www.w3schools.com/php/php_ref_overview.asp
 https://www3.ntu.edu.sg/home/ehchua/programming/howto/References.html#zz-2
 https://elearning.nou.edu.np/course/view.php?id=1688
The End
6
7

EGVN 601 Assignment 1 - Solution

Uploaded by

Copyright:

Available Formats

You might also like

EGVN 601 Assignment 1 - Solution

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

EGVN 601 Assignment 1 - Solution

Uploaded by

Copyright:

Available Formats

Nepal Open University

Faculty of Science, Health and Technology

Course Code: EGVN601 Course Title: Web Technology

//Retrieve data from form

.container .Form .input_field

Fig.1. Web Application Screenshot

You might also like