Code
Below is the Code for Creating above page:
style.css
/* style.css */ body { font-family : Arial , sans-serif ; margin : 0 ; padding : 0 ; display : flex; justify- content : center ; flex- direction : column; align-items: center ; height : 100 vh; background-color : #f2f2f2 ; background-image : url ("bg.jpg"); backdrop-filter: blur( 1px ); } .container { text-align : center ; } h 1 { font-size : 36px ; margin-bottom : 20px ; color : #333 ; } form { max-width : 400px ; margin : 0 auto ; } input[type="text"] { width : calc( 100% - 80px ); padding : 10px ; border : 1px solid #ccc ; border-radius: 5px 0 0 5px ; outline : none ; } button { width : 80px ; padding : 10px ; background-color : #4CAF50 ; color : white ; border : none ; border-radius: 5px ; cursor : pointer ; outline : none ; margin-top : 30px ; } button:hover { background-color : #45a049 ; } .copy-button { width : 100% ; } .copy-button:hover { background-color : #0056b3 ; } #shortened- url { text-decoration : none ; padding : 14px ; background : #dfcdcd ; border-radius: 4px ; box-shadow: 2px 2px 2px 1px rgba( 0 , 0 , 0 , 0.2 ); } |
index.php
// index.php <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>URL Shortener</title> <link rel="stylesheet" href="https://www.w3wiki.netstyle.css" /> </head> <body> <div class ="container"> <h1>Welcome to our URL Shortener</h1> <form action="shorten.php" method="post"> <input type="text" name="long_url" placeholder="Enter URL to shorten"> <button type="submit">Shorten</button> </form> </div> </body> </html> |
shorten.php
// shorten.php <?php // Connect to MySQL database $conn = new mysqli( 'localhost' , 'root' , '' , 'ust' ); // Check connection if ( $conn ->connect_error) { die ("Connection failed: " . $conn ->connect_error); } // Function to generate a random short code function generateShortCode() { return substr (md5(uniqid()), 0, 6); // Change length as needed } // Initialize variable to store shortened URL $shortened_url = '' ; // Handle form submission if ( $_SERVER ["REQUEST_METHOD"] == "POST") { $long_url = $_POST ["long_url"]; $short_code = generateShortCode(); // Insert the mapping into the database $sql = "INSERT INTO urls (long_url, short_code) VALUES ( '$long_url' , '$short_code' )"; if ( $conn ->query( $sql ) === TRUE) { // Construct the shortened URL $shortened_url = "http: //localhost/UrlShorter-main/$short_code"; // Change domain as needed } else { echo "Error: " . $sql . "<br>" . $conn ->error; } } // Close database connection $conn ->close(); ?> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Shortened URL</title> <link rel="stylesheet" href="https://www.w3wiki.netstyle.css" /> </head> <body> <?php if (! empty ( $shortened_url )): ?> <h1>Shortened URL</h1> <p> <a id="shortened-url" href="https://www.w3wiki.net<?php echo $shortened_url ; ?>"><?php echo $shortened_url ; ?></a> <br> <button class =" copy -button" onclick="copyToClipboard()"> Copy to clipboard</button> </p> <?php else : ?> <h1>Error</h1><br> <p>There was an error shortening the URL.</p> <?php endif ; ?> <script> function copyToClipboard() { var urlElement = document.getElementById("shortened-url"); var url = urlElement.textContent; var tempInput = document.createElement("input"); tempInput.setAttribute("value", url); document.body.appendChild(tempInput); tempInput.select(); document.execCommand(" copy "); document.body.removeChild(tempInput); alert("URL copied to clipboard: " + url); } </script> </body> </html> |
redirect.php
// redirect.php <?php // Database connection $conn = new mysqli( 'localhost' , 'root' , '' , 'ust' ); // Check connection if ( $conn ->connect_error) { die ("Connection failed: " . $conn ->connect_error); } // Parse the shortened URL to extract the minified code $shortened_url = $_SERVER [ 'REQUEST_URI' ]; $parts = explode ( '/' , $shortened_url ); $minified_code = end ( $parts ); // Look up the original URL in the database $sql = "SELECT long_url FROM urls WHERE short_code = '$minified_code' "; $result = $conn ->query( $sql ); if ( $result ->num_rows > 0) { // Redirect to the original URL $row = $result ->fetch_assoc(); $original_url = $row ["long_url"]; header("Location: $original_url "); exit (); } else { // Original URL not found, display an error page http_response_code(404); echo "Error: Original URL not found"; } // Close database connection $conn ->close(); ?> |
.htaccess
RewriteEngine On RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule ^(.*)$ redirect.php [L,QSA] |
SQL query:
CREATE TABLE urls (
id INT AUTO_INCREMENT PRIMARY KEY,
long_url VARCHAR(255) NOT NULL,
short_code VARCHAR(10) NOT NULL UNIQUE
);
URL Shortener Generator Project
URL Shortener Generator Project is one of the most common software development projects. In this article, we will make the URL Shortener Generator software development project, from scratch, for final-year students. We will cover all the steps you must do while developing this project.