Giriş

Merhaba, ben Şükrü.

Bu yazıda, Sasantek Savunma Teknolojileri bünyesinde yaptığım staj süresince üzerinde çalıştığım kurumsal web sitesi yenileme ve yönetim paneli geliştirme projesinden bahsetmek istiyorum.

Proje kapsamında mevcut web sitesinin daha modern, düzenli ve kullanıcı dostu bir yapıya kavuşturulması amaçlandı. Bunun yanında, web sitesinde bulunan ürün, haber, hizmet ve müşteri bilgilerinin daha kolay yönetilebilmesi için bir admin paneli geliştirildi.

Geliştirme sürecinde frontend tarafında React ve Vite, backend tarafında Node.js ve Express, veritabanı tarafında ise PostgreSQL kullanıldı.

Yazının devamında projenin amacını, kullanılan teknolojileri ve geliştirme sürecinde yaptığım çalışmaları paylaşacağım.

Projenin Amacı

Sasantek’in faaliyet alanlarını, ürünlerini ve hizmetlerini ziyaretçilere daha düzenli bir şekilde sunabilecek modern bir web sitesi oluşturmak projenin temel amaçlarından biriydi.

Mevcut yapı incelendikten sonra kullanıcıların site içerisinde daha rahat gezebilmesi, ürün ve hizmetlere daha kolay ulaşabilmesi ve firma hakkında gerekli bilgilere hızlı bir şekilde erişebilmesi için arayüz üzerinde çeşitli düzenlemeler yapıldı.

Bunun yanında site içerisinde kullanılan içeriklerin doğrudan kod üzerinden değiştirilmesi yerine, yetkili kullanıcıların admin paneli üzerinden içerikleri yönetebilmesi hedeflendi.

Kullanılan Teknolojiler

Projeyi geliştirirken aşağıdaki teknolojilerden yararlandım.

• React
• Vite
• JavaScript
• Node.js
• Express.js
• PostgreSQL
• React Router
• REST API
• JWT
• HTML
• CSS

Frontend tarafında React ve Vite kullanılarak web sitesinin kullanıcı arayüzü oluşturuldu. React Router sayesinde sayfalar arasındaki geçişler düzenlendi.

Backend tarafında Node.js ve Express kullanılarak frontend ile PostgreSQL veritabanı arasında bağlantı sağlayan API yapısı oluşturuldu.

Verilerin kalıcı olarak saklanması için PostgreSQL kullanıldı.

Sistemin Genel Yapısı

Proje temel olarak frontend, backend ve veritabanı olmak üzere üç ana bölümden oluşuyor.

Frontend kısmında kullanıcıların gördüğü web sitesi ve admin paneli bulunuyor. Backend kısmı frontend tarafından gönderilen istekleri karşılıyor ve gerekli işlemleri gerçekleştiriyor.

Veritabanı tarafında ise ürünler, haberler, hizmetler, müşteriler, mesajlar, kullanıcılar ve site ayarları gibi bilgiler PostgreSQL içerisinde tutuluyor.

Bu yapı sayesinde web sitesindeki bilgiler sabit kodlara bağlı kalmadan veritabanından alınarak dinamik şekilde gösterilebiliyor.

Web Sitesi Arayüzünün Geliştirilmesi

Frontend tarafında Sasantek’in kurumsal kimliğine uygun bir arayüz oluşturuldu.

Ana sayfa, kurumsal bilgiler, projeler, haberler, hizmetler ve iletişim gibi bölümler düzenlendi. Kullanıcıların farklı ekran boyutlarında da siteyi rahat kullanabilmesi için responsive tasarım üzerinde çalışmalar yapıldı.

Navigasyon menüsünde açılır menüler kullanılarak kullanıcıların farklı bölümlere daha kolay ulaşması sağlandı.

Ayrıca site içerisinde kullanılan bazı bilgiler backend üzerinden dinamik olarak alınacak şekilde düzenlendi.

Ürün ve Proje Yönetimi

Web sitesinin önemli bölümlerinden biri ürün ve proje tanıtımlarıdır.

Admin panel üzerinden yeni ürün eklenebilmesi, mevcut ürünlerin düzenlenebilmesi ve gerektiğinde silinebilmesi için gerekli API yapıları oluşturuldu.

Frontend tarafında ürünler PostgreSQL’den alınarak web sitesinde dinamik şekilde gösteriliyor.

Böylece yeni bir ürün eklemek için frontend kodlarının değiştirilmesine gerek kalmadan admin paneli üzerinden işlem yapılabiliyor.

Haber ve Hizmet Yönetimi

Benzer şekilde web sitesindeki haberler ve hizmetler de admin panel üzerinden yönetilebilir hale getirildi.

Admin kullanıcıları yeni haber veya hizmet ekleyebilir, mevcut içerikleri düzenleyebilir ve gerektiğinde silebilir.

Bu işlemler frontend ile backend arasındaki API bağlantısı üzerinden gerçekleştirilirken veriler PostgreSQL veritabanında saklanıyor.

Müşteri Yönetimi

Projede ayrıca Sasantek’in referans müşterilerinin yönetilebilmesi için bir müşteri yönetim bölümü oluşturuldu.

Admin panel üzerinden müşteri ekleme, düzenleme ve silme işlemleri gerçekleştirilebiliyor.

Müşteri bilgilerinin tamamının herkese açık şekilde paylaşılmaması için backend tarafında public ve admin erişimleri birbirinden ayrıldı. Genel web sitesinde gösterilmesi gereken bilgiler ayrı bir endpoint üzerinden alınırken, özel müşteri bilgileri yalnızca yetkili kullanıcıların erişebildiği API üzerinden getiriliyor.

İletişim Mesajlarının Yönetilmesi

Web sitesinde bulunan iletişim formu üzerinden ziyaretçiler tarafından gönderilen mesajlar backend’e iletilerek PostgreSQL veritabanına kaydediliyor.

Admin panelinde oluşturulan mesaj yönetimi bölümü sayesinde gelen mesajlar görüntülenebiliyor.

Mesajlar okundu, okunmadı ve silme gibi işlemlerle yönetilebiliyor. Ayrıca mesaj içerisindeki e-posta adresi kullanılarak doğrudan cevap gönderilebilmesi için e-posta bağlantısı da bulunuyor.

Site Ayarlarının Yönetilmesi

Projenin bir diğer bölümünde site üzerinde kullanılan genel ayarların admin panelinden yönetilebilmesi sağlandı.

Telefon, e-posta, adres, sosyal medya bilgileri ve bazı site içerikleri gibi bilgiler veritabanından alınarak web sitesinde kullanılacak şekilde düzenlendi.

Bu sayede iletişim bilgilerinde veya belirli site ayarlarında değişiklik yapılması gerektiğinde doğrudan kaynak koduna müdahale etmek yerine admin paneli kullanılabiliyor.

Giriş ve Yetkilendirme Sistemi

Admin panelinin herkes tarafından kullanılmasını engellemek amacıyla bir giriş ve yetkilendirme sistemi oluşturuldu.

Kullanıcı giriş yaptığında backend tarafından oluşturulan JWT token frontend tarafında saklanıyor ve yetki gerektiren API isteklerinde bu token kullanılıyor.

Backend tarafında bulunan authentication middleware’i gelen tokenı kontrol ederek isteği yapan kullanıcının yetkili olup olmadığını doğruluyor.

Bu yapı sayesinde ürün, haber, hizmet, müşteri ve ayarlar gibi yönetim işlemleri yalnızca yetkili kullanıcılar tarafından gerçekleştirilebiliyor.

Frontend ve Backend Bağlantısı

Projenin önemli bölümlerinden biri frontend ile backend arasındaki bağlantının kurulmasıydı.

Frontend tarafında oluşturulan api.js dosyası, backend’de bulunan API endpointlerine istek göndermek için kullanılıyor.

Örneğin admin panelinden yeni bir ürün oluşturulduğunda frontend tarafından backend’e bir POST isteği gönderiliyor. Backend bu isteği karşılayarak gerekli verileri PostgreSQL veritabanına kaydediyor.

Verilerin görüntülenmesi sırasında ise frontend backend’e GET isteği gönderiyor ve PostgreSQL’den alınan bilgiler web sitesinde kullanıcıya gösteriliyor.

Bu yapı sayesinde frontend doğrudan veritabanına bağlanmak yerine backend üzerinden kontrollü bir şekilde veri alışverişi gerçekleştiriyor.

PostgreSQL Veritabanı

Projede kalıcı veri saklama işlemleri için PostgreSQL kullanıldı.

Veritabanında ürünler, haberler, hizmetler, müşteriler, kullanıcılar, mesajlar ve site ayarları gibi farklı bilgiler için tablolar oluşturuldu.

Backend tarafındaki route dosyaları PostgreSQL ile bağlantı kurarak gerekli SQL sorgularını çalıştırıyor.

Bu sayede web sitesinde yapılan değişiklikler veritabanına kaydediliyor ve farklı zamanlarda site tekrar açıldığında bilgiler korunuyor.

Güvenlik Çalışmaları

Proje geliştirilirken temel güvenlik konularına da dikkat edildi.

Admin işlemlerinde JWT tabanlı authentication kullanıldı ve yetki gerektiren API endpointleri token kontrolüyle korundu.

Ayrıca frontend ve backend tarafında kullanıcı tarafından gönderilen verilerin kontrol edilmesi, güvenli API kullanımı ve hassas bilgilerin kaynak kodunda tutulmaması gibi konular üzerinde çalışıldı.

Çoklu Dil Desteği

Web sitesinde Türkçe ve İngilizce olmak üzere iki farklı dil seçeneği üzerinde de çalışıldı.

Navigasyon menüsü ve bazı site içerikleri seçilen dile göre değişecek şekilde düzenlendi.

Bu sayede sitenin farklı kullanıcı grupları tarafından kullanılabilmesi ve uluslararası ziyaretçilere daha uygun bir yapı sunması hedeflendi.

Sonuç

Bu proje benim için hem frontend hem de backend tarafını birlikte görmem açısından oldukça faydalı bir çalışma oldu.

Daha önce öğrendiğim React, JavaScript, SQL ve web geliştirme konularını gerçek bir proje üzerinde uygulama fırsatı buldum. Özellikle frontend ile backend arasındaki veri alışverişini, REST API yapısını ve PostgreSQL veritabanının bir web uygulaması içerisinde nasıl kullanıldığını daha iyi anlama fırsatı elde ettim.

Ayrıca sadece kullanıcıların gördüğü arayüzü değil, admin paneli, API yapısı, veritabanı, authentication ve içerik yönetimi gibi bir web sitesinin arka planda çalışan bölümlerini de inceleme ve geliştirme fırsatım oldu.

Staj süresince üzerinde çalıştığım bu projenin, gerçek bir yazılım projesinin geliştirme sürecini daha iyi anlamamı sağladığını ve ileride yapacağım çalışmalarda bana önemli katkılar sağlayacağını düşünüyorum.