WBP Micro Project
WBP Micro Project
WBP Micro Project
Academic year
2021-22
Address Book
Course: Web based Application Development using PHP Course code: 22619
MAHARASHTRA STATE BOARD OF TECHNICAL EDUCATION
Certificate
This is to certify that Mr. /Ms. Pranav Mhatre Roll No. 31 of Sixth Semester of Diploma in
Computer Engineering of Institute, VES POLYTECHNIC (Code: 0004) has completed the
Micro Project satisfactorily in Subject – Web based Application Development using PHP
(22619) for the academic year 2021- 2022 as prescribed in the curriculum.
Seal of
Institution
INDEX
1 Project Proposal 01
2 Action plan 02
3 Resource required 02
4 Introduction 03
5 Actual Procedure 05
6 Output 12
7 Skill developed 16
8 Evaluation sheet 18
Annexure – I
Micro-Project Proposal
Address Book
2 XAMPP, VS CODE -
2
Annexure – II
Micro-Project Report
Address Book
1.0 Rationale
PHP is a server-side scripting language that is embedded in HTML. It is used to manage dynamic
content, databases, session tracking, even build entire data management sites. It is integrated with a
number of popular databases, including MySQL, PostgreSQL, Oracle, Sybase, Informix, and
Microsoft SQL Server. A server-side dynamic web page is a web page whose construction is
controlled by an application server processing server-side script in the back end. A dynamic web
page is a web page that displays different content each time it is viewed while retaining the same
layout and design. To understand and implement PHP for practical purposes, we chose Employee
Record Management System website using PHP as our project.
Address book software enables you to save contact information secure in one place. Various address
book systems store data in multiple formats. Maintaining contact records in one place indicates that
you will always have access to reliable data and be able to share it over your business areas.
2.0 Aim/Benefits of the Micro-Project
This Micro-Project aims at
● To develop a website that maintains names, addresses and other contact information of the
users.
● To develop a user-friendly interface to maintain the records.
● Allows easy access to the user's friends, family, business associates and others by
maintaining their email and other contact details on their computer.
Flowchart
5
Code
index.php:
<?php <a href="#!" class="brand-logo
require('./includes/functions.inc.php'); center">Contact Info</a>
?> <ul class="right hide-on-med-
<!DOCTYPE html> and-down">
<html>
<!-- Dropdown Trigger -->
<head> <li><a class="dropdown-
<!--Import Google Icon Font--> trigger" href="#!" data-
<link target="dropdown1"><i
href="https://fonts.googleapis.com/icon? class="material-icons
family=Material+Icons" rel="stylesheet"> right">more_vert</i></a></li>
<!--Import materialize.css--> </ul>
<link type="text/css" rel="stylesheet" </div>
href="css/materialize.min.css" </nav>
media="screen,projection" /> <a href="#" data-target="nav-mobile"
class="sidenav-trigger"><i class="material-
<!--Import Csutom CSS--> icons">menu</i></a>
<link rel="stylesheet" href="css/style.css" </div>
type="text/css"> </nav>
<!--Let browser know website is optimized <!--/NAVIGATION BAR-->
for mobile-->
<meta name="viewport" <!-- Add a New Contact Link-->
content="width=device-width, initial- <div class="row mt50">
scale=1.0" /> <div class="col s12 right-align">
</head> <a class="btn waves-effect waves-light
blue lighten-2" href="add-contact.php"><i
<body> class="material-icons
<!--NAVIGATION BAR--> left">add</i> Add
<nav> New</a>
<div class="nav-wrapper"> </div>
<!-- Dropdown Structure --> </div>
<ul id="dropdown1" <!-- /Add a New Contact Link-->
class="dropdown-content">
<li><a href="#!">Profile</a></li> <!-- Table of Contacts -->
<li><a href="#!">Signout</a></li> <div class="row">
</ul> <div class="col s12">
<nav> <table class="highlight centered">
<div class="nav-wrapper"> <thead>
<tr> $rows = db_select($query);
<th>Image</th> if($rows !== false):
<th>Name</th> foreach($rows as $row):
<th>Email ID</th> ?>
<th>Date Of Birth</th> <tr>
<th>Phone Number</th> <td><img class="circle"
<th>Address</th> src="images/users/<?=$row['image_name']; ?
<th></th> >" alt="" height="60%"></td>
<th></th> <td><?
</tr> =$row['first_name']. " ". $row['last_name']; ?
</thead> ></td>
<td><?=$row['email']; ?
<tbody> ></td>
<?php <td><?
=$row['birthdate']; ?></td>
$page = 1; <td><?=$row['telephone'];
if(isset($_GET['page'])) { ?></td>
$page = $_GET['page']; <td><?=$row['address']; ?
} ></td>
<?php
$num_of_records_per_page = 5; // dd($row['id']);
$start = ($page-1) * ?>
$num_of_records_per_page; <td><a class="btn btn-
floating green lighten-2" href="update.php?
$query = "SELECT count(*) as id=<?=$row['id'];?>"><i class="material-
total_records FROM contacts"; icons">edit</i></a></td>
$rows = db_select($query); <td><a class="btn btn-
$total_records = $rows[0] floating red lighten-2 modal-trigger delete-
['total_records']; contact" href="#deleteModal" data-id="<?=
$total_pages = $row['id']; ?>"><i class="material-
ceil($total_records/$num_of_records_per_pag icons">delete_forever</i></a>
e); </td>
</tr>
$prev_page_num = $page == 1 ? <?php
$page : $page-1; endforeach;
$next_page_num = $page == endif;
$total_pages ? $total_pages : $page + 1; ?>
</tbody>
$query = "SELECT * FROM </table>
contacts LIMIT $start, </div>
$num_of_records_per_page";
</div> </div>
<!-- /Table of Contacts --> </footer>
<!-- Pagination --> <!-- /Footer -->
<div class="row"> <!-- Delete Modal Structure -->
<div class="col s12"> <div id="deleteModal" class="modal">
<ul class="pagination"> <div class="modal-content">
<li class="<?= $page == 1 ? <h4>Delete Contact?</h4>
'disabled' : 'waves-effect'; ?>"><a href="? <p>Are you sure you want to delete
page=<?=$prev_page_num;?>"><i the record?</p>
class="material-icons">chevron_left</i></a> </div>
</li> <div class="modal-footer">
<?php <a href="#!" class="modal-close btn
for($i = 1; $i <= $total_pages; $i+ blue-grey lighten-2 waves-effect">Cancel</a>
+): <a href="delete.php"
?> id="deleteModalAgreeButton" class="modal-
<li class="<?= $i==$page ? close btn waves-effect red lighten-
'active' : 'waves-effect';?>"><a href="? 2">Agree</a>
page=<?=$i;?>"><?= $i; ?></a></li> </div>
<?php </div>
endfor; <!-- /Delete Modal Structure -->
?> <!--JQuery Library-->
<li class="<?= $page == <script src="js/jquery.min.js"
$total_pages ? 'disabled' : 'waves-effect'; ? type="text/javascript"></script>
>"><a href="?page=<?=$next_page_num;? <!--JavaScript at end of body for optimized
>"><i class="material- loading-->
icons">chevron_right</i></a></li> <script type="text/javascript"
</ul> src="js/materialize.min.js"></script>
</div> <!--Include Page Level Scripts-->
</div> <script src="js/pages/home.js"></script>
<!-- /Pagination --> <!--Custom JS-->
<!-- Footer --> <script src="js/custom.js"
<footer class="page-footer p0"> type="text/javascript"></script>
<div class="footer-copyright ">
<div class="container"> </body>
<p class="center-align">CO6IA- 8
Group11</p> </html>
</div>
<?php
add-contact.php require_once('./includes/functions.inc.php');
$error_flag = false; if(! $result) {
$error_flag = true;
if(isset($_POST['action'])) { $error_msg = "Something went
$first_name = $_POST['first_name']; wrong with Database!";
$last_name = $_POST['last_name']; } else {
$email = $_POST['email']; $last_id = db_last_id();
$image_name = "$last_id.
$birthdate = $image_name";
myDate($_POST['birthdate']); $source = $_FILES['pic']
['tmp_name'];
$telephone = $_POST['telephone']; $destination =
$address = $_POST['address']; "./images/users/$image_name";
move_uploaded_file($source,
$image_name = ""; $destination);
// File Handling // header('Location: index.php?
if($_FILES['pic']) { op=add&status=success');
$file_name = $_FILES['pic']['name']; redirect("index.php?
op=add&status=success");
// Extracting the extension }
$data = explode('.', $file_name); }
$ext = strtolower(end($data)); }
?>
$image_name = "$ext"; <!DOCTYPE html>
<html>
} else {
$error_flag = true; <head>
$error_msg = "Image is Compulsory"; <!--Import Google Icon Font-->
} <link
href="https://fonts.googleapis.com/icon?
if(! $error_flag) { family=Material+Icons" rel="stylesheet">
// $image_name = $first_name . "_" . <!--Import materialize.css-->
$last_name . "./jpg"; <link type="text/css" rel="stylesheet"
$query = "INSERT INTO contacts href="css/materialize.min.css"
(first_name, last_name, email, birthdate, media="screen,projection" />
telephone, address, image_name) VALUES
('$first_name', '$last_name' ,'$email', <!--Import Csutom CSS-->
'$birthdate', '$telephone', '$address', <link rel="stylesheet" href="css/style.css"
'$image_name')"; type="text/css">
<!--Let browser know website is optimized
$result = db_query($query); for mobile-->
<meta name="viewport" <div class="row mt50">
content="width=device-width, initial- <h2>Add New Contact</h2>
scale=1.0" /> </div>
<?php
<title>Add Contact</title> if($error_flag):
</head> ?>
<div class="row">
<body> <div class="materialert error">
<!--NAVIGATION BAR--> <div class="material-
<nav> icons">error_outline</div>
<div class="nav-wrapper"> <?= $error_msg; ?>
<!-- Dropdown Structure --> <button type="button"
<ul id="dropdown1" class="close-alert">×</button>
class="dropdown-content"> </div>
<li><a href="#!">Profile</a></li> </div>
<li><a href="#!">Signout</a></li> <?php
</ul> endif;
<nav> ?>
<div class="nav-wrapper"> <div class="row">
<a href="#!" class="brand-logo <form class="col s12 formValidate"
center">Contact Info</a> action="" id="add-contact-form"
<ul class="right hide-on-med- method="POST" enctype="multipart/form-
and-down"> data">
<div class="row mb10">
<!-- Dropdown Trigger --> <div class="input-field col s6">
<li><a class="dropdown- <input id="first_name"
trigger" href="#!" data- name="first_name" type="text"
target="dropdown1"><i class="validate" data-
class="material-icons error=".first_name_error" value="<?=
right">more_vert</i></a></li> getOldValue($_POST, 'first_name'); ?>">
</ul> <label for="first_name">First
</div> Name</label>
</nav> <div class="first_name_error
<a href="#" data-target="nav-mobile" "></div>
class="sidenav-trigger"><i class="material- </div>
icons">menu</i></a> <div class="input-field col s6">
</div>
</nav>
<!--/NAVIGATION BAR-->
<div class="container">
<input id="last_name" <label
name="last_name" type="text" for="telephone">Telephone</label>
class="validate" data- <div class="telephone_error
error=".last_name_error" value="<?= "></div>
getOldValue($_POST, 'last_name'); ?>"> </div>
<label for="last_name">Last </div>
Name</label> <div class="row mb10">
<div class="last_name_error <div class="input-field col s12">
"></div> <textarea id="address"
</div> name="address" class="materialize-textarea"
</div> data-error=".address_error"><?=
<div class="row mb10"> getOldValue($_POST, 'first_name');
<div class="input-field col s6"> ?></textarea>
<input id="email" <label
name="email" type="email" class="validate" for="address">Addess</label>
data-error=".email_error" value="<?= <div class="address_error
getOldValue($_POST, 'email'); ?>"> "></div>
<label </div>
for="email">Email</label> </div>
<div class="email_error <div class="row mb10">
"></div> <div class="file-field input-field
</div> col s12">
<div class="input-field col s6"> <div class="btn">
<input id="birthdate" <span>Image</span>
name="birthdate" type="text" <input type="file"
class="datepicker" data- name="pic" id="pic" data-error=".pic_error">
error=".birthday_error" value="<?= </div>
getOldValue($_POST, 'birthdate'); ?>"> <div class="file-path-
<label wrapper">
for="birthdate">Birthdate</label> <input class="file-path
<div class="birthday_error validate" type="text" placeholder="Upload
"></div> Your Image">
</div> </div>
</div> <div class="pic_error "></div>
<div class="row mb10"> </div>
<div class="input-field col s12"> </div>
<input id="telephone" <button class="btn waves-effect
name="telephone" type="tel" class="validate" waves-light right" type="submit"
data-error=".telephone_error" value="<?= name="action">Submit
getOldValue($_POST, 'telephone'); ?>">
<i class="material-icons require_once('./includes/functions.inc.php');
right">send</i> $error_flag=false;
</button>
</form> if(!isset($_GET['id'])){
</div> echo"How the hell did you come here???";
</div> die();
<footer class="page-footer p0"> }
<div class="footer-copyright "> $id=$_GET['id'];
<div class="container"> $query= "SELECT * FROM contacts
<p class="center-align">CO6IA- WHERE id=$id";
Group11</p> $rows=db_select($query);
</div> $row=$rows[0];
</div>
</footer>
<!--JQuery Library--> if(isset($_POST['action'])){
<script src="js/jquery.min.js" $new_first_name=$_POST['first_name'];
type="text/javascript"></script> $new_last_name=$_POST['last_name'];
<!--JavaScript at end of body for optimized $new_email=$_POST['email'];
loading--> $new_birthdate=myDate(($_POST['birth
<script type="text/javascript" date']));
src="js/materialize.min.js"></script> $new_telephone=$_POST['telephone'];
<!--JQuery Validation Plugin--> $new_address=$_POST['address'];
<script if(!empty($_FILES['pic']['name'])){
src="vendors/jquery-validation/validation.min $file_name=$_FILES['pic']['name'];
.js" type="text/javascript"></script>
<script //Extracting the Extension
src="vendors/jquery-validation/additional- $data=explode('.',$file_name);
methods.min.js" $ext=strtolower(end($data));
type="text/javascript"></script>
<!--Include Page Level Scripts--> $new_first_name_lower=strtolower($n
<script ew_first_name);
src="js/pages/add-contact.js"></script> $new_last_name_lower=strtolower($n
<!--Custom JS--> ew_last_name);
<script src="js/custom.js"
type="text/javascript"></script> $new_image_name="{$row['id']}.
</body> $ext";
$image_name=$row['image_name'];
</html> unlink("./images/users/$image_name")
update.php ;
<?php $source=$_FILES['pic']['tmp_name'];
$destination="./images/users/$new_im }
age_name"; ?>
move_uploaded_file($source, <!DOCTYPE html>
$destination); <html>
}
// else{ <head>
// //Extracting the Extension <!--Import Google Icon Font-->
// $image_name=$row['image_name']; <link
// $data=explode('.',$image_name); href="https://fonts.googleapis.com/icon?
// $ext=strtolower(end($data)); family=Material+Icons" rel="stylesheet">
// <!--Import materialize.css-->
$new_first_name_lower=strtolower($new_firs <link type="text/css" rel="stylesheet"
t_name); href="css/materialize.min.css"
// media="screen,projection" />
$new_last_name_lower=strtolower($new_last
_name); <!--Import Csutom CSS-->
// <link rel="stylesheet" href="css/style.css"
$new_image_name="$new_first_name_lower type="text/css">
-$new_last_name_lower.$ext"; <!--Let browser know website is optimized
// for mobile-->
rename("./images/users/$image_name","./ima <meta name="viewport"
ges/users/$new_image_name"); content="width=device-width, initial-
// } scale=1.0" />
$query="UPDATE contacts SET
first_name='$new_first_name',last_name='$ne <title>Update Contact</title>
w_last_name',email='$new_email',birthdate=' </head>
$new_birthdate',telephone='$new_telephone',a
ddress='$new_address',image_name='$new_i <body>
mage_name' WHERE id=$id"; <!--NAVIGATION BAR-->
$result=db_query($query); <nav>
if(!$result){ <div class="nav-wrapper">
$error_flag=true; <!-- Dropdown Structure -->
$error_msg="Something went <ul id="dropdown1"
wrong with the Database"; class="dropdown-content">
}else{ <li><a href="#!">Profile</a></li>
//header('Location :idex.php? <li><a href="#!">Signout</a></li>
op=add&status=success'); </ul>
redirect("index.php? <nav>
op=update&status=success"); <div class="nav-wrapper">
}
<a href="#!" class="brand-logo </div>
center">Contact Info</a> <div class="input-field col s6">
<ul class="right hide-on-med- <input id="last_name"
and-down"> name="last_name" type="text"
class="validate" data-
<!-- Dropdown Trigger --> error=".last_name_error"value="<?
<li><a class="dropdown- =getOldValue($row,"last_name");?>">
trigger" href="#!" data- <label for="last_name">Last
target="dropdown1"><i Name</label>
class="material-icons <div class="last_name_error
right">more_vert</i></a></li> "></div>
</ul> </div>
</div> </div>
</nav> <div class="row mb10">
<a href="#" data-target="nav-mobile" <div class="input-field col s6">
class="sidenav-trigger"><i class="material- <input id="email"
icons">menu</i></a> name="email" type="email" class="validate"
</div> data-error=".email_error"value="<?
</nav> =getOldValue($row,"email");?>">
<!--/NAVIGATION BAR--> <label
<div class="container"> for="email">Email</label>
<div class="row mt50"> <div class="email_error
<h2>Update Contact</h2> "></div>
</div> </div>
<div class="row"> <div class="input-field col s6">
<form class="col s12 formValidate" <input id="birthdate"
action="" id="update-contact-form" name="birthdate" type="text"
method="POST" enctype="multipart/form- class="datepicker" data-
data"> error=".birthday_error"value="<?
<div class="row mb10"> =myDate(getOldValue($row,"birthdate"),"M
<div class="input-field col s6"> d, Y") ;?>">
<input id="first_name" <label
name="first_name" type="text" for="birthdate">Birthdate</label>
class="validate" data- <div class="birthday_error
error=".first_name_error" value="<? "></div>
=getOldValue($row,"first_name");?>"> </div>
<label for="first_name">First </div>
Name</label> <div class="row mb10">
<div class="first_name_error <div class="input-field col s12">
"></div>
<input id="telephone" </div>
name="telephone" type="tel" class="validate" <div class="pic_error "></div>
data-error=".telephone_error"value="<? </div>
=getOldValue($row,"telephone");?>"> </div>
<label <button class="btn waves-effect
for="telephone">Telephone</label> waves-light right" type="submit"
<div class="telephone_error name="action">Submit
"></div> <i class="material-icons
</div> right">send</i>
</div> </button>
<div class="row mb10"> </form>
<div class="input-field col s12"> </div>
<textarea id="address" </div>
name="address" class="materialize-textarea" <footer class="page-footer p0">
data-error=".address_error"><? <div class="footer-copyright ">
=getOldValue($row,"email");?></textarea> <div class="container">
<label <p class="center-align">CO6IA-
for="address">Addess</label> Group11</p>
<div class="address_error </div>
"></div> </div>
</div> </footer>
</div> <!--JQuery Library-->
<div class="row mb10"> <script src="js/jquery.min.js"
<div class="col s3"> type="text/javascript"></script>
<img src="images/users/<? <!--JavaScript at end of body for optimized
=$row['image_name']; ?>" alt="" loading-->
id="temp_image" width="100%"> <script type="text/javascript"
</div> src="js/materialize.min.js"></script>
<div class="file-field input-field <!--JQuery Validation Plugin-->
col s9"> <script
<div class="btn"> src="vendors/jquery-validation/validation.min
<span>Image</span> .js" type="text/javascript"></script>
<input type="file" <script
name="pic" id="pic" data-error=".pic_error"> src="vendors/jquery-validation/additional-
</div> methods.min.js"
<div class="file-path- type="text/javascript"></script>
wrapper"> <!--Include Page Level Scripts-->
<input class="file-path <script
validate" type="text" placeholder="Upload src="js/pages/update-contact.js"></script>
Your Image"> <!--Custom JS-->
<script src="js/custom.js" } else {
type="text/javascript"></script> redirect('index.php?
</body> op=delete&status=error');
</html> }
delete.php ?>
<?php
require_once('./includes/functions.inc.php');
if(!isset($_GET['id'])) {
echo " How the hell you came here????";
die();
}
$id = $_GET['id'];
$image_name = $rows[0]['image_name'];
$query = "DELETE FROM contacts WHERE
id = $id";
$result = db_query($query);
if($result) {
unlink("images/users/$image_name");
redirect('index.php?
op=delete&status=success');
11
6.0 Actual Resources Used
Sr.No. Equipment Name with Broad Specification Remark if any
1 Laptop – Windows 10
2 Xampp, VS Code
12
13
14
We learnt how to use PHP for client side scripting.
We learnt how to use functions in PHP.
We learnt how to use sessions and session vaiables for practical usage in python.
We learnt how to design a database using MySQL.
We understood and implemented the connection of database with webpages via PHP.
We understood the importance of working in team and listening to each other's ideas and
views to further improve our project and our knowledge.
We have also learnt to coordinate with the team members and support each other for
successful completion of the project.
We learnt to follow the deadlines and complete our work within specified time frame.
16
Annexure – III
17
Annexure – IV
Poor
Sr. Characteristic to be Average Good Excellent
( Marks1- Sub Total
No assessed 3) (Marks 4-5 ) (Marks 6-8) ( Marks9-10)
(A) Process and Product Assessment (Convert Above Total marks out of 6 Marks)
1 Relevance to the course
Literature review/
2
Information Collection
Completion of the Target
3
as per project proposal
Quality of
5
Prototype/Model
6 Report Preparation
(B) Individual Presentation / Viva (Convert above total marks out of 4 marks)
7 Presentation
8 Defense/Viva
Roll No. Process and Product Assessment (6 Individual Presentation / Viva (4 Total Marks 18
Marks) Marks) 10
31
Dated Signature:
19