URL Shortener App Using PHP and JavaScript with Source Code

Language

Welcome to the URL Shortener App – a fast, lightweight tool designed to transform long, cumbersome links into short, shareable URLs with just a click! Built with PHP for seamless server-side processing and enhanced with JavaScript for smooth interactivity, this app provides a hassle-free way to generate compact links without requiring user accounts. It integrates with reliable APIs like encurtador.dev, while offering backup options (is.gd, TinyURL) to ensure uninterrupted service.

Enjoy a clutter-free experience with features like one-click copying, social media sharing, and local history storageβ€”all wrapped in a responsive, mobile-friendly design. Whether you're sharing articles, marketing campaigns, or personal projects, this tool simplifies link management without the need for databases or complex setups. Just paste, shorten, and share! πŸš€

You can also check this PHP and MySQL projects:

Key Features:

βœ… URL Shortening – Converts long URLs into compact, shareable links.
βœ… Local History – Stores up to 20 recently shortened links (no database required).
βœ… Copy to Clipboard – One-click copying of shortened URLs.
βœ… Social Sharing – Quick sharing options for Twitter, Facebook, and WhatsApp.
βœ… Responsive Design – Works on both desktop and mobile devices.
βœ… Fallback APIs – Uses backup services (is.gd, TinyURL) if the primary API fails.
βœ… No Authentication Needed – Simple and user-friendly with no login required.

Technologies Used:

Frontend:

  • HTML5 & CSS3 – For structure and styling.

  • JavaScript (ES6) – For dynamic interactions and clipboard functionality.

  • Font Awesome – For icons.

  • Google Fonts (Inter) – For typography.

Backend:

  • PHP – For server-side processing and API integration.

  • JSON File Storage – For maintaining history without a database.

APIs Used:

  • encurtador.dev – Primary URL shortening API.

  • is.gd – Fallback API.

  • TinyURL – Secondary fallback API.

How to Use:

1. Shorten a URL

  • Enter a long URL in the input field.

  • Click "Shorten" to generate a compact link.

  • Copy the shortened URL using the "Copy" button.

2. View History

  • Recently shortened URLs appear in the "Recently Shortened URLs" section.

  • Click on any short URL to open it in a new tab.

3. Clear History

  • Click the "Clear" button to remove all stored URLs.

4. Share Links

  • Use the Twitter, Facebook, or WhatsApp buttons to share shortened URLs instantly.

Sample Screenshots of the Project:

Landing Page

How to Run?

  • Download and Install XAMPP.
  • Download the provided source code zip file.

Installation/Setup:

  • Extract the provided source code to the htdocs folder.
  • Open your browser with the link "http://localhost/url-shortener/".

Video Demonstration for Installation/Setup:

Conclusion:

In conclusion, this URL Shortener App using PHP & JavaScript  provides a simple yet powerful solution for transforming long links into concise, shareable URLsβ€”complete with instant API shortening, local history tracking, and cross-device accessibility. With no database or authentication required, it's perfect for quick deployments while offering reliability through primary and fallback APIs.

That's it! I hope this "URL Shortener App Using PHP and JavaScript" will assist you on your  programming journey, providing value to your current and upcoming PHP projects.

For additional tutorials and free source code, explore our websites.  

Enjoy Coding :>>

 

Note: Due to the size or complexity of this submission, the author has submitted it as a .zip file to shorten your download time. After downloading it, you will need a program like Winzip to decompress it.

Virus note: All files are scanned once-a-day by SourceCodester.com for viruses, but new viruses come out every day, so no prevention program can catch 100% of them.

FOR YOUR OWN SAFETY, PLEASE:

1. Re-scan downloaded files using your personal virus checker before using it.
2. NEVER, EVER run compiled files (.exe's, .ocx's, .dll's etc.)--only run source code.

Add new comment