Showing posts with label bootstrap. Show all posts
Showing posts with label bootstrap. Show all posts
, , , ,

Get Age from Date of Birth using PHP

          No comments

 To get current year/s of age in PHP, You need to find the difference and subtract the date of birth input by the user to the current date.

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.

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.

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.


After that you can now place this form into the card we created earlier.

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.



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.
Share:
Read More
, , , , ,

Login Page Template using Bootstrap 4

          No comments

This article shows you a login page created using HTML5 and Bootstrap.

You need to familiarize with HTML5 and Bootstrap.

HTML5 is the latest evolution of the standard that defines HTML. The term represents two different concepts. It is a new version of the language HTML, with new elements, attributes, and behaviors, and a larger set of technologies that allows the building of more diverse and powerful Web sites and applications. This set is sometimes called HTML5 & friends and often shortened to just HTML5.
See: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5

Bootstrap is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with our Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery.
See Full documentation of Bootstrap here: https://getbootstrap.com/docs/4.2/getting-started/introduction/

First is create your index.html using your Code/Text Editor.
Start coding html document.
Dont' forget to include the bootstrap required source files. i also included the font awesome icons. You can get it here. https://fontawesome.com/

I did define the class of the <body> element which is bg-dark to make the entire background dark in color.

Inside the <body> tag.paste this code.
I define the top margins and also padding of the .container for the space using the bootstrap 4 classes. mt-1 to mt-5 for margin, and pt-1 to pt-5 for padding(see here). Inside the container, I create a row with different class using bootstrap grid system to manage display in different screen size devices.

Create a card to hold a two column grid. one for form and the other one for brand. Place them like this.


Now test your index.html to your web browser and the final project should look like this.


You can download the full source code below.

SOURCE CODE
DOWNLOAD IT HERE -> DOWNLOAD

Enjoy !
Please share this if you find it helpful. Thank you.
Share:
Read More
, , , , , ,

Display Top Selling Items using PHP, MySQL, and Bootstrap 4

          No comments



Wondering if you can display all the top selling items from all of your sales with their total quantity and total amount.

Yes, in this article will show you a simple way for achieving that.

Prepare your tools for making this project. I am using the following below. (May differ from what you are using but you can use your alternatives as long as it does the same job)

  • XAMPP (Or any other Web Host with MySQL DB Local/Online).
  • Code/Text Editor (I am using Sublime 3)
  • Bootstrap and Font Awesome


Prepare your database ks_top_items and a table inside of it with the following fields.


Populate your database table so we can later fetch all the data and display in the main page.
Name your product and its unit price; declare the quantity that been sold or taken out, and the date of sale from the word itself. You can create this sample.



You can create rows as much as possible you can better compare the difference of each items from their quantities and total amount.



Create your project directory and start creating your configuration file, config.php.






Declare your $database with the database name you created earlier.
Your main page, index.php.
Do not forget to require your configuration file as follows.




Write the html page. Include Bootstrap 4 required sources in head and before end of the html like from the sample. (I am using the downloaded sources of bootstrap).

Inside the html <body> we will be needing a form and a table elements. <form> for building the query of user and the <table> for showing the results.
Your form should have the date range and the count of rows to display. Look like the following.



Your <form> element contains this following code.

The <table> element display the rank, product, unit price, total quantity, and total amount.

 Your <table> element contains this following code.

When user search with the date range and row limit, the final output of the project will be the following.



You can download the full source code below.

SOURCE CODE
1. Download the source code & place it on your host.
2. Create a database ‘ks_top_items’.
3. Import the sql file located at the source code's folder.
4. Test it on your host.

DOWNLOAD IT HERE -> DOWNLOAD

Enjoy !
Please share this if you find it helpful. Thank you.

Share:
Read More

Popular Posts

Recent Posts

Pages

Contact Form

Name

Email *

Message *