Frontend Geliştirmede Yardıma İhtiyacım Var

[nt]

Selamlar

Django kullanarak komponent envanter programı geliştiriyoruz proje @taydin github reposunda.
Projemizi buradan GitHub reposunda bulabilirsiniz. Backend konusunda iyiyim, kendime güveniyorum.
Ancak frontend tarafında zorlanıyorum. Özellikle html css ve java konusunda zorlandığımı söyleyebilirim
kullanıcı arayüz oluşturma konusunda büyük sorunlar yaşıyorum proje için temelleri atmış olsamda bu başarılı bir tasarım olmadı.

index.html linki :https://github.com/timaydin/envanter/blob/main/envanter/envanter/teplates/index.html

özellikle yaşadığım sorunlar :
1. oluşturduğum komponent kayıt popup tasarımı (düzene girmesi gerekli)
2. komponent detaylarının olacağı popup oluşturmayı (ikinci bir popup açılmasını ve daha detaylı ayrınlıların burada yer almasını sağlamak)

Projemize ve mekatronik konusundaki uzmanlığınıza güvenerek, önerebileceğiniz yaklaşımları ve çözümleri merakla bekliyorum.

 

[koder]

slm. bunu satmak icin mi yapiyonuz? Yanlis anlasilmasin; eger sadece kendi ihtiyaciniz icinse havali gozukmesine gerek yok oyle popupmus mopuppus falan.

html, css, js, python dilleri hic hoslanmadigim diller, fanatik C' ciler buraya. Kiytirik bir envanter programi icin 5 tane dil

(sql yide sayarsak) kullaniyorsunuz. illa browserde calismasi gerekmiyorsa yazin C' ile olsun bitsin.

Bir kaleyi 5 tane comagin uzerine insa etmek gibi. Yarin bu dillerden/programlardan birinde guncelleme/versiyon degismesi

gibi bisey oldugunda sizin kod calismayacaktir. Kodu bi kere yazacaksin 100 yil dokunmayacaksin.Sattigini dusun: Zirt pirt

musteriler arayacak, calismiyo diyecek destek isteyecek.

Farkli diller icin Surukle-birak GUI-builder programlari var frontend icin. Bunlarin kimisi birkac dili destekliyor.

Mesela linux'ta GTK toolkit' in glade 'si var. Ben linux cuyum win tarafini hic bilmem. Ama bunu ben yapsam GUI toolkitleri

kullanmazdim. Onlar cok hantal; 50 tane bagimlilik istiyorlar. 5 comak olacak 50 comak. Bunu ben yazsaydim:

1-Sadece C ile yazardim. db kismini dahi kendim C ile implement ederdim. bu kadar basit veri icin sql neymis.

2- Server-client mimarisinde olacaksa. serveri de clienti de C ile yazar, hic html/js/browser karistirmadan bu ikisini direkt IP

socket ile konustururdum.

3- GUI yide en altta ne varsa onla yapardim. Linux 'ta /dev/fb var, veya libwayland-client.


Beyin firtinasi: Envanter Pragrami - Excel sayfasi olarak.

2 excel sayfasi olacak. Biri read-only asil nusya, digeri read-write kopya nusha. yazma islemlerini kopya uzerinde yapacan

isin bitince asilin korumasini kaldirip asili guncelliyecen sonra tekrar kitlicen. Verileri girme/ arama / otomatik renklendirme

icin makrolar yazarsin. server-client olacaksa ya csv ye cevirip yada cevirmeden browserden al-gonder yaparsin. Yada

koyarsin/musteri koyar Cloud a atar bir sifre kim naparsa yapar. Browsarlar icin csv pluginler vardir. Yani csv yi kendi

otomatik html tablosuna donusturup oyle goruntuler.

NOT: Bu arada bu ilk mesajim. uslubum yanlis anlasilmasin arkadaslar. Acik icimden geldigi gibi yazmayi seviyom.

 

[taydin]

C/C++ ile çok zor olur yav. Mesela QT ile yazdığını düşün. Her butonun, her input box'ın, her checkbox, her radio button davranışı için bir sürü angarya kod yazacaksın. C ile yazılmış en temel bir GUI'de kaç satır var, Node ile yazılımış programda kaç satır var? Bir de Node ile yazılan otomatik olarak client/server oluyor. C de bunun için atman gereke taklanın haddi hesabı yok. C'de en temel TCP server yazmak bile bir sürü ayrıntıyı içerisinde barındırıyor, yüzlerce satır kod demek.

C/C++ de yazarsın yazmasına, ama beynin %95 C/C++ nin ve protokollerin ayrıntılarıyla meşgul olur, veritabanındaki akış için çok az mental enerjin kalır gibime geliyor. Olay sadece veri girmek değil. Girilen veriler manipule edildiği zaman veritabanının bir bütün olarak istikrarlı kalmasını da sağlaman lazım. Mesela bir kategori veya saklama yeri silindi mi? İlgili bütün komponentlerin elden geçirilmesi lazım.

 

[Sercan]

Bence forumda kıymetli olan fikirlerdir. Uslubun seni bağlar...

Projeye gelecek olursak; ben çok uzun zamandır bu projeyi gerçekleştirmek istiyorum ama vakit bulamıyorum. Aslında otomatik veri içekme işlerini filan da bitirdirim ama sonuca bağlayamadım. Framework için aynı şeyi söyleyemem ama arayüzü html ile tasarlarsan ve 50 yıl sonra bile değişmez...

Benim için çok kolay işler ama vakit bulamayacağım için söz verip yarıda bırakmak istemiyorum. Zaten vakit bulsam yarım kalanı tamamlardım.

C bence çok daha zor olur.

 

[taydin]

Gömülü sistemlerde şöyle bir tecrübem olmuştu: Bluetooth çevre birimi var. Müşteri, akıllı telefonu ile bizim gömülü sistemi eşleştiriyor, sonra da akıllı telefondan müzik çalıyor, bizim sistemde de yükseltilip hoparlörlere veriliyor. Ama işin gıcık tarafı, eşleştirme sırasında default ayarda kullanıcıdan şifre soruyor. Bu şifre sorulmasını da müşteriler istemiyor, hemen bağlansın istiyorlar.

Normalde Linux'ta bu işler otomatik olarak çalışıyorken, böyle bir talep olunca işin ayrıntılarına bakmak zorunda kaldım. Linux'ta Bluetooth aygıtlarını yöneten Bluez diye bir server programı var. Bu program ile de iletişim kurmanın tek dokümante edilmiş yolu, D-Bus üzerinden XML mesajları göndermek. Yapılması gereken şu: D-Bus server'a bağlanacağız, bir mesajın gelmesini bekleyeceğiz, mesajdaki XML parse edilecek ve X mesajı ise, buna Y XML hazırlanacak ve D-Bus server'a verilecek. C'de program yazıdım. Günlerce uğraştım, çektiğim ızdırabın haddi hesabı yok, ve sonunda çalıştırdım. Yüzlerce satır kod, bir sürü değişik değişik API, birkaç tane ilave kütüphane kullanmak durumunda kaldım. Kütüphaneleri ilk defa kullanıyorum, açık kaynak olduğu için de dokümantasyon çok zayıf. Hata algılama ve ona göre davranma kodu da kendi başına yüzlerce satır tutuyor.

Sonradan benim yaptığım işin aynısını yapan bir python programı paylaşmış birisi github'da, tesadüfen karşıma çıktı. Kod toplamda 20 satır bile değil, ve benim programın yaptığı her şeyi yapıyor. İlave başka mesaj işleneceği zaman da birkaç satır eklemek yeterli oluyor

 

[ex_machina]

1-Sadece C ile yazardim. db kismini dahi kendim C ile implement ederdim. bu kadar basit veri icin sql neymis.

2- Server-client mimarisinde olacaksa. serveri de clienti de C ile yazar, hic html/js/browser karistirmadan bu ikisini direkt IP

socket ile konustururdum.

Bence C'ye de gerek yok. Direkt daş ve sopayla yapsınlar. Envanterdeki her malzeme bir malzeme için duvara bir sopa saplayıp, üstüne malzeme adedi kadar daş dizilir. Her malzeme alındığında bir tane daş eksiltilir. Öyle daha güzel olur sanki. Hem elektriksiz de çalışır.

Beyin firtinasi: Envanter Pragrami - Excel sayfasi olarak.

Excel mi? Yav bunu ben nasıl düşünemedim. Gerçekten çok güzel tavsiye. Bunu kesinlikle değerlendireceğim. Ama taş daha sağlam sanki bilemedim.

 

[koder]

Gencler niye eglenceye aliyonuz? Ben buyugum. Beyan ettigim fikir isabetsiz/kotu diye eglenceye almanizmi lazim.


NOT: Allah var, ben linux' u cok iyi bilirim. Arada bir forumda guzuksem bile bicok kisiye faydam dokunabilir. Lakin boyle

seylere maruz kalinca foruma uyrayasim gelmez.

 

[Sercan]

Herkesin kendi fikrini ifade etme uslubu var. 2 yıldır üye olduğun forumda, ilk mesajında aşağıdaki cümleyi kurup, ikinci mesajında insanların uslubunu sorguladığında, niyetin net anlaşılmıyor.

NOT: Bu arada bu ilk mesajim. uslubum yanlis anlasilmasin arkadaslar. Acik icimden geldigi gibi yazmayi seviyom.

Usluplar farklı olsa bile, "Biliyorum ama gönlümü eylemezseniz söylemem" edası ile nazlanmanın anlamlı olduğu bir ortamda değiliz.

Konuda bir yardım istemiş, katkı sağlayabilecek biri aranıyor. Bu yazışmalar ile katkı sağlamadığımız gibi konuyu da amacından saptırıp, varsa katkı sağlayabilecek birinin hevesini kırıyoruz.

---

NOT: Allah var, ben linux' u cok iyi bilirim. Arada bir forumda guzuksem bile bicok kisiye faydam dokunabilir.

Madem Linux konusunda bu kadar iyisin; Ben Linux'u kısmen kullanıyorum ama diğer taraftanda öğrenmek için oldukça meraklıyım. Onlarca Linux konusu geçti, bir faydan dokunacaksa gerçekten fikirlerini bilmek isterim.

Mesela daha 4-5 gün önce Debian 12 kurdum. Aşağıdaki 2 yıllık konuyu devam ettirme gayretindeyim...

Debian 10 ile Linux'a geçiş

Trump'u engelleyen bizi ne yapmaz? Şaka şaka. Konu o değil! Yaşam tarzım gereği işletim sistemi ayırt edemiyorum. İlla evde hepsinden olacak. Hali hazırda macOS hariç hepsi var. Fakat ana bilgisayarımda Windows 10 kurulu. Haliyle öncelikli kullandığım işletim sistemi de Windows oluyor. Bir...

mekatronik.org

 

[devreci]

Bu arkadaş neden zorbalanmış anlamadım, kendisi ters bir masaj atsa, karşılık olarak terslerseniz anlarım, bir fırsat yakaladığınızda insanları ezip orgazm oluyorsunuz galiba, ilginç bir yöntem .

Ayrıca çok haklı , bu kadar zamanda c de şanahe gui olan bir program çoktan yapılıp biterdi, ekrana listbox comboox vsvs oluşturmak bunu dizmek neden zor olsun for döngüsü denen bişey var, ayrıca hiç pencere oluşturmadan grafik olarak da verilebilir, bir ızgara oluşturmak neden zor olsun. Bahsettiğniz sistemler işleri çok kolaylaştıryıor tamam, bir özellik eklemek istiyorsun, bu nasıl yapılıyor diye bir hafta araştıracaksın.
Onbin tane tuşu olan klavye düşünün istermisiniz, tek tuşla işi bitiyorsun ama o tuşları öğrenmek problem konu tam olarak bu.

 

[nt]

slm. bunu satmak icin mi yapiyonuz? HAYIR SATMIYORUZ

html, css, js, DE YARDIM LAZIM

üstte yazdım lazımları küçük ya da büyük olabilirsin ama C zor bir dil onunla 40 saat verip 'komponent' isimli küçüçük şeylerin yerlerini belli edicek bir program yazmak yerine otur pythonda 5 ayrı program yaz o 40 saate artık devir değişti büyük abi.
Evet teknoloji değişiyor programında değişmesi lazım ileride
c ile yazında görelim nediyim

 

[taydin]

Aslında eğitim amaçlı olarak, yani C/C++ programlamayı öğrenme adına C/C++ de yazılabilir. Çok da öğretici olur. Ama zemane gençlerinde o sabır var mı emin değilim

 

[Hazel]

@devreci de o sabir var

 

[Sercan]

Aslında eğitim amaçlı olarak, yani C/C++ programlamayı öğrenme adına C/C++ de yazılabilir. Çok da öğretici olur. Ama zemane gençlerinde o sabır var mı emin değilim

Eskiden kahvehane köşesinde taş taşlayan gençlik vardı, bugün de internet başında yapılıyorlar aynısını. Belki önceki dönemin gençliği ile bugünün içindeki lazy grup oran aynı bile olabilir. Sonuçta kahvehanede yapılanın sayısal oranı bilinmiyordu. İnternet bu vehameti ortaya döküyor.

Fişek gibi gençler var, onlara odaklanmak lazım.

 

[Hazel]

aslinda class yapisi ile gayet guzel bir is yapilabilir, ogretici de olur, birara baslamistim cpp ve pgsql ile, yarim kaldi.

 

[devreci]

üstte yazdım lazımları küçük ya da büyük olabilirsin ama C zor bir dil onunla 40 saat verip 'komponent' isimli küçüçük şeylerin yerlerini belli edicek bir program yazmak yerine otur pythonda 5 ayrı program yaz o 40 saate artık devir değişti büyük abi.
Evet teknoloji değişiyor programında değişmesi lazım ileride
c ile yazında görelim nediyim

Madem bu kadar kolay neden yapamıyorsunuz

@devreci de o sabir var

Max 1 saatte bir kullanıcı arayüzü yapardım ama yapmıyacağım çünkü dalga geçiliyor

Eskiden kahvehane köşesinde taş taşlayan gençlik vardı, bugün de internet başında yapılıyorlar aynısını. Belki önceki dönemin gençliği ile bugünün içindeki lazy grup oran aynı bile olabilir. Sonuçta kahvehanede yapılanın sayısal oranı bilinmiyordu. İnternet bu vehameti ortaya döküyor.

Fişek gibi gençler var, onlara odaklanmak lazım.

Taş taşlayıcısı nedir ? , okey taşlarının yanlarını bevel mi yapıyordunuz birbirinizi yaralamayın diye, eğer C++ciler ile dalga geçiyorsan şu an yazılım öğrenen herkes phyton öğreniyor, yazık bu gençlere , c++ kod yazan kaç lazy boy gördünüz internette.

 

[Hazel]

@devreci yazacagini biliyorum, opengl ornegini hatirliyorum, bu onun yaninda telefon rehberi kalir.

 

[Altair]

Abijim C ne ya, uslubum boyle bu arada. Yannis annasilmasin. Mis gibi Assembly ya da direkt Hex olarak kodlamak varken neden C? Hem veritabani neymis, yaz metin dosyasina olsun bitsin. De mi yeaa.

Ustad o isler oyle olmuyor be. C ile yazdigini baska isletim sistemine, hatta ayni isletim sisteminin baska versiyonuna tasimak icin akla karayi seciyorsun. Ama simdiye kadar HTML-CSS ya da Python calistirmam diyen isletim sistemi gormedim. Hele SQL hakkinda gereksiz diye konusmak. Deux Machine carpar adami.

 

[nt]

Madem bu kadar kolay neden yapamıyorsunuz

Programı yaptık. Backend konusunda iyiyim, kendime güveniyorum.
Ancak frontend tarafında yardıma ihtiyacım var

 

[nt]

ikinci popup eklemek istediğim html bu yapabilen varsa yardımcı olsun ben yapınca çakışıyor
ikinci popup listedeki komponentin detaylarını açıcak
daha fazla bozmak istemiyorum html yi bozup tekrar yapa yapa öğrendim zaten

sanırım css ikincisinin kodları kaldı anlıyan varsa zaten bi bakışda çözerde

{% load static %}
<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Komponent envanter</title>
    <style>
        .emptyspace {
        margin: 10px;
        }
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #242424; /* Arka planı koyu renk */
            color: #fff; /* Yazı rengi beyaz */
        }
        header {
            background-color: #19182c;
            padding: 10px 0;
            text-align: center;
            transition: background-color 0.3s ease;
        }
        header:hover {
            background-color: #3d3863; /* Üzerine gelindiğinde yeni arka plan rengi */
        }
        nav ul {
            padding: 0;
            margin: 0;
            list-style: none;
            display: flex;
            justify-content: center;
        }

        nav li {
            margin: 0 20px;
        }

        nav a {
            text-decoration: none;
            color: #fff;
            font-weight: bold;
            font-size: 16px;
            padding-left: auto;
        }
        .container {
            max-width: 960px;
            margin: 0 auto;
            padding: 20px;
        }

        table {
            width: 100%;
            border-collapse: collapse;
        }

        th, td {
            padding: 10px;
            border: 1px solid #ddd;
            text-align: left;
        }
        .popup {
            font-size: 12px;
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            max-height: 85%;
            width: 800px;
            height: 600px;
            overflow-y: auto; /* Eğer içerik pop-up sığmazsa kaydırma çubukları görünsün */
            transform: translate(-50%, -50%);
            background-color: #6b6b6b;
            border: 1px solid #ddd;
            border-radius: 4px;
            padding: 20px;
            padding-left: 10px;
            padding-right: 20px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
        .popup form {
            display: grid;
            gap: 10px;
            padding: 20px;
            background-color: #2c2c2c;
            border-radius: 5px;
        }

        .popup label {
            display: block;
            padding: auto;
            font-weight: bold;
        }

        .popup input[type="text"],
        .popup input[type="number"],
        .popup textarea {
            width: 100%;
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }

        #add-component-popup {
            z-index: 999;
        }

        #close-popup {
            background-color: #333;
            color: #fff;
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            margin-top: 10px;
        }

        #close-popup:hover {
            background-color: #555;
        }
    </style>
</head>
<body>
    <header>
        <nav>
            <ul>
                <li><a href="#" id="open-popup">Yeni Parça Ekle</a></li>
                <div id="stock-table-container">
                    <form id="search-stock-form" method="GET" action="">
                        <label for="search-stock">Stok Ara:</label>
                        <input type="text" id="search-stock" name="search_stock">
                        <button type="submit">Ara</button>
                    </form>
            </ul>
        </nav>
    </header>
<div class="emptyspace"></div>

<div class="container">
    <table>
        <thead>
            <tr>
                <th>Kategori</th>
                <th>Model</th>
                <th>Parça Numarası</th>
                <th>Üretici</th>
                <th>Birim Fiyat</th>
                <th>Stok Miktarı</th>
                <th>Stok Yeri</th>
                <td>ohm</td>
                <td>W</td>
                <td>technic</td>
                <td>picture</td>
                <td>document</td>
            </tr>
        </thead>
        <tbody>
            {% for component in components %}
                <tr>
                    <td>{{ component.kategori }}</td>
                    <td>{{ component.model }}</td>
                    <td>{{ component.parca_no }}</td>
                    <td>{{ component.uretici }}</td>
                    <td>{{ component.birim_fiyat }}</td>
                    <td>{{ component.stok_miktar }}</td>
                    <td>{{ component.location_type }}</td>
                    <td>{{ component.ohm }}</td>
                    <td>{{ component.W }}</td>
                    <td>{{ component.technical_specifications }}</td>
                    <td>{{ component.picture_url }}</td>
                    <td>{{ component.document_url }}</td>
                </tr>
            {% endfor %}
        </tbody>
    </table>
</div>
    <div id="add-component-popup" class="popup">
        <h2>Yeni Komponent Ekle</h2>
        <form action="{% url 'parca_ekle' %}" method="post">
            {% csrf_token %}
            <label for="kategori">Kategori:</label>
            <select id="kategori" name="kategori" required>
            <option value="">Seçiniz</option>
            {% for category in categories %}
            <option value="{{ category.id }}">{{ category.name }}</option>
            {% for subcategory in category.category_set.all %}
            <option value="{{ subcategory.id }}">-- {{ subcategory.name }}</option>
            {% endfor %}
            {% endfor %}
            </select><br>
            <label for="model">Model:</label>
            <input type="text" id="model" name="model" required><br>
            <label for="parca_no">Parça Numarası:</label>
            <input type="text" id="parca_no" name="parca_no" required><br>
            <label for="uretici">Üretici:</label>
            <input type="text" id="uretici" name="uretici" required><br>
            <label for="birim_fiyat">Birim Fiyat:</label>
            <input type="number" id="birim_fiyat" name="birim_fiyat" step="0.01" required><br>
            <label for="stok_miktar">Stok Miktarı:</label>
            <input type="number" id="stok_miktar" name="stok_miktar" required><br>
            <label for="Stok Yeri">Stok Yeri:</label>
            <input type="text" id="location_type" name="location_type" required><br>
            <label for="Ohm">Direnç Ohm:</label>
            <input type="number" id="Ohm" name="Ohm" required><br>
            <label for="W">W:</label>
            <input type="number" id="W" name="W" required><br>
            <label for="teknik_ozellikler">Teknik Özellikler:</label>
            <textarea id="teknik_ozellikler" name="teknik_ozellikler" rows="4" cols="50" required></textarea><br>
            <label for="foto">Fotoğraf (URL):</label>
            <input type="text" id="foto" name="foto"><br>
            <label for="dokuman">Teknik Doküman (URL):</label>
            <input type="text" id="dokuman" name="dokuman"><br>
            <button type="submit">Parça Ekle</button>
        </form>
        <button id="close-popup">Kapat</button>
    </div>
    <footer>&copy;@mekatronik.org - Komponent Envanteri Uygulaması.</footer>
    <script>
        //JavaScript
        const openPopupBtn = document.getElementById('open-popup');
        const addComponentPopup = document.getElementById('add-component-popup');
        const closePopupBtn = document.getElementById('close-popup');

        openPopupBtn.addEventListener('click', () => {
        addComponentPopup.style.display = 'block';
});

        closePopupBtn.addEventListener('click', () => {
        addComponentPopup.style.display = 'none';
});
    </script>
</body>
</html>