You are required to create a small Web site. You have to choose the project idea
ID: 3740320 • Letter: Y
Question
You are required to create a small Web site. You have to choose the project idea and work in it as individual or with a group. You have to use blogs tool in blackboard to announce the progress on your project.
The website must cover all aspects in the course (HTML, CSS, JavaScript, PHP, DB).
HTML
HTML Web elements (list, table, form …)
1.5
Navigation (Links are clear and located in the same area on each page. All links are functional)
CSS
Design (using CSS) Website clearly demonstrates design principles: with consistent alignment, proximity, repetition, and contrast…
1
JavaScript
Form validation
0.5
PHP + DB
Dynamic Web pages (PHP
4
Communication with DB(select)
Communication with DB(Update)
Blogs
Using blogs every week to announce the progress on the project
1
Total
8
The number of students /project: 2 (3 only for exception).
The number of Web pages must be at least 5.
The number of dynamic Web pages must be at least 3.
The Web Site must connect to a database (1 select+ 1 Update queries)
For form validation, there must be one popup message that appears after the submit button has been clicked. The message must contain a list of all validation errors on the Web page.
Each student have to prepare
IT230_Project.docx:
The student must use the same file (IT230_Project.docx) to prepare his answer.
For each part of the project (HTML. CSS, JS and PHP + DB) the student must copy and paste his code and add a screenshot of the output with a brief explication of each functionality of the web application.
For the use of blogs: the student must add some screenshots from Blackboard.
Project.zip: contains all the files of the project (html, css, JS, php, sql,).
HTML
HTML Web elements (list, table, form …)
1.5
Navigation (Links are clear and located in the same area on each page. All links are functional)
CSS
Design (using CSS) Website clearly demonstrates design principles: with consistent alignment, proximity, repetition, and contrast…
1
JavaScript
Form validation
0.5
PHP + DB
Dynamic Web pages (PHP
4
Communication with DB(select)
Communication with DB(Update)
Blogs
Using blogs every week to announce the progress on the project
1
Total
8
Explanation / Answer
//index.php
<!DOCTYPE html>
<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style>
#loading-img{
display:none;
}
.response_msg{
margin-top:10px;
font-size:13px;
background:#E5D669;
color:#ffffff;
width:250px;
padding:3px;
display:none;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-8">
<h1>CONTACT FORM USING HTML CSS PHP MYSQL</h1>
<form name="contacts-form1" action="" method="post" id="contacts-form1">
<div class="form-group">
<label for="Name">Name</label>
<input type="text" class="form-control" name="yoursname" placeholder="Name" required>
</div>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" name="yoursemail" placeholder="Email" required>
</div>
<div class="form-group">
<label for="Phone">Phone</label>
<input type="text" class="form-control" name="yoursphone" placeholder="Phone" required>
</div>
<div class="form-group">
<label for="comments">Comments</label>
<textarea name="comments" class="form-control" rows="3" cols="28" rows="5" placeholder="Comments"></textarea>
</div>
<button type="submit" class="btn btn-primary" name="submit" value="Submit" id="submit_form">Submit</button>
<img src="img/loading.gif" id="loading-img">
</form>
<div class="response_msg"></div>
<div>
<p>----------------------------------------------------------------</p>
<p>An ordered list:</p>
<ol>
<li><a href="table.html">Click for table page</a></li>
<li><a href="table.html">Click for table page</a></li>
<li><a href="table.html">Click for table page</a></li>
</ol>
<p>An unordered list:</p>
<ul>
<li><a href="table.html">Click for table page</a></li>
<li><a href="table.html">Click for table page</a></li>
<li><a href="table.html">Click for table page</a></li>
</ul>
</div>
</div>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#contacts-form1").on("submit",function(e){
e.preventDefault();
if($("#contacts-form1 [name='yoursname']").val() === '')
{
$("#contacts-form1 [name='yoursname']").css("border","1px solid red");
}
else if ($("#contacts-form1 [name='yoursemail']").val() === '')
{
$("#contacts-form1 [name='yoursemail']").css("border","1px solid red");
}
else
{
$("#loading-img").css("display","block");
var sendData = $( this ).serialize();
$.ajax({
type: "POST",
url: "get_output.php",
data: sendData,
success: function(data){
$("#loading-img").css("display","none");
$(".response_msg").text(data);
$(".response_msg").slideDown().fadeOut(3000);
$("#contacts-form1").find("input[type=text], input[type=email], textarea").val("");
}
});
}
});
$("#contacts-form1 input").blur(function(){
var checkValue = $(this).val();
if(checkValue != '')
{
$(this).css("border","1px solid #eeeeee");
}
});
});
</script>
</body>
</html>
//config.php
<?php
$host = "localhost";
$userName = "fyrhp";
$password = "RTDE";
$dbName = "fyrhp";
// Create database connection
$conn = new mysqli($host, $userName, $password, $dbName);
// Check connection
if ($conn->connect_error) {
die("Connection fail: " . $conn->connect_error);
}
?>
//get_output.php
<?php
require_once("config.php");
if((isset($_POST['yoursname'])&& $_POST['yoursname'] !='') && (isset($_POST['yoursemail'])&& $_POST['yoursemail'] !=''))
{
require_once("contact_mail.php<strong>");
</strong>
$yourName = $conn->real_escape_string($_POST['yoursname']);
$yourEmail = $conn->real_escape_string($_POST['yoursemail']);
$yourPhone = $conn->real_escape_string($_POST['yoursphone']);
$comments = $conn->real_escape_string($_POST['comments']);
$sql="INSERT INTO contact_form_info (name, email, phone, comments) VALUES ('".$yourName."','".$yourEmail."', '".$yourPhone."', '".$comments."')";
if(!$result = $conn->query($sql)){
die('There was an error running the query [' . $conn->error . ']');
}
else
{
echo "ThanQ for filling form ,we wil contact very soon";
}
}
else
{
echo "Please fill Your Name and Your Email";
}
?>
//table.html
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}
</style>
</head>
<body>
<h2>Tabe Name</h2>
<p>Table caption.</p>
<table>
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>Jan</td>
<td>$200</td>
</tr>
<tr>
<td>Feb</td>
<td>$30</td>
</tr>
</table>
</body>
</html>
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.