A webpage with a MVC back-end without using a framework in which a
subnet (IP) can be entered via a text field, resulting in info about the subnet:
first IP address, last IP address, network address and number of usable hosts.
| app | ||
| config | ||
| public | ||
| resources | ||
| src | ||
| .env.example | ||
| .gitignore | ||
| composer.json | ||
| composer.lock | ||
| deploy.php | ||
| global.d.ts | ||
| package-lock.json | ||
| package.json | ||
| postcss.config.cjs | ||
| readme.md | ||
| tailwind.config.js | ||
| vite.config.ts | ||
| yarn.lock | ||
IPcalc-u-later
Overview
IPcalc-u-later is a web application that calculates information about an IP subnet. Given an IPv4 or IPv6 address and subnet mask in CIDR notation (e.g., 213.136.12.128/27), the application will return the following information:
- Network Address
- First IP Address
- Last IP Address
- Number of Usable Hosts
This application is built using the MVC (Model-View-Controller) design pattern, without relying on any PHP frameworks, to meet the challenge requirements. The back-end is developed in PHP, and the user interface is created using HTML, TailwindCSS, TypeScript and Vue.
Example Inputs and Outputs:
IPv4 Example:
- Input:
213.136.12.128/27 - Output:
- Network:
213.136.12.128 - First:
213.136.12.129 - Last:
213.136.12.158 - Hosts:
30
- Network:
IPv6 Example:
- Input:
2001:db8:85a3:8a2e::/64 - Output:
- Network:
2001:0db8:85a3:8a2e:: - First:
2001:0db8:85a3:8a2e:0000:0000:0000:0000 - Last:
2001:0db8:85a3:8a2e:ffff:ffff:ffff:ffff - Hosts:
18446744073709551616
- Network:
Features
- Back-end:
- MVC architecture (without using a framework)
- IP address information and calculation logic implemented in PHP
- Supports both IPv4 and IPv6
- Validation for invalid subnet input
- Self-written PHP classes for IP address calculations
- Front-end:
- Simple, responsive design using HTML, TailwindCSS, TypeScript and Vue
- Input field to enter the subnet
- Displays the result in a user-friendly format
- Extras (Optional Features):
- Optionally, uses a template engine for rendering views (Vue)
- Optionally, third-party PHP libraries via Composer
- Version control using Git
Requirements
Server-side
- PHP 8.3+ (or higher) for processing the back-end logic
- A web server like Apache or Nginx to host the PHP application
- Composer (for managing third-party PHP libraries, if used)
Client-side
- Node.js: Version 20 or higher for front-end development
- Yarn: Version 1.22 or higher for managing JavaScript dependencies.
- Any modern web browser: Chrome, Firefox, Safari, etc.
Installation and Setup
-
Clone the repository:
git clone git@git.maartenvr98.nl:maartenvr98/IPcalc-u-later.git cd ipcalc-u-later -
Install PHP dependencies:
composer install -
Set up Node.js and Yarn (for front-end development):
- Install Node.js (ensure you're using version 20 or higher)
- You can download and install the latest version from Node.js official site.
- Install Yarn globally via npm (if not already installed):
npm install -g yarn
-
Install frontend dependencies
yarn install -
Setup the server:
- If you're using Apache, ensure that mod_rewrite is enabled and the .htaccess file is properly configured.
- If you're using Nginx, configure the server block to point to the public directory.
-
Run the server:
php -S localhost:8000 -t public -
Acces the application:
- Open a web browser and navigate to http://localhost:8000 (or the appropriate URL based on your server configuration).
Licence
This project is licensed under the MIT License
Acknowledgements
- The MVC design pattern was used to structure the application.
- This project was developed as part of a technical challenge.