Webdevelopmentexercise

BIT21503 – WEB DEVELOPMENT
LAB ACTIVITY 7
LECTURER :
DR. NUR ARIFFIN BIN MOHD ZIN
SECTION :
1
STUDENT NAME :
AMIRY SYAFY BIN MOHAMMAD AZHAR
MATRIC NUMBER :
AI210085
Faculty of Computer Science and Information Technology
BIT21503 Web Development
Lab #7:
SERVER-SIDE SCRIPTING (PHP) - FORM
Topic Web page development using PHP
Domain of Psychomotor (P2: Set; P3: Guided Respond; P4: Mechanism)

Learning
Learning objective 1. To evaluate the response in order to solve the problem as required.
(P2)
2. To evaluate the skill of how the web page is developed whereas using
the code/tags correctly. (P3)
3. To evaluate the value added of creativity/knowledge/skill in web
page development. (P4)
Lab activity To use the combination of HTML tags and PHP scripting properly based
objective on the suitable requirement of a case study.
Instruction: Answer all questions. Write your answer and screenshot the output in Microsoft
Word. Submit through Author in PDF format.
1. Create a PHP file containing a form as shown in the figure below.
The code for the UI can be downloaded here https://bbbootstrap.com/snippets/simple-

contact-form-74408136# The credentials must be stored in a database (using PHP script
and PhpMyAdmin). Add a JavaScript alert to indicate the credentials have been
successfully stored.
1
Note:
1. Your table should have an ID column as a primary key (AUTO INCREMENT).
2. Add Bootstrap CDN as instructed here https://getbootstrap.com/docs/5.3/getting-
started/introduction/#separate (READ INSTRUCTION NO 2 IN THE LINK
GIVEN)
Source Code :
Main.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bootstrap Contact Form</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
rel="stylesheet" integrity="sha384-
9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM"
crossorigin="anonymous">
<link
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
rel="stylesheet">
<link
href="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.bundle.min.js
" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"
rel="sylesheet">
<body>
<?php include 'connectdb.php'; ?>
<div class="container">]
<div class=" text-center mt-5 ">
<h1>Bootstrap Contact Form</h1>

<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"
integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz"
crossorigin="anonymous"></script>
</div>
<div class="row ">

2
<div class="col-lg-7 mx-auto">

<div class="card mt-2 mx-auto p-4 bg-light">
<div class="card-body bg-light">
<div class="container">
<form id="contact-form" role="form" action="submit.php"
method="POST">
<div class="controls">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="form_name">Firstname
*</label>
<input id="form_name" type="text"
name="name" class="form-control" placeholder="Please enter your firstname *"
required="required" data-error="Firstname is required.">
</div>
</div>
<label for="form_lastname">Lastname
*</label>
<input id="form_lastname"
type="text" name="surname" class="form-control" placeholder="Please enter your
lastname *" required="required" data-error="Lastname is required.">
</div>
</div>
</div>
<div class="row">
<label for="form_email">Email
*</label>
<input id="form_email" type="email"
name="email" class="form-control" placeholder="Please enter your email *"
required="required" data-error="Valid email is required.">
</div>
</div>
3
<label for="form_need">Please
specify your need *</label>
<select id="form_need" name="need"
class="form-control" required="required" data-error="Please specify your need.">
<option value="" selected
disabled>--Select Your Issue--</option>
<option>Request Invoice for
order</option>
<option>Request order
status</option>
<option>Haven't received
cashback yet</option>
<option>Other</option>
</select>
</div>
</div>
</div>
<div class="row">
<label for="form_message">Message
*</label>
<textarea id="form_message"
name="message" class="form-control" placeholder="Write your message here." rows="4"
required="required" data-error="Please, leave us a message."></textarea>
</div>
</div>
<input type="submit" class="btn btn-

success btn-send pt-2 btn-block
" value="Send Message">
</div>
</div>
</div>
</form>
</div>
4
</div>
</div>

</div>

</div>
</div>
</body>
</html>
createdb.php
<?php
// Database credentials
$servername = "localhost";
$username = "root";
$password = "";
// Create a connection
$conn = new mysqli($servername, $username, $password);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
// Create the database

$sql = "CREATE DATABASE IF NOT EXISTS contact";
if ($conn->query($sql) === TRUE) {
echo "Database created successfully.<br>";
} else {
echo "Error creating database: " . $conn->error;
}
// Select the database

$conn->select_db("contact");
// Create the table

$sql = "CREATE TABLE IF NOT EXISTS credentials (
id INT(11) AUTO_INCREMENT PRIMARY KEY,
first_name VARCHAR(100) NOT NULL,
5
last_name VARCHAR(100) NOT NULL,

email_address VARCHAR(100) NOT NULL,
need VARCHAR(100) NOT NULL,
message TEXT NOT NULL
)";
if ($conn->query($sql) === TRUE) {
echo "Table created successfully.";
} else {
echo "Error creating table: " . $conn->error;
}
// Close the connection

$conn->close();
?>
connectdb.php

<?php
$host = "localhost";
$dbusername = "root";
$dbpassword = "";
$dbname = "lab7"; //tukar ikut nama database sendiri
$conn = new mysqli ($host, $dbusername, $dbpassword, $dbname);
if (!$conn) {
echo "Connection failed!";
}
?>
submit.php
<?php
include 'connectdb.php';
// Check if the form is submitted

if ($_SERVER["REQUEST_METHOD"] == "POST") {
// Retrieve the form data
$first_name = $_POST['name'];
$last_name = $_POST['surname'];
$email = $_POST['email'];
6
$need = $_POST['need'];
$message = $_POST['message'];
// Prepare and execute the SQL statement to insert the data into the database
$stmt = $conn->prepare("INSERT INTO lab7db (name, surname, email, need,
message) VALUES (?, ?, ?, ?, ?)");
$stmt->bind_param("sssss", $first_name, $last_name, $email, $need, $message);
if ($stmt->execute()) {
// Data inserted successfully
echo "Data inserted into the database.";
} else {
// Error occurred while inserting data
echo "Error: " . $stmt->error;
}
// Close the statement and database connection

$stmt->close();
$conn->close();
}
?>
Output :
7

Webdevelopmentexercise

Uploaded by

Document Information

Original Description:

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

Webdevelopmentexercise

Uploaded by

Copyright:

Available Formats

BIT21503 – WEB DEVELOPMENT

Topic Web page development using PHP

Domain of Psychomotor (P2: Set; P3: Guided Respond; P4: Mechanism)

1. Create a PHP file containing a form as shown in the figure below.

The code for the UI can be downloaded here https://bbbootstrap.com/snippets/simple-

<h1>Bootstrap Contact Form</h1>

<div class="row ">

<div class="col-lg-7 mx-auto">

<input type="submit" class="btn btn-

// Create the database

// Select the database

// Create the table

last_name VARCHAR(100) NOT NULL,

// Close the connection

$conn = new mysqli ($host, $dbusername, $dbpassword, $dbname);

// Check if the form is submitted

// Close the statement and database connection

You might also like