Arkadaşlar tekliflerinize açığım...
Bu alıştırmanın sonunda, kullanıcı yöneticisi yeni kullanıcılar oluşturabilmeli ve başarılı bir oturum açtıktan sonra bunları gösterebilmelidir. Ayrıca, oturum açmış bir kullanıcı olarak kendi verilerinizi düzenleme ve kendinizi silme olanağına sahipsiniz. Kullanıcının özellikleri ad, soyad, kullanıcı adı ve şifreden oluşur.
Ayrıca kullanıcıların yanında ikinci bir kaynak daha olacak: Evcil hayvanları. Bunlar yalnızca hayvan türü ve adı niteliklerinden oluşur. Veritabanı daha sonra evcil hayvan için bir kullanıcı ataması da oluşturacaktır, ancak bu şu an için ihmal edilebilir düzeydedir.
Aşağıdaki içeriği içeren Bootstrap ile basit bir web sayfası tasarlayın. Kurs şablonunu buna göre genişletebilirsiniz.
Giriş için bir form (kullanıcı adı, şifre, buton)
Kayıt için bir form (ad, soyadı, kullanıcı adı, şifre, düğme)
Tüm kullanıcıları görüntülemek için bir tablo (ad, soyad, kullanıcı adı, silme ve düzenleme düğmeleri)
Kullanıcı verilerini değiştirmek için bir form (ad, soyad, şifre, onaylama ve iptal düğmeleri)
Yeni evcil hayvanlar oluşturmak için bir form (evcil hayvan türü, adı, düğmesi)
Tüm evcil hayvanları görüntülemek için bir tablo (evcil hayvan türü, adı, silinecek düğme)
Oturumu kapatmak için bir düğme
Frontend TypeScript kodunu zaten yazabilir veya kurs şablonunu hantal, işlevsel olmayan bir şekilde özelleştirebilirsiniz. Tüm formların, PreventionDefault'un ötesinde hiçbir şey(!) yapmayan bir sendevent işleyicisi olması yeterlidir. Ayrıca silme ve düzenleme düğmelerinin click event handler de tutmalısınız, ancak bunlar şimdilik işlevsiz kalacaktır. Yalnızca çıkış düğmesinin tıklama olay işleyicisi eklenir.
Kullanıcı tablosunu oluşturma işlevi 1:1 kullanılabilir, daha sonra bir ara adım olarak kullanılacaktır ve sona doğru gereksiz hale gelir, çünkü son adımda artık tüm kullanıcıları değil, yalnızca kendinizi görürsünüz. Bununla birlikte, evcil hayvan tablosunu buna göre görüntülemek için biraz uyarlanmış işlevi kopyalayabilirsiniz.
REST INTERFACE
Daha sonraki sunucu RESTful olmalıdır, yani REST kurallarına uymalıdır. Kullanıcılar ve evcil hayvanlar için HTTPRequests ve -yanıtlarının nasıl görünmesi gerektiğini dikkatlice düşünün!
Hiçbir proje ilk denemede hatasız çalışmaz - hatasız olması bir yanılsama olabilir. Bu nedenle, kendi projenizi kapsamlı bir şekilde test etmek daha da önemlidir. Teste Dayalı Geliştirme terimi, önce testleri tasarlama ve ardından testleri geçen kodu yazma geliştirme sürecidir. Bu bölümdeki göreviniz de aynı. Projenizde bir .http dosyası oluşturun ve en azından aşağıdaki durumlar için istekleri formüle edin:
Kullanıcı oluşturma, okuma, düzenleme ve çizme
Bir evcil hayvan oluşturun, düzenleyin ve silin
Var olmayan bir kullanıcıyı okuyun, düzenleyin ve silin
Var olmayan bir evcil hayvanı okuyun ve silin
Mevcut bir kullanıcı oluşturma (aynı kullanıcı adıyla)
Mevcut bir evcil hayvan yaratmak (aynı isimle)
Ek olarak, tüm standart kasaları örn. eksik nitelikler (soyadı gönderilmedi), boş nitelikler (doldurulmamış alanlar) veya sözdizimsel olarak yanlış istekler (JSON yanlış yazılmış).
Ayrıca giriş ve çıkış bilgilerinizi de kontrol etmelisiniz (doğru, yanlış, eksik, boş verilerle). Mümkün olduğu kadar çok test tuzağı yazın! Ne kadar doğru test yaparsanız, hata ayıklamayı bulmanız o kadar kolay olur. Yaratıcı olun ve sunucunuza iletilebilecek tüm çılgın şeyleri düşünün. Örneğin, kötü niyetli girdileri vb. düşünün.
RESTful SERVER
İki kaynak kullanıcısının ve evcil hayvanın CRUD işlevlerini destekleyen tek yol olan bir ekspres sunucu yazın. URL'lerin adlandırılmasının ve
parametreler gibi görünmelidir. Veri yapıları olarak dizileri veya haritaları kullanabilirsiniz, bu sayede işleme açısından kurs şablonundaki haritalar önerilir.
Sunucunuzu kendi testlerinizle test edin. Standart tuzaklar işe yarıyor mu? Kapsamlı hata tuzakları da doğru hata kodunu veriyor mu? Giriş ve çıkış testleri şimdilik ihmal edilebilir.
Webserver ve AJAX
Sunucunuzun, istemciye dosya (HTML, JS, CSS, vb.) teslim edebilmesini de sağlayın.
Artık Webstorm'daki tarayıcı simgesine tıklamadan web sitenize tarayıcıdan erişebiliyorsanız, bir web sunucusunu başarıyla programladınız!
Şimdi ön ucun arka uçla, yani istemci ile sunucuyla iletişim kurmasına izin vermelisiniz. Bunun için gerekli form verilerini okumak için her eşitleyiciye yazarsınız (kurs şablonuna bakın) ve ilgili bir AJAX isteği yazmak için Axios aracılığıyla ilgili bir AJAX isteği yazarsınız. Bu aynı zamanda olası hataları uygun şekilde çıkarabilmelidir. Bunu nasıl yapacağınız size kalmış. Artık Usermanager'ı tamamen işlevsel olarak kullanabilmelisiniz. Bu, oturum açma ve oturumu kapatmanın yanı sıra kullanıcılar ve evcil hayvanlar için CRUD işlevlerinin tam olarak uygulandığı anlamına gelir.
Oturum Yönetimi
Oturum yönetimi ile ön uçta küçük bir sarsıntının ilk aşaması gelir: Tüm kullanıcı verilerinin listesi yalnızca kendi verilerinizin bir görünümü olmalıdır. Bunun için kullanıcı tablosunu ve kullanıcı verilerini değiştirmek için formdaki iki butonu tamamen silebilirsiniz.
İşlem şu şekilde olacaktır: Bir kullanıcı web sitesini çağırır, ancak oturum açma alanında hiçbir şey görünmez. Başarılı bir giriş yaptıktan sonra giriş alanı kaybolur ve sayfanın geri kalanı görünür hale gelir. Kullanıcı kullanıcı verilerini değiştirme formu, kullanıcının öznitelikleri ile zaten doldurulmuştur (ancak şifre değil), ancak tamamen kilitlenmiştir (değiştirilemez). Yalnızca düzenle düğmesine tıklandığında ad ve şifre alanlarının kilidi açılır ve değiştirilebilir. Sil butonu o anda oturum açmış olan kullanıcıyı tamamen siler, tekrar kayıt olması gerekirdi. (Son silme işleminden önce bir onay isteğe bağlı olacaktır).
Sunucu tarafında, oturum açma ve oturum kapatma yollarını uygularsınız ve yeni kullanıcıların yeni kaydı dışında tüm CRUD işlevlerinin yalnızca oturum açmış kullanıcılar tarafından kullanılabilir olduğundan emin olursunuz. Oturum açma yoluyla sunucu aniden bağlam kazanır, yani kimin sorduğu hakkında bilgi. Bu, kullanıcının
Kullanıcının RUD rotaları, oturum açmış kullanıcının sadece kendisine veya yasak olan diğerlerine erişmek isteyip istemediği de test edilebilir.
Database ve Görev
Kullanıcılar ve evcil hayvanlar için iki tablo içeren yeni bir veritabanı oluşturun. Birincil anahtar, evcil hayvanın kullanıcı adı veya adıdır. Evcil hayvan tablosunda, kullanıcı adına bir yabancı anahtar da belirtebilirsiniz. Böylece evcil hayvan bir efendi veya metresi, yani bir xe ataması alır.
Bu adımda sunucudan alınan verinin tamamı dizi veya harita üzerinden veritabanına aktarılacaktır. Bunu yapmak için önce dizinizi veya haritanızı sunucudan tamamen silin. Şimdi kırmızı parlayan hatalar, tam olarak şimdi veritabanı ile iletişim kurmanız gereken yerlerdir. Sunucudaki veritabanınızla bağlantıyı sunucuda kurun ve sorgu işleviyle bir SQL sorgusu uygulayın. Sorgularınızın SQL enjeksiyonlarına duyarlı olmadığından emin olun! Pet'in kullanıcıya yeni atanması nedeniyle artık sadece kullanıcıya ait olan petlere kullanıcıya ait olarak erişim sağlanabilmektedir. Lütfen SQL ifadenizde (komut) buna göre kontrol edin.
Bir kullanıcı kullanıcı adı ve şifre ile kayıt olabilir
Kayıtlı bir kullanıcı kullanıcı adı ve şifre ile giriş yapabilir
Kayıtlı bir kullanıcı verilerini değiştirebilir
Kayıtlı bir kullanıcı, tür ve adla evcil hayvanlar oluşturabilir
Kayıtlı bir kullanıcı, yarattığı evcil hayvanlarını silebilir
Kayıtlı bir kullanıcı oturumu kapatabilir
Kayıtlı bir kullanıcı kendini kalıcı olarak silebilir
Kullanıcılar ve evcil hayvanlar hakkındaki tüm veriler kalıcı olarak bir veritabanında saklanır
Tüm veriler, kimliği doğrulanmamış ve yetkisiz erişimlerden korunmalıdır.
REST kurallarına uyulmalıdır
Kod kalitesi (TypeScript'te doğruluk, HTML'de iyi yapı, güvenli SQL sorguları)
Önyüzün tasarımı (görsel görünüm ve Bootstrap'in temiz kullanımı)
Testler (sayı ve yaratıcılık)
Git (sürekli taahhütler ve izlenebilir adımlar)
Bağlantılı birincil anahtarlar (Bir evcil hayvanın adının yalnızca kullanıcı başına benzersiz olması gerekiyorsa)
Script Proje
4
●163
- 29-07-2021, 18:32:29Üyeliği durdurulduMerhaba profilimdeki whatsapptann ulaşabilirsiniz istediğiniz özellikleri yapabilirim
- 29-07-2021, 18:42:32arayüz tasarımı bandında projeye destek olabilirim 😊
https://behance.net/esrefyasa - 31-07-2021, 14:11:03Hepsini tamamen yapacak birini arıyorum maalesefesrefyasa adlı üyeden alıntı: mesajı görüntüle
