Okuduğunuz konu hakkında proje yaptırmak isterseniz benimle buradan iletişime geçebilirsiniz. İletişim
Ana Sayfa
CSS
HTML

html üyelik sistemi kodu

HTML, web sitelerinde kullanıcılar üyelik oluşturmasını ve giriş işlemlerini sağlayan temel bir yapı oluşturma. Ancak HTML yalnız başına bir üyelik sistemi sunmaz. Bunun için genellikle HTML, CSS ve JavaScript gibi diğer web teknolojileriyle birlikte kullanılır.

Bir üyelik sistemi oluştururken aşağıdaki kullanımları takip edebilir:

Kullanıcı kaydı için bir kayıt formülü oluşturun: Kullanıcı adı, e-posta, şifre gibi gerekli alanları içeren bir HTML formülü oluşturun. Bu form, kullanıcıların kayıt olması için gerekli bilgilerin girilmesini sağlar.

Sunucu tarafında kayıt işlemini gerçekleştirin: HTML formülü, sunucu tarafında çalıştırılmalıdır. Sunucu sunucuları, kullanıcı depolama bilgilerini doğrulayabilir, arşivlere kaydedebilir ve gerekli diğer işlemleri gerçekleştirebilirsiniz. Bunun için genellikle bir sunucu tarafı programlama dili ( örneğin PHP, Python, Ruby, vb.) kullanılır.

Kullanıcı girişi için bir giriş formülü oluşturun: Kullanıcı adı ve parola gibi gerekli alanları içeren bir HTML formülü oluşturun. Bu form, kullanıcıların hesaplarına giriş yapmalarını sağlar.

Giriş çalıştırmayı doğrulayın: Giriş bağlantısından alınan bilgileri sunucuya göndererek doğrulama işlemini gerçekleştirin. Sunucu, kullanıcı sunucuları bilgileri, kayıtlı kullanıcı bilgileriyle karşılaştırarak girişin sonuçlarını kontrol eder.

Kullanıcı oturumunu yönetin: Başarılı bir giriş işlemini sonrasında kullanıcıların oturumunu yönetmek için oturum kimliği (oturum kimliği) veya belirteç gibi yöntemleri kullanabilirsiniz. Bu kullanıcılar kullanıcı tarayıcısında oturum açma bilgilerini ve kullanıcıların diğer sayfalara erişimini sağlar.

Kullanıcı çıkışı: Kullanıcının çıkışını elde etmek için parola silmek için temizleyin ve kullanıcıyı girişten çıkış yaptığınızı bildiren bir mesajla karşılayın.

Üyelik sistemi oluştururken veri güvenliğini, kullanıcı doğrulamayı, şifrelemeyi gibi koymaya dikkat etmek önemlidir. Güvenlik açıklarını en aza indirmek için sunucu tarafı doğrulama ve veri işleme gibi önlemler almalısınız.

Buraya ki bağlantı görüntüleri genel bir rehber niteliğidir ve daha karmaşık bir üyelik sistemi oluşturmak için ek işletim

Html Kodu

.Html

 <!DOCTYPE html>
<html>
<head>
   <title>Membership System</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <h1>Membership System</h1>

  <div id="signup-form">
    <h2>Sign Up</h2>
    <input type="text" id="username" placeholder="Username">
    <input type="password" id="password" placeholder="Password">
    <button onclick="signup()">Sign Up</button>
  </div>
  
  <div id="login-form">
    <h2>Login</h2>
    <input type="text" id="loginUsername" placeholder="Username">
    <input type="password" id="loginPassword" placeholder="Password">
    <button onclick="login()">Login</button>
  </div>
 
  <div id="welcome-message" style="display: none;">
    <h2>Welcome,  <span id="loggedInUsername"> </span>! </h2>
    <button onclick="logout()">Logout </button>
  </div>

  <script src="script.js"></script>
</body>
</html>

CSS Kodu

.CSS

body {
  font-family: Arial, sans-serif;
  text-align: center;
}
 
h1 {
  color: #333;
}

#signup-form, #login-form, #welcome-message {
  margin-top: 20px;
}

input[type="text"], input[type="password"] {
  padding: 5px;
  margin: 5px;
  width: 200px;
}

button {
  padding: 10px;
  background-color: #333;
  color: #fff;
  border: none;
  cursor: pointer;
}

button:hover {
  background-color: #555;
}

#error-message {
  color: red;
}

javascript Kodu

.javascript

function signup() {
  var username = document.getElementById("username").value;
  var password = document.getElementById("password").value;
  
  // Check if username and password are not empty
  if (username === "" || password === "") {
    showError("Please enter both username and password");
    return;
  }
  
  // Store username and password in local storage
  localStorage.setItem("username", username);
  localStorage.setItem("password", password);
  
  // Clear the input fields
  document.getElementById("username").value = "";
  document.getElementById("password").value = "";
  
  // Show the welcome message
  showWelcomeMessage(username);
}

function login() {
  var username = document.getElementById("loginUsername").value;
  var password = document.getElementById("loginPassword").value;
  
  // Retrieve username and password from local storage
  var storedUsername = localStorage.getItem("username");
  var storedPassword = localStorage.getItem("password");
  
  // Check if the entered username and password match the stored values
  if (username === storedUsername && password === storedPassword) {
    // Clear the input fields
    document.getElementById("loginUsername").value = "";
    document.getElementById("loginPassword").value = "";
    
    // Show the welcome message
    showWelcomeMessage(username);
  } else {
    showError("Invalid username or password");
  }
}

function logout() {
  // Clear the stored username and password
  localStorage.removeItem("username");
  localStorage.removeItem("password");
  
  // Hide the welcome message and show the login and signup forms
  document.getElementById("welcome-message").style.display = "none";
  document.getElementById("signup-form").style.display = "block";

Kafanıza takılan yerler için yorumlar kısmından bana ulaşabilir ve sorularınızı sorabilirsiniz ve iletişim için burdan iletişim sayfasından iletişime geçebilirsiniz.

Yorum Gönder