Prepare your index.php. I am using bootstrap 4 framework and fontawesome icons as a front-end for this project.
Declare your main page like this.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <!-- Required meta tags --> | |
| <meta charset="utf-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> | |
| <link rel="icon" href="../assets/images/favicon.ico"> | |
| <title>PHP Get Age | KSolutions PH</title> | |
| <!-- Bootstrap CSS --> | |
| <link rel="stylesheet" href="../assets/bootstrap/css/bootstrap.min.css"> | |
| <!-- Font Awesome CSS --> | |
| <link rel="stylesheet" href="../assets/plugins/font-awesome/css/fontawesome-all.min.css"> | |
| </head> | |
| <body class="bg-warning"> | |
| <!-- jQuery first, then Popper.js, then Bootstrap JS --> | |
| <script src="../assets/plugins/jQuery/jquery-3.3.1.min.js"></script> | |
| <script src="../assets/bootstrap/js/bootstrap.bundle.min.js"></script> | |
| </body> | |
| </html> |
I declared the class of the <body> as bg-warning for background color purposes. But you can also manipulate using CSS and experiment as yourself.
Inside the <body>, Place a bootstrap card holding by a column and row which holds by a container.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="container"> | |
| <div class="row"> | |
| <div class="col-lg-4 offset-lg-4 mt-5"> | |
| <div class="card"> | |
| <div class="card-body"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> |
We will need a form to hold the input of user's date of birth. Place this code at the top of the document to handle the submission of the form later and this is where the calculation happen.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?php | |
| if (isset($_POST['birth_date']) && !empty($_POST['birth_date'])) { | |
| $birth_date = $_POST['birth_date']; | |
| $age = date_diff(date_create($birth_date), date_create('now'))->y; | |
| } | |
| ?> |
After that you can now place this form into the card we created earlier.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <form method="post"> | |
| <div class="form-group text-center"> | |
| <label class="h4">Enter birth date : </label> | |
| <input type="date" name="birth_date" class="form-control form-control-lg" value="<?php echo isset($birth_date)?$birth_date:'';?>"> | |
| </div> | |
| <div class="text-center"> | |
| <button type="submit" class="btn btn-lg"><i class="fas fa-calendar"></i> Calculate</button> | |
| </div> | |
| </form> |
Lastly create another card right after the first card we created to display the output age of the user with the use of PHP to verify the user's input.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?php | |
| if (isset($age)) { | |
| ?> | |
| <div class="card mt-2"> | |
| <div class="card-body text-center"> | |
| <span class="h3">You are</span><br> | |
| <h1 style="font-size: 160px;"><?php echo $age;?></h1> | |
| <span class="h3">year/s of age.</span> | |
| </div> | |
| </div> | |
| <?php | |
| } | |
| ?> |
The output of the project should be like this.
Before user input.
After the user input and submits the form.
You can download the full source code below.
SOURCE CODE
1. Download the source code & place it on your host.
4. Test it on your host.
DOWNLOAD IT HERE -> DOWNLOAD
Enjoy !
Please share this if you find it helpful. Thank you.
No comments:
Post a Comment