Web arayüzü geliştirme yardım(taktik ihtiyacı)

Gokrtl · 5 Ocak 2024

İnputun içinde required yazıyor. Onu kaldırınca düzelmesi lazım.

Gokrtl · 5 Ocak 2024

o parola ya da kullanıcı adının zorunlu olması değilmi kodumu ekliyorum Ustaaaaa

help sos

HTML:

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="shortcut icon" type="image/x-icon" href="{% static 'favicon.ico' %}">
    <title>Giriş Sayfası</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: Arial, Helvetica, sans-serif;
        }
        body {
            background: url('/home/n/Desktop/3.jpg') no-repeat center center fixed;
            background-size: cover;
        }
        .container {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
        }
      
        .form {
            background-color: #ffffffe1;
            padding: 40px;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
            width: 400px;
        }
      
        .form-title {
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 20px;
            text-align: center;
        }
      
        .form-group {
            margin-bottom: 20px;
        }
      
        .form-group label {
            display: block;
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 10px;
        }
      
        .form-group input {
            width: 100%;
            padding: 10px;
            font-size: 16px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
      
        .form-group .password-group {
            position: relative;
        }

        .form-group .password-group input {
            width: calc(100% - 30px);
        }

        .form-group .password-group .password-toggle {
            cursor: pointer;
            position: absolute;
            top: 10px;
            right: 10px;
        }

        .form-group input[type="submit"] {
            background-color: #333;
            color: #fff;
            cursor: pointer;
        }
      
        .form-group input[type="submit"]:hover {
            background-color: #555;
        }
      
        .form-group .form-text {
            font-size: 14px;
            color: #888;
            margin-top: 5px;
        }
    </style>
</head>
<body>
    <div class="container">
        <form class="form" action="{% url 'login' %}" method="POST" onsubmit="return validateForm()">
            {% csrf_token %}
            <h2 class="form-title">Kullanıcı Girişi</h2>
            <div class="form-group">
                <label for="username">Kullanıcı Adı veya E-posta:</label>
                <input type="text" id="username" name="username" required>
            </div>
            <div class="form-group">
                <label for="password">Şifre:</label>
                <div class="password-group">
                    <input type="password" id="password" name="password" required>
                    <span class="password-toggle" onclick="togglePasswordVisibility()">&#128584;</span>
                </div>
            </div>
            <div class="form-group">
                <input type="submit" value="Giriş Yap">
                <p class="form-text">Hesabınız yok mu? <a href="{% url 'register' %}">Kaydol</a></p>
            </div>
        </form>
    </div>

    <script>
        function togglePasswordVisibility() {
            var passwordField = document.getElementById('password');
            if (passwordField.type === 'password') {
                passwordField.type = 'text';
            } else {
                passwordField.type = 'password';
            }
        }
        function validateForm() {
            var usernameField = document.getElementById('username');
            var passwordField = document.getElementById('password');

            if (usernameField.value.trim() === '' || passwordField.value.trim() === '') {
            alert('Kullanıcı adı ve şifre boş olamaz.');
            return false;
    }

           
            if (passwordField.value.trim().length < 6) {
            alert('Şifre en az 6 karakter olmalıdır.');
            return false;
    }

    return true;
}
    </script>
</body>
</html>

Aynı şey işte. Boş olamaz anlamına geliyor. Eğer sen js ile yaptıysan ona gerek yok.

taydin · 5 Ocak 2024

Böyle tek HTML dosyasına hem HTML, hem CSS, hem de javascript tıkılmaz yav :cheeky5:

code penceresi bile kafayı yemiş, nasıl renklendireceğini bilememiş.

Bunların hepsi ayrı dosyalara konur. index.html, osm.css, osm.js. Sonra da HTML dosyasında bunları tanıtırsın

HTML:

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <title>OSM</title>
    <script type="text/javascript" src="osm.js"></script>
    <link type="text/css" rel="stylesheet" href="osm.css">
  </head>
  <body>
      ......
  </body>
</html>

Gokrtl · 5 Ocak 2024

nt dedi ki:
req. sildiğimde ekranın ortasında kocaman uyarı cıkıyor böyle devam zaten timur abi diyordur hayırdır maymunlar falan

O maymunlara bende takıldım da sorunu çözdükten sonra dillendirecektim.

Gokrtl · 5 Ocak 2024

nt dedi ki:
Biraz öğreniyim abi, onları başaramam şuanda ancak bu şekilde.

Onda bir şey yok yav. Timur abi zaten hazır kodu vermiş. Yeni bir sayfa açacaksın. Sonuna .html yerine .js yazacaksın. İçinede js kodlarını yapıştırıp kaydedeceksin o kadar. Css de aynı.

132kHz · 5 Ocak 2024

nt dedi ki:
abi aslında istediğimi yapamadım aslında :
şifre ******* iken gözünü kapatan maymun
şifre aaaaa iken agzını kapatan maymun du olmadı nasip artık

Şifreyi yazarken tek gozunu aralayan durunca kapatan maymun da yapabilirsin :katil2:

132kHz · 5 Ocak 2024

böyle bir örnek var ama uzun gözüküyor önce bi proje bitsin de sonra ugrasmak istersen :katil2:

Gokrtl · 6 Ocak 2024

Omega · 6 Ocak 2024

nt dedi ki:
@Gokrtl css usta sayfadan taşıyor tablo, resim dersinide sevmezim zaten

İşte bunun için Farnelin Özdisan ın web sitelerinde herbir field(Alan ) için kaç karakter ayrılmış incelemeniz lazım
Örneğin aşağıdaki Adet kısmına neredeyse 20 karakter/sayılık alan alan ayrılmış.Oysa ençok 8 karakter(99 999 999 Yani doksandokuz milyo dokuzyüzdpksandokuz bin dokuzyüz doksandokuz adet) yeterde artar bile
Ayrıca Field verilen ismi başka ,Name kısmı başka tanımlanabilir.Yani o kadar uzun ismin ekranda görünmesine gerek yok
Buna göre tüm fieldlara uygun genişlikler tanımlayın

Omega · 6 Ocak 2024

hangi ksımını anlamadınız?

Omega · 6 Ocak 2024

Bu program ne iş görecek?
Kişinin elindeki komponentlerin sayısını gösterecek.Aradığı bir malzemeyi internetteki online sitelerden bulacak
Farnell Amerikan komponent satıcısı,yapılmak istenen programın mükemmeli adamların web sitesinde çalışır durumda var,Özdisasan da meşhur bir türk komponent tedarikçisi onda da çalışan örnek var.

Field (Alan/saha) Veritabanı fieldlarlardan oluşur, Bunlar Nümerik,Alfnumeric,Memo,Logic vs birçok türde olabilir.programcı bunun adını ,türünü ve genişliğini tanımlar.
Örneğin :
PERSONEL.DB
personel_name ... Character.......25
personel_surname....Character....25
personel_name programlamada kod satırında derleyicinin database de aradığı isimdir
Name satıırında ekranda siz Buna "Pers.Ad/Soyad" gibi ona ayrılan şekilde kısaltabilirsiniz
Eğer siz Personel Ada 255 karakter soyadada 255 karakter ayırırsanız o bilgi ekrana sığmaz

@nt
Mesela @taydın veritabanınıda ,fieldlarıda anahtarlarıda tasarlamış işte
Fieldların adı uzunluğu da tanımlanmış demektir size o kadar ekranda alan ayıracaksınız

https://mekatronik.org/forum/threads/komponent-stok-takip-sistemi-icin-veritabani-tasarimi.4588/

Omega · 6 Ocak 2024

@taydin a soracaksınız hangi fieldlar,hangi bilgilere karşılık ,türü ne ?,kaç karakter ayrıldı
Alanların soldan sağa hangi sırada olması mantıklı olur o karar verilecek ,tepesinde yazan türkçe adlandırmalara karar verilecek

Programda da trim Component_name 18 falan gibi bir syntaxla bu isimleri aralarında ;(nortalı virgülü olur ,yoksa göreselmi olur teker teker yazacaksınız

Omega · 6 Ocak 2024

%30 küçültmekle bu sorunlar aşılmaz
Excelde mesela soldaki bazı alanları kilitlersiniz o bilgi örneğin malzeme kodu sabir kalır,satırı sağa doğru kaydırırsınız hepsini görürsünüz

Omega · 6 Ocak 2024

nt dedi ki:
@Omega ozaman neden bana 3-5 firma ismi yazıp field alan yazdınız ?
programın nasıl çalıştığınımı anlatıyım yoksa bu işimi bitiriyim söz bitirdiğimde size özel bir sunum hazırlıyacağım.

hangi 3-5 firma yazdım

Omega · 6 Ocak 2024

özdisan sizin uğraştığınız programın örneği web sitesinde olan firma ,tıpkı farnell veya mouser gibi
Anlamak için onların sitelerinde her bir bilgiye kaç karakter ayırmışlar bakın dedim

taydin · 6 Ocak 2024

@nt Her zaman basitten zora gitmen lazim. Sen en başta en zoru yapmaya çalışıyorsun.

Her bir sütun için mantıklı bir alan ayır ve tek satırda komponent parametrelerini yazdır. Tarayıcı zaten yatay scroll bar koyacak, sağdaki alanlara bakmak isteyen scroll etsin sağa.

Sorgu için de özdisan, mouser, digikey deki filtrelere gerek yok şu anda. Tek bir input box'ta SQL sorguyu yazalım. Sorgunun altında da komponentler listelensin.

Omega · 6 Ocak 2024

Yav ben zaten filtreleri için söylemiyorum.Orada herbir farklı komponent için bile farklı filitreler var
Ben kaçar karakter ayrılmış ona bak diyorum
@nt işi yapmak istiyorda Veritabanı hakkında da çok bilgisi yok.

taydin · 6 Ocak 2024

Zaten %90 sorguların şekli belli olacak. Tüm komponentleri listele

SQL:

SELECT * from components

MOSFET lerimi listele

SQL:

SELECT * from components WHERE category='MOSFET'

taydin · 6 Ocak 2024

Omega dedi ki:
Ben kaçar karakter ayrılmış ona bak diyorum

Bakmaya da gerek yok. Komponent model numaralarını kafanda canlandır: BC547, CD4046, STM32F103C8T6. Kaç karakter aryırırsın? Ben 15 karakter yeter diyeyim, sen 20 karakter olması lazım de.

Omega · 6 Ocak 2024

taydin dedi ki:
Bakmaya da gerek yok. Komponent model numaralarını kafanda canlandır: BC547, CD4046, STM32F103C8T6. Kaç karakter aryırırsın? Ben 15 karakter yeter diyeyim, sen 20 karakter olması lazım de.

Ben canlandırıyorumda Timur cum önemli olan @nt nin canlandırması :katil1:

Web arayüzü geliştirme yardım(taktik ihtiyacı)

Gökhan Kartal (TeknoDay)

Gökhan Kartal (TeknoDay)

Timur Aydın

Gökhan Kartal (TeknoDay)

Gökhan Kartal (TeknoDay)

Kıdemli Üye

Kıdemli Üye

Gökhan Kartal (TeknoDay)

Kıdemli Üye

Kıdemli Üye

Kıdemli Üye

Kıdemli Üye

Kıdemli Üye

Kıdemli Üye

Kıdemli Üye

Timur Aydın

Kıdemli Üye

Timur Aydın

Timur Aydın

Kıdemli Üye

Forum istatistikleri

Bu sayfayı paylaş