Projem öğrenci katılım analizi, kısaca bir öğrencinin ve öğretmenin derslerini takip edebileceği bir sistem. Web ve mobil olarak tasarlandı. Web tarafında django framework ve admin paneli kullanıldı. Ön yüz tarafta birçok modül kullanıldı bootstrap, css, html, jquery, websocket gibi ana başlıklardaki teknolojiler kullanıldı. Mobil tarafta ise flutter kullanıldı. Mobil taraftaki iletişim django rest framework ile api aracılığıyla sağlandı.
Belli kullanıcı izinleri oluşturuldu. İzinler Öğrenci ve öğretmen olarak ikiye ayrılıyor. Ve bunun içindeki mantıksal yapı ise öğrenci sadece kayıtlı olduğu dersin modüllerine erişebilir. Öğretmen sadece kendi dersinin modüllerini günceller, siler oluşturur gibi kurallar var. Örneğin yoklamayı sadece o dersin hocası oluşturup içeriğini görebilir ve yoklamaya katılım ise sadece o derse kayıtlı öğrenciler tarafından alınabilir. Başka bir dersin öğrencisi qr kodu okuttuğunda o derse kayıtlı olmadığı için uyarı mesajıyla karşılar. Url kısmındaki izinleri yani kullanıcı kayıtlı olmadığı dersin koduyla url‘ den dahi erişemez.
Bu çalışmada kullanılmış kullanıcı izinleri öğretmen, öğrenci ve admin olarak 3 tanedir.
Web sitemizde admin, öğretmen ve öğrenci olmak üzere 3 adet izin kısıtlaması bulunuyor. Url kısmındaki izinleri yani kullanıcı kayıtlı olmadığı dersin koduyla url‘ den dahi erişemez.
Admin panelindeki yönetimden sorumlu kişidir ve admin panelinde veri tabanı modüllerine erişebilir. Ve gerekli güncellemeleri yapar.
Giriş, kayıt işlemleri. Ders, yoklama, duyuru, etkinlik oluşturma, güncelleme ve silme gibi yönetim işlemlerini yapabiliyor. Ders ekranında ise derse pdf veya excel gibi dosya yükleme işlemleri yapabiliyor. ilgili derse girip websocket bağlantısıyla derse katılanları görebilme ve anlık mesaj iletebilme.
Giriş, kayıt işlemleri. derse kayıt, yoklamaya katılma, duyuruyu okuma, etkinliğe katılma. gibi sadece okuma yapabildiği modüller var. Ve qr kodu okutabilme özelliği. ilgili derse girip websocket bağlantısıyla derse katılanları görebilme ve anlık mesaj iletebilme.
Mobil uygulamada ise sadece öğretmen ve öğrenci izinleri bulunmakta.
Giriş, kayıt işlemleri. Ders, yoklama, duyuru, etkinlik oluşturma, güncelleme silme gibi yönetim işlemlerini yapabiliyor.
Giriş, kayıt işlemleri, derse kayıt, yoklamaya qr kod ile kayıt ekranı erişimi, etkinliğe katılma, duyurularını görme.
Burada belirtmek istediğim ana sayfa ve üstte bulunan navbar kısmında belli kullanıcı izinleri bulunuyor. Kullanıcının giriş yapıp yapmadığı veya yoklamalar, ve dashboard navigate işlemlerini erişemiyor.
Şekil 2.1--1 Ana sayfa içeriği.
Giriş Yapılmış olan navigation bar da bu şekilde içerikler gelir.
Şekil 2.1--2 Giriş yapılmış kullanıcı için navbar paneli.
Giriş işlemi kullanıcıyı sisteme dahil eder kayıtlı değil ise uyarı ile bilgi verir.
Şekil 2.2--1 Giriş ekranı.
Kayı işleminde öğretmen veya öğrenci kaydı yapılabiliyor.
Şekil 2.3--1 Kayıt olma ekranı.
Dersler bölümünde yine kullanıcı izinlerine bağlı olarak değişen özellikler mevcut. Sisteme giriş yapmamış kullanıcı için sadece sistemdeki ders listesini görebiliyor. Eğer sisteme giriş yapmış ise kullanıcı öğretmen veya öğrenci olması durumuna göre ders ekle butonu gözüküyor. Eğer kullanıcı derse kayıt olmuşsa ders içeriği ve kayıtlı değilse derse kayıt ol butonu gösteriliyor.
Şekil 2.4--1 Sisteme giriş yapılmamış dersler listesi.
Öğretmen girişi mevcut ise aşağıdaki gibi bir sayfa gözüküyor burada ders oluştur butonu var.
- Öğretmen girişi yapılmış.
- Ders oluştur butonu sadece öğretmen ise gözükür.
- Kayıtlı olduğu dersin içeriğini görebilme.
Şekil 2.4--2 Öğretmen girişi yapılmış olan dersler bölümü.
Öğrenci girişi yapılmış bir kullanıcının dersleri gördüğü sayfa.
- Dersler sayfası listeleniyor.
- Kullanıcı girişi.
- Derse kayıtlı ise ders içeriği görme butonu.
- Derse kayıtlı değilse kayıt ol butonu.
Şekil 2.4--3 Öğrenci girişi yapılmış dersler bölümü.
Ders detayın da en önemli unsun websocket bağlantısının olması. Kullanıcılar derse giriş yaptıklarında sisteme dahil olurlar ve online olan kişiler otomatik herkeste eşzamanlı olarak gösterilir. Mesaj iletme bölümü de gönderilen mesaj herkese eşzamanlı olarak iletilir. Böylece websocket bağlantısıyla sistemde aynı anda aktif bulunmaktayız.
Dersin öğretmeni derse eriştiği zaman ilk önce websocket çalışıyor ve online listesine ekleniyor. Resimdeki içerikler şu şekildedir.
- Öğretmenin giriş yaptığı bilgisi.
- Online kullanıcılar listesi. Öğrenciler sisteme aktif olduklarında bu liste yenileniyor ve herkes tarafından anlık gösteriliyor. Ve bağlantı kopukluğunda kırmızı bir sinyal ile bağlantının kesildiği gösteriliyor. Şu anda yeşil yanıp sönmekte.
- Anlık mesajlaşma modülü yeşil ile gösterilen aslında yeni bir mesaj ve herkese anlık ulaştırıldığı biliniyor. Geçmiş tarihteki mesajlar ise sarı kutucukta listeleniyor
- Öğretmenin derse ait belge yüklemesi için oluşturuldu.
- Derse yüklenmiş olan dosyaları listeleniyor tarihe göre. Ve öğretmen bunu listeden kaldırabilir.
- Öğretmen bulunduğu ders için yoklama aktif edebilir.
- Ders kayıt yaptırmış tüm öğrenciler listelenmekte.
Şekil 2.5--1 Öğretmen girişi yapılmış ders detay sayfası.
Yoklama aktif et butonuyla birlikte öğretmen açılan ekrandan yoklama tanımlaması yapabilir.
- Öğretmen girişi
- Yoklamayı aktif et butonu
- Yoklama oluşturma paneli sayfada eşzamanlı olarak açılır.
- Oluştur onay butonu.
Şekil 2.5--2 Yoklama oluşturma paneli.
Öğretmen yoklama oluşturduğunda bu şekilde bir panel değişikliği olur yoklama bilgisi ve sonlandırma butonu gözükür. Ayrıca qr kod butonu buna basınca kullanıcı ilgili yoklamanın qr koduna erişir.
- Öğretmen girişi.
- Yoklama oluşturulduğuna dair onay mesajı.
- Qr kod butonu yoklamanın qr kodu açılır.
- Yoklamayı sonlandırma butonu.
- Yoklamanın belirtilen tarihi.
Şekil 2.5--3 Öğretmen girişi yapılmış ders detayı yoklama aktifliği.
Oluşturulan yoklamanın qr kodunu bu şekilde ekranda görebiliyoruz bunu okuttuğumuzda yoklamanız alınmış olur eğer dersin öğrencisiyseniz.
- Yoklamanın qr butonu
- Qr gösterilmesi için açılan panel
- Qr kodumuz.
Şekil 2.5--4 Qr kod gösterim ekranı.
Öğrenci ekranında ise görünüm aynı websocket ile online olup anlık mesaj gönderebilir. Yoklama aktif ise qr koda erişip yoklamaya katılabilir.
- Öğrenci girişi.
- Online kullanıcılar websocket ile anlık bağlantılı. Yeni gelen kullanıcı oraya eklenir.
- Mesajlaşma modülü anlık olarak mesaj gönderip alabilir.
- Derse ait yayınlanmış olan ders notlarını görebilir indirebilir.
- Qr kod butonuyla o anki yoklamaya erişip telefonuyla yoklamaya katılabilir.
Şekil 2.5--5 Öğrenci girişi yapılmış ders detay sayfası.
Yoklamalarda da belirlenmiş izinler mevcut. Bunlar öğrenci sadece kendi dersinin yoklamalarını görür. Öğretmen sadece kendi dersinin yoklamalarında işlem yapabilir. Başka bir öğretmen diğer derslerin yoklamalarına erişemez. Yoklama kapandıysa qr kod erişilemez hale gelir. Resim olarak fotoğrafı çekilse bile sistemde kapandığı için yoklama almak isteyen öğrenci yoklamaya dahil olamaz.
Öğretmen yoklamaları bu şekilde görür ve işlem yapar. Bu ekrandaki yoklamalar giriş yapmış kullanıcıya göre listelenir. Örneğin kullanıcının kayıtlı olmadığı derslerin yoklamaları listelenmez.
- Öğretmen girişi yapılmış.
- Öğretmenin kendi dersine ait bir yoklama.
- Öğretmenin yine kendi dersine ait kapanmış bir yoklama
- Giriş yapmış kullanıcın kayıtlı olduğu başka bir ders öğretmeni farklı.
- Yoklamanın aktiflik durumu yoklama aktif ise yeşil yanıp sönen belirteç veya kapanmış ise kırmızı bir kapandı yazısı.
- Qr kod sütununda ise eğer yoklama hala aktif ise qr kod ikonuyla bir buton mevcut. Bu butona tıklandığında ilgili yoklamanın qr kodu gözükür.
- Eğer giriş yapmış kişi o dersin öğretmeniyse detaya git kısımdaki buton aktiftir ve yoklamanın detay sayfasına erişebilir.
- Yoklamayı sonlandır butonu yoklama aktif ise dersin öğretmeni tarafından görülen kapat butonu gözüküyor. Yoklama kapalı ise gözükmüyor.
Şekil 2.6--1 Öğretmen girişi yapılmış yoklamalar sayfası.
Yoklamaları istenilen derse göre arama seçeneği.
Aranan dersin yoklama listesi.
Sadece dersin öğretmeni erişebilir.
- Öğretmen girişi.
- Dersin öğretmen bilgisi.
- Tüm öğrenciler listelenir ve katılıp katılmadığı bilgisi.
- Sadece yoklamaya katılan öğrenciler listelenir.
Şekil 2.6--2 Yoklama detayı öğretmen erişimi.
Öğrenci ekranında ise kayıtlı olduğu dersin yoklamalarını görüyor. Qr koda erişip katılabiliyor.
- Öğrenci girişi mevcut.
- Öğrencinin kayıtlı olduğu yoklaması aktif olan ders.
- Öğrencinin kayıtlı olduğu yoklaması kapalı ders.
- Yoklamanın aktiftik durumu.
- Qr kod butonu yoklama aktif ise gözükür.
Şekil 2.6--3 Öğrenci girişi yapılmış yoklamalar sayfası.
Duyurular öğretmen tarafından oluşturulur. Dersin öğretmeni tarafından o derse ait bir duyuru oluşturulabilir. İlgili derse kayıtlı kişiler o duyuruyu görebilir.
Öğretmen kendi dersine ait veya kayıtlı olduğu derslerin duyurularını görebilir.
- Öğretmen girişi.
- Duyuru oluşturma butonu.
- Kayıtlı olunan dersin bir duyurusu.
- Öğretmeni olduğu bir dersin duyurusu
- Duyuru detayı kayıtlı olunan tüm ders duyurularının içeriğine erişebilir.
- Kendi dersinin duyurusunu güncelleme.
- Duyuru silme.
Şekil 2.7--1 Öğretmen girişi duyurular sayfası.
Derse kayıtlı kullanıcı tarafından görülen duyuru detay sayfası
Şekil 2.7--2 Duyuru detay sayfası.
Sadece öğretmen oluşturabilir ve öğretmen kendi derslerinin duyurularını oluşturabilir başka derslerin duyurularını oluşturamaz. Bu derler bir liste halinde gelir.
Şekil 2.7--3 Duyuru oluşturma sayfası.
Sadece kayıtlı olduğu derslerin duyurularının listesini görebilir ve içeriğine bakabilir.
Şekil 2.7--4 Öğrenci girişi duyurular sayfası.
Etkinlikler sayfamızda öğretmen isteği etkinliği oluşturabilir. Öğrenci etkinliğe kayıt olup içeriğini görebilir. Her iki kullanıcı modeli de etkinliğe kayıt yapıp içeriğini görebilir.
Şekil 2.8--1 Giriş yapılmamış etkinlikler sayfası.
Etkinlik oluşturabilir ve yayınlayabilir.
Şekil 2.8--2 Öğretmen girişi etkinlikler sayfası.
Giriş yapmış öğretmen 3 numaralı buton ile etkinlik oluşturma sayfasına gider.
Şekil 2.8--3 Etkinlik oluşturma paneli.
Şekil 2.8--4 Etkinlik detay sayfası.
Öğrenci sadece etkinliğe kayı olup içeriğini takip edebilir.
Şekil 2.8--5 Öğrenci girişi etkinlikler sayfası.
Sadece admin yetkisi gereken kişiler erişebilir ve gereken değişiklikleri yapabilir. Toplu kayıt ekleme ve dışa aktarma gibi işlemler yapılabilmektedir.
panelinde veri tabanından çekilen objeler gösterilmekte.
- Admin girişi.
- Kullanıcı yönetimi.
- Ders ve etkinlik yönetimleri.
- Toplu kayıt ekleme.
- Sistemden toplu kayıt dışarıya alma.
Şekil 2.9--1 Admin paneli görünümü ve toplu kayıt işlemleri. Oluşturmuş olduğum bir xlsx dosyası bunu içeriye aktardım.
Şekil 2.9--2 Excel tablosu örnek.
İçe aktarma onayında eğer kullanıcı sistemde yok ise onaylanacaktır.
- İçe aktarma modülü.
- Onay butonu içerik düzgün bir şekilde olursa gelir.
- Ön izleme ekranı burada verilerin nasıl aktarılacağı gözüküyor. Password alanını sistemde ki kullanıcı kaydında olduğu gibi şifreli bir şekilde veri tabanına kayıt eder.
Şekil 2.9--3 Toplu kayıt eklemede içe aktarma görünümü.
- İlgili ders seçimi
- Eklenecek kişilerin listesi.
- Onay butonu
Onaylanmış işlem görüntüsü.
Seçilen derse eklenmiş kişiler ve işlemin onaylandığını görüyoruz.
Kayıt ekranı api ile haberleşip bir post isteği gönderip verilerin doğru sonucu döndürürse kayıt işlemi gerçekleşir. Eğer veriler istenilen biçimde olmaz ise api den gelen cevabı kullanıcıya açık bir şekilde belirtir. Kullanıcı adı var olan veya mail var olan kullanıcıyı sisteme kayıt etmez. Şifre için benzersiz alan olması, isme çok benzer olması veya şifre 8 haneden az olması gibi uyarılarda bulunulur.
Öğretmen kaydı için öğretmen kutucuğunun işaretli olması gerekir.
Şekil 3.1--1 Kayıt ekranı. Şekil 3.1--2 Kayıt ekranı kontrolü.
Şekil 3.1--3 Şifre kontrolü.
Kullanıcı eğer sistemde kayıtlı ise giriş yapabilir. Ama kayıtlı değil ise api den kullanıcıya bir hata mesajı döndürür bu sayede kullanıcı doğru bir şekilde sisteme dahil olur.
Şekil 3.2--1 Giriş ekranı.
Eğer kullanıcı girişi olumlu gerçekleşirse ana sayfaya yönlendirilir. Burada kullanıcı her uygulamaya her açtığında bir kere giriş yaptığı için her zaman ana sayfa açılır. Eğer çıkış işlemi gerçekleştirir ise tekrar giriş ve kayıt sayfası açılır.
- Giriş yapmış kullanıcının profil bilgilerine erişmesi için buton.
- Çıkış yapmak için kullanılan buton.
- Kullanıcın kendi kayıtlı olduğu derslerin listesi.
- Kullanıcının kayıtlı olmadığı sistemdeki tüm dersler listelenir.
- Kullanıcının kayıtlı olduğu derslerin tüm yoklamaları listelenir.
- Sistemdeki öğretmenler tarafından oluşturulmuş etkinlikler listelenir.
- Kayıtlı olunan derslerin duyuruları listelenir.
Şekil 3.3--1 Ana sayfa.
Giriş yapmış kullanıcı kendi bilgilerini profil sayfasından görebilir. Yetkisi öğretmen olan kullanıcı mevcut fotoğrafta.
Şekil 3.4--1 Profil sayfası.
Öğretmen kayıtlı olduğu veya kendine ait derslerin listesini görür. Ve üstte bulunan 3 nokta ile gösterilen (PopupMenuButon) ile yeni ders ekleme seçeneğini görür ve oradan yeni ders ekleme sayfasına gidebilir.
Şekil 3.5--1 Öğretmen ders oluşturma butonu.
Şekil 3.5--2 Öğretmen dersler sayfası.
Öğretmen sistemdeki derslerin isimleri benzersiz alan olduğundan farklı bir isim ile yeni ders oluşturabilir.
Şekil 3.5--3 Ders oluşturma sayfası.
Öğrenci sadece kayıtlı olduğu dersleri görebilir ve içeriğine gidebilir.
Şekil 3.5--4 Öğrenci derslerim sayfası.
İlgili dersin detayları gösterilir.
Ders detayı girdiğimizde 5 tane tab panel karşımıza çıkıyor.
Burada derse ait bilgiler ve dersin yüklenmiş olan dosyaları gösterilmek için tasarlandı.
Şekil 3.6--1 Ders detay paneli.
Mesajlar ise aslında websocket bağlantısı olarak anlık çalışması planlandı. Şuanda normal api post işlemi yapabiliyor ve geçmiş mesajları gösteriyor.
Şekil 3.6--2 Mesajlar paneli.
Yoklamalar panelinde derse ait geçmiş veya güncel yoklamalar listelenmekte.
Şekil 3.6--3 Ders yoklamaları paneli.
Derse ait duyurular listelenir.
Şekil 3.6--4 Ders duyuruları paneli.
Derse kayıtlı tüm öğrenciler listelenir.
Şekil 3.6--5 Derse kayıtlı öğrenciler paneli.
Öğretmen ders detay sayfasından 2 tane modüle erişebilir.
- Bulunduğu ders için yoklama oluşturma seçeneği
- Duyuru oluşturup yayınlama seçeneği.
Şekil 3.6--6 Ders içi öğretmen yetkileri.
Öğretmen kendi dersi için yoklama oluşturabileceği bir panel ile tarih zamanı kolayca seçip oluşturabilir. Api ile sisteme ilgili yoklama kayıt olur ve qr kod hazır olur.
Şekil 3.6--7 Yoklama oluşturma ekranı.
Şekil 3.6--8 Yoklama için tarih modülü.
Şekil 3.6--9 Yoklama için saat modülü.
Öğretmen ilgili ders için duyuru ekranından duyuru oluşturup yayınlayabilir.
Şekil 3.6--10 Duyuru oluşturma ekranı.
Burada giriş yapmış kullanıcı kendini derse kayıt edebiliyor ve kayıtlı olduğu derslerim sayfasından erişebiliyor.
Şekil 3.7--1 Tüm dersler sayfası ve kayıt olma modülü.
Giriş yapmış olan kullanıcı kayıtlı olduğu derslerin yoklamalarına erişebiliyor. Yoklamaları katılıp katılmadığı bilgisi ve yoklamanın aktiflik bilgisini görebiliyor. Qr kod butonu ile birlikte qr kod okutma ekranına yönlendiriliyor.
Şekil 3.8--1 Yoklamalar listesi ve qr kod okuyucu.
Burada kullanıcı qr kod butonu ile birlikte qr paneli açılır. Temel özellikleri qr okuyup yoklamanızı otomatik alır. Herhangi bir dersin qr ı olabilir ve okutabilir. Tabi bunun kontrolleri uygulama içerisinde yapılmakta görsellerde de mevcut.
- Telefonun kamera aydınlatmasının açılması için buton.
- Telefonun ön veya arka kamerası için geçiş butonu.
- Qr kod okutulacak panel qr kodu bu çerçeveye tuttuğumuzda hızlı bir şekilde okuyup bize dönen mesajı gösterir.
- Bilgi mesajı bölümü burada qr kod okutulunca veya okutmazdan önceki bilgiler gösterilir.
- Yoklama kapanmış ise bu mesaj gösterilir.
- Yoklama başarılı bir şekilde alınmış ise bu mesaj gösterilir.
- Eğer kullanıcı derse kayıtlı değil ise bu mesaj gösterilir.
Şekil 3.8--2 Qr kod okuyucu ekran ile ilgili kontroller.
Şekil 3.8--3 Qr kod okuttuktan sonraki kontroller.
Uygulama dışındaki herhangi bir qr kod uygulamasıyla okutulduğu zaman bizi giriş sayfasına yöneltiyor yani mobil uygulama olmadan da ilgili yoklama alınabiliyor. Qr koddan elde ettiğimiz link bilgisi bizi tarayıcıya yönlendiriyor ve yoklamanın bilgileri gösteriliyor. Ardından kullanıcı sistem doğrulamasından sonra yoklaması onaylanır.
Şekil 3.8--4 Herhangi bir qr okuyucu ile yoklama alma işlemi.
- Kullanıcı ilgili yoklamamın dersine kayıtlı değilse bir uyarı mesajıyla bunu beliriyoruz.
- Yoklama kapandıysa kullanıcı yoklamaya katılamaz.
- Yoklamaya katılırsa yoklamanız alındı mesajı görecektir.
Şekil 3.8--5 Yoklama alımından sonra kullanıcıya geri dönüş mesajları.
Sistemdeki etkinlikler listelenir ve öğretmen etkinlik oluşturabilir.
Şekil 3.9--1 Etkinlikler ve etkinlik oluşturma butonu.
Etkinlik içeriğine erişilebilir ve katılanlar gösterilir.
Şekil 3.9--2 Etkinlik detay sayfası.
Şekil 3.9--3 Etkinliğe katılanlar sayfası.
Giriş yapmış kullanıcın kayıtlı olduğu derslere ait duyurular listelenir ve içeriğini görebilir.
Şekil 3.10--1 Duyuru sayfası ve detay içeriği.
4.1. Web Django https://github.com/ahmetozkanio/student_project_bitirme_django
4.2. Mobil Flutter https://github.com/ahmetozkanio/student_project_bitirme_flutter