How to Make Login & Registration Form in HTML , PHP And Myql | Create SignIn & SignUp Page

How to Make Login & Registration Form in HTML , PHP And Myql

HTML, PHP and MySql Login System

आज हम सीखेंगे कि HTML , PHP और MySQL डेटाबेस की सहायता से Login और Registration  सिस्टम कैसे बनाया जाता है। MySQL डेटाबेस के साथ लॉगिन सिस्टम बनाने के लिए कुछ Basic Step हैं।

बढ़िया, Login System बनाने के पहले समझते है की इसे बनाने में किस किस चीज़ की requirements होगी |

Requirements

  • HTML, CSS ,PHP  Mysql के बारे में कुछ Basic knowledge होना चाहिए| बहुत ज्यादा नहीं थोड़ा बहुत knowledge होना चाहिए| 
  • एक Text Editor जिसमे हम Code लिखेंगे, और वो Text Editor कोई भी हो सकता है जैसे - Notepad, Notepad++, Dreamweaver, VS-Code etc| और मेरी Recommendation यह है की आप VS-Code उपयोग करे|
  • XAMPP - XAMPP एक क्रॉस-प्लेटफ़ॉर्म सॉफ़्टवेयर है, जो की  Apache सर्वर (A), MySQL (M), PHP (P), पर्ल (P) के लिए  बना है। XAMPP एक पूर्ण सॉफ्टवेयर पैकेज है, इसलिए, हमें इन सभी को अलग से Install करने की आवश्यकता नहीं पड़ती है।  

How to setup Environmental Setup

How to install VS-Code Text Editor

VS-Code एक पावरफुल text एडिटर है जिसको Microsoft ने बनाया है, और सबसे बड़ी बात की यह Free है| VS-Code को डाउनलोड और इनस्टॉल के कुछ स्टेप है|
  • VSCode को डाउनलोड करने के लिए उसके official साइट https://code.visualstudio.com/download से अपने Operating system के हिसाब से डाउनलोड करके Install करे|

How to install XAMPP control Panel

  • XAMPP को डाउनलोड करने के लिए उसके official साइट https://www.apachefriends.org/index.html  से अपने Operating system के हिसाब से डाउनलोड करके Install करे|
How to download xampp
  • Apache server को स्टार्ट बटन पर क्लिक करके Apache Server शुरू करें।
  • MySQL को स्टार्ट करने के लिए MySQL के सामने वाली स्टार्ट बटन  Click करे| 
  • Xampp इंस्टॉल होने के बाद आप पाएंगे की आपके C:\xampp\htdocs| आपको अपने प्रोजेक्ट का फोल्डर htdocs फोल्डर के अंदर ही बनाना है| 

How to Create Login & Registration Project

सबसे पहले htdocs फोल्डर के अंदर कुछ फाइल बनाते 
  • login.html -यह login पेज यूजर से इनपुट लेगा अगर इनपुट डाटा Database में होगा तो लॉगिन होगा नहीं तो नहीं होगा|
  • registration.html-यह पेज यूजर की डिटेल्स लेगा जिससे उनका अकाउंट create होगा |  
  • connection.php - यह पेज यूजर की इनपुट की हुई डिटेल्स को डेटाबेस में save करने का काम करता है|  

login.html

सबसे पहले हम लॉगिन पेज डिजाइन करते है जहाँ पे यूजर अपना यूजर नेम और पासवर्ड डाल कर लॉगिंग करेगा| लॉगिन पेज डिज़ाइन करना बहुत ही आसान है अगर आप थोड़ा भी HTML और CSS के बारे में जानते है तो 
login.html Code

<!DOCTYPE html>

<html>

<head>

    <title>Login System</title>

<style>

        .cen

        {

            margin: auto;

           width: 30%;

           border: 1px solid green;

           padding: 10px;

           padding-bottom: 30px;

        }

 </style>

</head>

<body style="background-color: aquamarine;">

<form>

    <div class="cen">

    <h2>Welcome to Login System</h2>

    <table ">

        <tr><td>Username</td><td><input type="text" name="uname"></td>

        </tr>

        <tr><td> Password</td><td><input type="password" name="passwrd"></td>

        </tr>

<tr>

    <td colspan="2"> <button style="width: 100%; border-radius: 10px;" type="submit" name="submit">Submit</button></td>

</tr>

    </table>

</div>

</form>

</body>

</html>

 


HTML Login page

Registration.html Code

<!DOCTYPE html>

<html >

<head>

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Login System</title>

    <style>

        .cen

        {

            margin: auto;

            width: 30%;

            border: 1px solid green;

            padding: 10px;

            padding-bottom: 30px;

        }

    </style>

</head>

<body style="background-color: aquamarine;">

    <form>

    <div class="cen">

    <h2 style="text-align: center; text-decoration: underline;">Welcome to Login System</h2>

    <table>

        <tr><td>Full Name</td><td><input type="text" name="uname"></td></tr>

        <tr><td>Email</td><td><input type="email" name="email"></td></tr>

        <tr><td>Mobile No.</td><td><input type="password" name="mobile"></td></tr>

        <tr><td>Password</td><td><input type="password" name="password"></td></tr>

        <tr><td> Confirm Password</td><td><input type="password" name="repassword"></td></tr>

        <tr><td colspan="2"><button style="width: 100%; border-radius: 10px;" type="submit" name="submit">Submit</button></td></tr>

    </table>

</div>

</form>

</body>

 

</html>

 


signup form in HTML

How to setup Database and Table Creation 

बढ़िया, अगला स्टेप हमारा डेटाबेस और टेबल बनाना है| डेटाबेस बनाने के लिए सबसे पहले XAMPP Control Panel को शुरू करते करे और Apache के सामने वाली बटन press करके ऑन करे और उसके नीचे MySql के सामने वाली बटन को press करके ऑन करे| 
डेटाबेस बनाने के लिए कुछ स्टेप को follow करें 
  •  जब आपका Apache और MySql का Server ऑन हो जाये तब Google Chrome या कोई भी ब्राउज़र में localhost/phpmyadmin/ एड्रेस टाइप करके खोले|
  • खुले हुए पेज में लेफ्ट साइड में New का ऑप्शन मिलता है उसपे क्लिक करे, उसके बाद राइट साइड में नई विंडो खुलती है वहाँ पे अपना डेटाबेस का नाम टाइप करे, डेटाबेस का नाम टाइप होने के बाद create बटन पर क्लिक करे| 
how to setup phpmyadmin

जैसे ही आपका डेटाबेस ready हो जाता है, तब table बनाने  बरी आती है , टेबल बनाने के लिए ये स्टेप फॉलो करे 
  • सबसे पहले जो अपने डेटाबेस बनाया है उसपे क्लिक करे जो की लेफ्ट साइड लिस्टेड होता है |
  • जैसे ही आप डेटाबेस में क्लिक करते है वैसे ही आपसे टेबल create करने को कहेगा, और एक इनपुट बॉक्स होगा जहा पे आपको टेबल का नाम देना होगा| जैसे हमने registration दिया हुआ है|
  • टेबल का नाम देने के बाद आपसे Number of columns  लिए पूछता है जो की वह होता है जितनी फील्ड आपने अपने front end से भेजी होती है या जितनी फ़ील्ड्स की वैल्यूज आपको डेटाबेस में save करनी  होती है|
  • सबसे आखरी में Go बटन में क्लिक करके टेबल सेव करे   

connection.php

<?php

$server_name="localhost";

$username="root";

$password="";

$database_name="login";

$con = mysqli_connect($server_name,$username,$password,$database_name);

if($con)

{

    ?>

    <h3>Connection successfull</h3>

    <?php

}else

{

    ?>

    <h1>not connection successfull</h1>

 

    <?php

}

if (isset($_POST['save']))

{

    $uname=$_POST['uname'];

    $email=$_POST['email'];

    $mobile=$_POST['mobile'];

    $password=$_POST['password'];

    $repassword=$_POST['repassword']; 

    $sql_query="INSERT INTO registration (uname,email,mobile,password,repassword) VALUE ('$uname','$email','$mobile','$password','$repassword')";

    if (mysqli_query($con, $sql_query))

    {

        echo "Record successfully added";

    }

    else

    {

        echo "Error:".$sql."".mysqli_error($con);

    }

    mysqli_close($con);

    }

?>