Sadece kayıt ol ve giriş yap ekranı olan site nasıl yapılır?

z7y_michael

Decapat
Katılım
26 Şubat 2023
Mesajlar
253
Daha fazla  
Cinsiyet
Erkek
Merhaba bir web sitesi yapmam lazım, sadece login ve kayıt ol ekranı olacak bunu bir host yüklemem gerek. Okulda bu siteyi deneyeceğiz,
Nasıl yapacağız hiç fikrim yok, yazılım okumuyorum, hoca 100 puan vereceğim deyince aldım direkt. 🥲🤣 bilenler yardımcı olursa sevinirim.
 
chatGPT'ye veritabanlı, Nodejs backendli ve basit frondend tasarımlı bir login ve kayıt sistemi istiyorum de halleder. Host için glitch sitesine bakabilirsin Keşke bizdede böyle projeler olsa.
 
Merhaba bir web sitesi yapmam lazım, sadece login ve kayıt ol ekranı olacak bunu bir host yüklemem gerek. Okulda bu siteyi deneyeceğiz,
Nasıl yapacağız hiç fikrim yok, yazılım okumuyorum, hoca 100 puan vereceğim deyince aldım direkt. 🥲🤣 bilenler yardımcı olursa sevinirim.
Kod:
<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Giriş Yap / Kayıt Ol</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        .form-container {
            background-color: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            width: 300px;
        }
        .form-container h2 {
            text-align: center;
            margin-bottom: 20px;
        }
        .form-container label {
            font-size: 14px;
            margin-bottom: 5px;
            display: block;
        }
        .form-container input[type="text"],
        .form-container input[type="password"],
        .form-container input[type="email"] {
            width: 100%;
            padding: 10px;
            margin: 10px 0;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-sizing: border-box;
        }
        .form-container button {
            width: 100%;
            padding: 10px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            font-size: 16px;
            cursor: pointer;
        }
        .form-container button:hover {
            background-color: #45a049;
        }
        .form-container .forgot-password,
        .form-container .switch-form {
            text-align: center;
            margin-top: 10px;
            font-size: 12px;
        }
    </style>
</head>
<body>

    <div class="form-container" id="login-form">
        <h2>Giriş Yap</h2>
        <form action="/login" method="post">
            <label for="username">Kullanıcı Adı:</label>
            <input type="text" id="username" name="username" required>

            <label for="password">Şifre:</label>
            <input type="password" id="password" name="password" required>

            <button type="submit">Giriş Yap</button>
        </form>
        <div class="forgot-password">
            <a href="#">Şifrenizi mi unuttunuz?</a>
        </div>
        <div class="switch-form">
            <p>Hesabınız yok mu? <a href="#" onclick="toggleForm()">Kayıt Olun</a></p>
        </div>
    </div>

    <div class="form-container" id="register-form" style="display: none;">
        <h2>Kayıt Ol</h2>
        <form action="/register" method="post">
            <label for="email">E-posta:</label>
            <input type="email" id="email" name="email" required>

            <label for="new-username">Kullanıcı Adı:</label>
            <input type="text" id="new-username" name="username" required>

            <label for="new-password">Şifre:</label>
            <input type="password" id="new-password" name="password" required>

            <button type="submit">Kayıt Ol</button>
        </form>
        <div class="switch-form">
            <p>Zaten hesabınız var mı? <a href="#" onclick="toggleForm()">Giriş Yapın</a></p>
        </div>
    </div>

    <script>
        function toggleForm() {
            const loginForm = document.getElementById('login-form');
            const registerForm = document.getElementById('register-form');
            
            if (loginForm.style.display === 'none') {
                loginForm.style.display = 'block';
                registerForm.style.display = 'none';
            } else {
                loginForm.style.display = 'none';
                registerForm.style.display = 'block';
            }
        }
    </script>

</body>
</html>
 
1. HTML ile Temel Sayfa Yapısını Oluştur
Öncelikle, kullanıcıların kayıt olabileceği ve giriş yapabileceği HTML sayfaları oluşturman gerekiyor.
Kayıt Ol Sayfası (register.html)

<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kayıt Ol</title>
</head>
<body>
<h2>Kayıt Ol</h2>
<form action="/register" method="POST">
<label for="username">Kullanıcı Adı:</label>
<input type="text" id="username" name="username" required><br><br>
<label for="email">E-posta:</label>
<input type="email" id="email" name="email" required><br><br>
<label for="password">Şifre:</label>
<input type="password" id="password" name="password" required><br><br>
<button type="submit">Kayıt Ol</button>
</form>
</body>
</html>


Giriş Yap Sayfası (login.html)

<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Giriş Yap</title>
</head>
<body>
<h2>Giriş Yap</h2>
<form action="/login" method="POST">
<label for="email">E-posta:</label>
<input type="email" id="email" name="email" required><br><br>
<label for="password">Şifre:</label>
<input type="password" id="password" name="password" required><br><br>
<button type="submit">Giriş Yap</button>
</form>
</body>
</html>

2. Backend (Sunucu Tarafı) Kodunu Yaz

Bu aşama, kullanıcının kayıt ve giriş bilgilerini işleyecek olan backend kısmını içerir. Bu örnekte, Python ve Flask framework'ü kullanacağız. Ancak sen başka bir dil ve framework de seçebilirsin.
Flask Uygulaması ((app.py))

from flask import Flask, render_template, request, redirect, url_for

app = Flask(name)

# Basit bir kullanıcı veritabanı (gerçek projelerde veritabanı kullanılır)
users = {}

@app.route('/')
def home():
return redirect(url_for('login'))

@app.route('/register', methods=['GET', 'POST'])
def register():
if request.method == 'POST':
username = request.form['username']
email = request.form['email']
password = request.form['password']
# Veritabanına kaydetme işlemi burada yapılır (örneğin: users[username] = {'email': email, 'password': password})
users = {'username': username, 'password': password}
return redirect(url_for('login'))
return render_template('register.html')

@app.route('/login', methods=['GET', 'POST'])
def login():
if request.method == 'POST':
email = request.form['email']
password = request.form['password']
# Kullanıcının giriş bilgilerini kontrol et
if email in users and users[email]['password'] == password:
return "Giriş Başarılı"
else:
return "Hatalı e-posta veya şifre"
return render_template('login.html')

if [B]name[/B] == '[B]main[/B]':
app.run(debug=True)

[HEADING=2]3. [B]Kullanıcı Verisini Saklama[/B][/HEADING]
Bu örnekte kullanıcılar basit bir Python sözlüğü (dictionary) içinde saklanıyor. Gerçek projelerde veritabanı kullanılır (örneğin, MySQL, PostgreSQL veya SQLite).
Yukarıdaki Python kodunu bir dosya olarak kaydedip çalıştırabilirsin. Uygulama, lokal sunucunda ([ICODE]http://127.0.0.1:5000/[/ICODE]) çalışacaktır.
[LIST]
[*][B]Kayıt ol[/B]: Kullanıcı adı, e-posta ve şifre ile kayıt olabilecek.
[*][B]Giriş yap[/B]: Kayıtlı bir e-posta ve şifre ile giriş yapabilecek.[/SPOILER]
[/LIST]
 
Merhaba bir web sitesi yapmam lazım, sadece login ve kayıt ol ekranı olacak bunu bir host yüklemem gerek. Okulda bu siteyi deneyeceğiz,
Nasıl yapacağız hiç fikrim yok, yazılım okumuyorum, hoca 100 puan vereceğim deyince aldım direkt. 🥲🤣 bilenler yardımcı olursa sevinirim.
100 puan cepte hocam. Masaüstüne sağ tık yaparak yeni seçeneğine tıklayıp bir yazı dosyası (metin belgesi) oluşturunuz ardından dosyanın ismini index.html yapınız. İsmini değiştirdiğiniz html dosyasına sağ tık birlikte aç dedikten sonra not defterini seçmelisiniz eğer gözükmüyorza başka bir uygulama seç seçeneğine tıklayın ve not defterini seçin. Açılacak olan not defterine aşağıda vermiş olduğum kodu yapıştırıp ctrl+s yaptıktan sonra not defterini kapatınız. index.html dosyasına çift tıklayıp siteye erişebilirsiniz. Sen hiç bilmiyorum deyince çok temelden anlattım hocam.

Kod:
<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Kayıt Ol & Giriş Yap</title>
    <!-- Tailwind CSS CDN -->
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #1a1a1a;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            color: #e0e0e0;
        }

        /* Form Container */
        .form-container {
            width: 350px;
            border-radius: 1rem;
            background-color: #2c2c2c;
            padding: 2.5rem;
            color: #e0e0e0;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
            display: none;
        }
        .form-container.active {
            display: block;
        }
        .title {
            text-align: center;
            font-size: 1.75rem;
            line-height: 2rem;
            font-weight: 700;
            margin-bottom: 1.5rem;
        }
        .form {
            margin-top: 1.5rem;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .input-group {
            margin-top: 0.5rem;
            font-size: 0.875rem;
            line-height: 1.25rem;
            width: 100%;
            max-width: 300px;
        }
        .input-group label {
            display: block;
            color: #aaa;
            margin-bottom: 6px;
            text-align: left;
        }

        /* Textbox Tasarımı */
        .group {
            display: flex;
            line-height: 30px;
            align-items: center;
            position: relative;
            width: 100%;
            max-width: 300px;
        }
        .input {
            width: 100%;
            height: 45px;
            line-height: 30px;
            padding: 0 1rem;
            padding-left: 3rem;
            border: 2px solid transparent;
            border-radius: 1rem;
            outline: none;
            background-color: #3a3a3a;
            color: #e0e0e0;
            transition: .5s ease;
        }
        .input::placeholder {
            color: #94a3b8;
        }
        .input:focus, .input:hover {
            outline: none;
            border-color: #1e90ff;
            background-color: #3a3a3a;
            box-shadow: 0 0 0 5px rgba(30, 144, 255, 0.3);
        }
        .icon {
            position: absolute;
            left: 1rem;
            fill: none;
            width: 1rem;
            height: 1rem;
            stroke: #aaa;
        }

        .forgot {
            display: flex;
            justify-content: flex-end;
            font-size: 0.75rem;
            line-height: 1rem;
            color: #aaa;
            margin: 8px 0 14px 0;
        }
        .forgot a, .signup a {
            color: #e0e0e0;
            text-decoration: none;
            font-size: 14px;
        }
        .forgot a:hover, .signup a:hover {
            text-decoration: underline #509AF8;
        }
        .sign {
            width: 100%;
            max-width: 300px;
            background-color: #509AF8;
            padding: 0.75rem;
            text-align: center;
            color: #fff;
            border: none;
            border-radius: 1rem;
            font-weight: 600;
            cursor: pointer;
            transition: background-color 0.3s;
            margin-top: 20px;
        }
        .sign:hover {
            background-color: #3b7ed1;
        }
        .signup {
            text-align: center;
            font-size: 0.875rem;
            line-height: 1rem;
            color: #aaa;
            margin-top: 1.5rem;
        }
    </style>
</head>
<body>
    <!-- Kayıt Formu -->
    <div id="registerForm" class="form-container active">
        <p class="title">Kayıt Ol</p>
        <form class="form">
            <div class="input-group">
                <label for="regUsername">Kullanıcı Adı</label>
                <div class="group">
                    <svg stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon">
                        <path d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" stroke-linejoin="round" stroke-linecap="round"></path>
                    </svg>
                    <input class="input" type="text" name="username" id="regUsername" placeholder="Kullanıcı adınızı girin">
                </div>
            </div>
            <div class="input-group">
                <label for="regEmail">E-posta</label>
                <div class="group">
                    <svg stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon">
                        <path d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" stroke-linejoin="round" stroke-linecap="round"></path>
                    </svg>
                    <input class="input" type="email" name="email" id="regEmail" placeholder="E-postanızı girin">
                </div>
            </div>
            <div class="input-group">
                <label for="regPassword">Şifre</label>
                <div class="group">
                    <svg stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon">
                        <path d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" stroke-linejoin="round" stroke-linecap="round"></path>
                    </svg>
                    <input class="input" type="password" name="password" id="regPassword" placeholder="Şifrenizi girin">
                </div>
            </div>
            <button type="submit" class="sign">Kayıt Ol</button>
        </form>
        <p class="signup">Hesabın var mı?
            <a href="#" onclick="switchForm('login')">Giriş Yap</a>
        </p>
    </div>

    <!-- Giriş Formu -->
    <div id="loginForm" class="form-container">
        <p class="title">Giriş Yap</p>
        <form class="form">
            <div class="input-group">
                <label for="loginEmail">E-posta</label>
                <div class="group">
                    <svg stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon">
                        <path d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" stroke-linejoin="round" stroke-linecap="round"></path>
                    </svg>
                    <input class="input" type="email" name="email" id="loginEmail" placeholder="E-postanızı girin">
                </div>
            </div>
            <div class="input-group">
                <label for="loginPassword">Şifre</label>
                <div class="group">
                    <svg stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon">
                        <path d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" stroke-linejoin="round" stroke-linecap="round"></path>
                    </svg>
                    <input class="input" type="password" name="password" id="loginPassword" placeholder="Şifrenizi girin">
                </div>
                <div class="forgot">
                    <a href="#">Şifremi Unuttum?</a>
                </div>
            </div>
            <button type="submit" class="sign">Giriş Yap</button>
        </form>
        <p class="signup">Hesabın yok mu?
            <a href="#" onclick="switchForm('register')">Kayıt Ol</a>
        </p>
    </div>

    <script>
        function switchForm(form) {
            const registerForm = document.getElementById('registerForm');
            const loginForm = document.getElementById('loginForm');
            if (form === 'login') {
                registerForm.classList.remove('active');
                loginForm.classList.add('active');
            } else {
                loginForm.classList.remove('active');
                registerForm.classList.add('active');
            }
        }

        // Yeşil Başarı Bildirimi
        function showSuccess(message) {
            const notification = document.createElement('div');
            notification.setAttribute('role', 'alert');
            notification.className = 'bg-green-100 dark:bg-green-900 border-l-4 border-green-500 dark:border-green-700 text-green-900 dark:text-green-100 p-2 rounded-lg flex items-center transition duration-300 ease-in-out hover:bg-green-200 dark:hover:bg-green-800 transform hover:scale-105 fixed bottom-4 right-4 z-50';
            notification.innerHTML = `
                <svg stroke="currentColor" viewBox="0 0 24 24" fill="none" class="h-5 w-5 flex-shrink-0 mr-2 text-green-600" xmlns="http://www.w3.org/2000/svg">
                    <path d="M13 16h-1v-4h1m0-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" stroke-width="2" stroke-linejoin="round" stroke-linecap="round"></path>
                </svg>
                <p class="text-xs font-semibold">${message}</p>
            `;
            document.body.appendChild(notification);
            setTimeout(() => notification.remove(), 3000);
        }

        // Kırmızı Hata Bildirimi
        function showError(message) {
            const notification = document.createElement('div');
            notification.setAttribute('role', 'alert');
            notification.className = 'bg-red-100 dark:bg-red-900 border-l-4 border-red-500 dark:border-red-700 text-red-900 dark:text-red-100 p-2 rounded-lg flex items-center transition duration-300 ease-in-out hover:bg-red-200 dark:hover:bg-red-800 transform hover:scale-105 fixed bottom-4 right-4 z-50';
            notification.innerHTML = `
                <svg stroke="currentColor" viewBox="0 0 24 24" fill="none" class="h-5 w-5 flex-shrink-0 mr-2 text-red-600" xmlns="http://www.w3.org/2000/svg">
                    <path d="M13 16h-1v-4h1m0-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" stroke-width="2" stroke-linejoin="round" stroke-linecap="round"></path>
                </svg>
                <p class="text-xs font-semibold">${message}</p>
            `;
            document.body.appendChild(notification);
            setTimeout(() => notification.remove(), 3000);
        }

        // Mavi Bilgi Bildirimi (kullanılmadı ama hazır)
        function showInfo(message) {
            const notification = document.createElement('div');
            notification.setAttribute('role', 'alert');
            notification.className = 'bg-blue-100 dark:bg-blue-900 border-l-4 border-blue-500 dark:border-blue-700 text-blue-900 dark:text-blue-100 p-2 rounded-lg flex items-center transition duration-300 ease-in-out hover:bg-blue-200 dark:hover:bg-blue-800 transform hover:scale-105 fixed bottom-4 right-4 z-50';
            notification.innerHTML = `
                <svg stroke="currentColor" viewBox="0 0 24 24" fill="none" class="h-5 w-5 flex-shrink-0 mr-2 text-blue-600" xmlns="http://www.w3.org/2000/svg">
                    <path d="M13 16h-1v-4h1m0-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" stroke-width="2" stroke-linejoin="round" stroke-linecap="round"></path>
                </svg>
                <p class="text-xs font-semibold">${message}</p>
            `;
            document.body.appendChild(notification);
            setTimeout(() => notification.remove(), 3000);
        }

        // Turuncu Uyarı Bildirimi (kullanılmadı ama hazır)
        function showWarning(message) {
            const notification = document.createElement('div');
            notification.setAttribute('role', 'alert');
            notification.className = 'bg-yellow-100 dark:bg-yellow-900 border-l-4 border-yellow-500 dark:border-yellow-700 text-yellow-900 dark:text-yellow-100 p-2 rounded-lg flex items-center transition duration-300 ease-in-out hover:bg-yellow-200 dark:hover:bg-yellow-800 transform hover:scale-105 fixed bottom-4 right-4 z-50';
            notification.innerHTML = `
                <svg stroke="currentColor" viewBox="0 0 24 24" fill="none" class="h-5 w-5 flex-shrink-0 mr-2 text-yellow-600" xmlns="http://www.w3.org/2000/svg">
                    <path d="M13 16h-1v-4h1m0-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" stroke-width="2" stroke-linejoin="round" stroke-linecap="round"></path>
                </svg>
                <p class="text-xs font-semibold">${message}</p>
            `;
            document.body.appendChild(notification);
            setTimeout(() => notification.remove(), 3000);
        }

        // Kullanıcıları kontrol etmek için bir dizi
        let users = JSON.parse(localStorage.getItem('users')) || [];

        // Kayıt işlemi
        document.getElementById('registerForm').querySelector('form').addEventListener('submit', (e) => {
            e.preventDefault();
            const username = document.getElementById('regUsername').value;
            const email = document.getElementById('regEmail').value;
            const password = document.getElementById('regPassword').value;

            if (password.length < 6) {
                showError('Şifre en az 6 karakter olmalı!');
                return;
            }

            const userExists = users.some(user => user.username === username || user.email === email);
            if (userExists) {
                showError('Bu kullanıcı adı veya e-posta zaten kayıtlı!');
                return;
            }

            const user = { username, email, password };
            users.push(user);
            localStorage.setItem('users', JSON.stringify(users));
            showSuccess('Kayıt başarılı!');
            setTimeout(() => switchForm('login'), 1000);
        });

        // Giriş işlemi
        document.getElementById('loginForm').querySelector('form').addEventListener('submit', (e) => {
            e.preventDefault();
            const email = document.getElementById('loginEmail').value;
            const password = document.getElementById('loginPassword').value;

            const storedUser = users.find(user => user.email === email && user.password === password);
            if (storedUser) {
                showSuccess('Giriş başarılı!');
            } else {
                showError('E-posta veya şifre yanlış!');
            }
        });
    </script>
</body>
</html>
 
Son düzenleme:

Technopat Haberler

Yeni konular

Geri
Yukarı