Hey, are you a beginner in PHP? Just finished your basic of PHP and OOPs?
Do you want something interesting to build?
Have you ever tried an age calculator with PHP?
Here I am with a nice-looking age calculator with PHP OOPs.
Yes, it’s not tough to calculate the difference between two dates. It can be achieved with some simple lines of code.
echo date_diff(date_create($bday), date_create('today'))->y;$birthDate = new DateTime('1996-04-19');
$today = new DateTime('today');
echo $birthDate->diff($today)->y;I have something extra for you, so continue reading.
Read a detailed article on OOPs here.
So, let’s start the interesting part. But first, look at the output.
You can confirm the final result here https://www.calculator.net/age-calculator.html,
So, let’s dive into it,
Header and Footer are the two file which we are added here.
The header file is to link external CSS and Js. Footer file is to link and trigger Js.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- Add page icon -->
<link rel="icon" href="assets/icon/sb.png" type="image/png" sizes="16x16" />
<title>Age calculator</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css" />
<!-- Latest compiled and minified JavaScript -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
<!-- Add external css -->
<link rel="stylesheet" href="assets/css/theme.css" />
</head>
<body> <script type="text/javascript">
$('.datepicker').datepicker({
format: 'dd-mm-yyyy',
autoclose: true,
todayBtn: true,
todayHighlight: true,
});
</script>
</body>
</html> You can read about the best position of Js file in HTML document, here.
<?php
Class Age {
public $dateOfBirth;
public $today;
public $age;
public function __construct($dob) {
$this->dateOfBirth = new DateTime($dob);
$this->today = new DateTime('today');
}
public function ageCalculation() {
$this->age = $this->dateOfBirth->diff($this->today);
}
}
?> It will connect the all dots like header, footer and age class file also.
We are using include once function instead of include read the difference here.
<?php
include_once('age.php');
if(isset($_POST['dob'])){
$person = new Age($_POST['dob']);
$person->ageCalculation();
}
?>
<!-- Add header(link stylesheets, jquery, bootstrap) -->
<?php include_once('layout/header.php'); ?>
<div class="container">
<div class="page-header">
<h1>Age calculator</h1>
</div>
<div class="row">
<div class="col-md-4 col-md-offset-4">
<div class="panel panel-default theme-color mt-1">
<!-- Default panel contents -->
<div class="panel-heading theme-color text-center"><span class="glyphicon glyphicon-calendar"></span> Age Calculator</div>
<div class="panel-body">
<form class="form-inline text-center" method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">
<div class="form-group">
<input type="text" name="dob" class="form-control datepicker" placeholder="Select Date of Birth"
<?php if(isset($_POST['dob'])) { ?>value="<?= $person->dateOfBirth->format('d-m-Y'); ?>"<?php } ?>
/>
</div>
<div class="form-group">
<button type="submit" class="form-control btn btn-dark"><span class="glyphicon glyphicon-check"></span> Calculate</button>
</div>
</form>
<div class="mt-1">
<?php if(isset($_POST['dob'])) { ?>
<div class="alert alert-warning alert-dismissible text-center" role="alert">
Today is <?= $person->today->format('d-m-Y'); ?>
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="alert alert-success text-center" role="alert">
The age is <?= $person->age->y ?> years <?= $person->age->m ?> months <?= $person->age->d ?> days old
</div>
<?php } ?>
</div>
</div>
<div class="panel-footer theme-color text-center">Powered by <a class="link-color" href="https://sbsharma.com" target="_blank">www.sbsharma.com</a></div>
</div>
</div>
</div>
</div>
<!-- Add footer(js scripts) -->
<?php include_once('layout/footer.php'); ?> This strategy will also help you to integrate a pre-built theme with PHP and its frameworks. So, understand carefully.
Obviously bootstrap helps us to minimize our custom CSS, that’s why we have used it.
That’s it.
Start your local server if you are working on local and test your code.
Here is an assignment for you, add the custom date to calculate age instead of the current date.
If you face any kind of problem or found any issue with above code. Please feel free to comment.
Click below button to clone the source code from git-hub repository.
Today we are going to learn about managing multiple PHP versions on ubuntu with xampp.…
Let's understand about how to use coding to improve your website's SEO. In today’s computerized…
Let's understand the most important linux commands for web developers. Linux, as an open-source and…
Today we are going to discuss top 75+ Laravel interview questions asked by top MNCs.Laravel,…
Today we will discuss about the Mailtrap integration with laravel 10 .Sending and receiving emails…
Today we are going to integrate FCM (Firebase Cloud Messaging) push notifications with ionic application.Firebase…
View Comments