This project was developed to help users discover their zodiac sign based on their provided date of birth. It features a simple and interactive interface using HTML, PHP, and CSS, with an XML database to store information about the signs. The project is responsive, ensuring a great experience on both mobile devices and desktops.
-
Input Form (HTML + PHP):
Users enter their date of birth in a form. After submission, the system processes the date and identifies the corresponding zodiac sign. -
Zodiac Sign Database (XML):
The data about the signs, including name, date range, and description, is stored in an XML file (signs.xml). This file is dynamically loaded by the program to determine the user's sign. -
Visual Styling (CSS):
The design uses modern CSS with a responsive theme, gradients, soft shadows, and transitions. The styles are optimized to provide a user-friendly and attractive interface. -
Responsiveness:
The project was developed using media queries and best design practices to ensure accessibility across different screen sizes.
- The HTML form, located in the
index.phpfile, collects the user's date of birth. - The form sends the data to the
show_zodiac_sign.phpfile via the POST method. - In the
show_zodiac_sign.phpfile:- The date of birth is processed and compared with the date ranges of each sign stored in the XML.
- If the date matches a range, the system displays the name and description of the zodiac sign.
- In case of errors, user-friendly messages are displayed to guide the user.
-
Input Form:
- A simple form with an
input[type="date"]field to ensure the user enters the date in the correct format. - Attributes like
requiredand backend validations ensure data reliability.
- A simple form with an
-
Date Processing:
- The PHP
DateTimeclass is used to efficiently and robustly manipulate and compare dates. - The logic handles special cases, such as signs that span across the year (e.g., Capricorn).
- The PHP
-
XML Database:
- The
signs.xmlfile stores structured data about the zodiac signs. - The
simplexml_load_filefunction is used to load and interpret the XML.
- The
-
Styling and Responsiveness:
- CSS defines a modern design using CSS variables, gradients, and transition effects.
- Media queries are implemented to adjust the layout for mobile devices.
- Issue: The system could fail if the
signs.xmlfile was missing or poorly formatted. - Solution: Added checks to ensure the XML is loaded correctly. If not, the system displays a user-friendly error message.
- Issue: Signs like Capricorn, which span across the year (12/22 to 01/19), were not processed correctly.
- Solution: Adjusted the logic for these cases by adding one year to the end or start dates when necessary.
- Issue: Generic messages made it difficult to diagnose problems.
- Solution: Detailed messages were implemented for cases such as:
- Invalid date format.
- Error loading the XML file.
- Date of birth outside the expected range.
- Issue: The layout was not optimized for mobile devices.
- Solution: Media queries were added to the CSS to:
- Adjust margins and spacing.
- Ensure buttons and inputs are displayed correctly on smaller screens.
- Improve the experience on devices with lower resolutions.
- Issue: The function could fail silently if the dates in the XML were poorly formatted.
- Solution: Added validation to ensure that dates in the
d/mformat are processed correctly.
This project is an excellent example of how to combine different technologies (HTML, PHP, CSS, and XML) to create a functional and interactive application. The processing logic has been enhanced to handle special cases, and the design has been adjusted to provide a high-quality user experience. Additionally, the fixes implemented ensure greater robustness and responsiveness of the program.