StajDefteri_BİLGİSAYAR_23.doc

MÜHENDİSLİK MİMARLIK FAKÜLTESİ
STAJ DEFTERİ
STAJYER ÖĞRENCİNİN;
ADI SOYADI
BÖLÜMÜ
ÖĞRENCİ NO
STAJ YERİ
: Ahmet Elasi
: BİLGİSAYAR MÜHENDİSLİĞİ
: 1911404095
: İstanbul
STAJ TARİHİ : 17/07/2023 - 25/08/2023

T.C.
BURDUR MEHMET AKİF ERSOY ÜNİVERSİTESİ
Mühendislik Mimarlık Fakültesi
Bilgisayar Mühendisliği Bölümü
ÖĞRENCİ
Adı Ahmet
Soyadı Elasi
Öğrenci No 1911404095
Sınıfı 4.sınıf
T.C. Kimlik No 64114452018
Yukarıda fotoğrafı onaylı ve açık kimliği yazılı öğrenci, üniversitemiz ilgili
yönetmelikleri/yönergeleri gereğince ZORUNLU STAJINI yapabilir durumdadır.
Bilgisayar Mühendisliği
Bölüm Staj Komisyon Başkanlığı
STAJ
YAPILAN
KURULUŞ
İşyeri veya Firma Adı İstanbul_scrambleit pazarlamam_ Cumhuriyet, akros rezidans,
1995. Sk. apartment no 483, 34515 Esenyurt/İstanbul
ve Adresi
Staja Başlama Tarihi 17/07/2023
Staj Bitiş Tarihi 25/08/2023
İş günü 30
2

Yukarıda ismi yazılı ve fotoğrafı bulunan öğrencinin iş yerimizde …..…. iş günü staj
yaptığını ve bu defteri kendisinin hazırladığını onaylarım.
İşyeri veya firma adına defteri onaylayan yetkilinin
Unvanı : ……………………………………………..
Adı Soyadı : ……………………………………………..
İmza ve Mühür
………./………./20….
STAJ GÜNLÜĞÜ
Çalışmanın Günlük Çalışma
Öğrencinin Çalıştığı Konular Sayfa No
Yapıldığı Tarih Saati
17/07/2023 8 Front-End ve Back-End nedir
6
18/07/2023 8 HTML öğrenme
7/8
19/07/2023 8 HTML öğrenmeyi devamı
9/10/11
20/07/2023 8 HTM DOM
12/13/14
21/07/2023 8 HTML…DOM devamı
15/16
24/07/2023 8 HTML…DOM Örnek
17
25/07/2023 8 CSS Nedir
18
26/07/2023 8 CSS ÖRNEKLERİ
19/20
27/07/2023 8 CSS ÖRNEKLERİ
21/22
28/07/2023 8 HTML…LİSTE…OLUŞTURMA
23
31/07/2023 8 HTML…LİSTE…OLUŞTURMA
ÖRNEKL 24/25
01/08/2023 8 DİV…KULLANIMI
26
02/08/2023 8 HTML…SAYFA…NAVBAR
27
3

03/08/2023 8 FOOTER…OLUŞTURMA 28
04/082023 8 BOOTSTRAP`A GİRİŞ 29
07/08/2023 8 BOOTSTRAPA"a GİRİŞ devam 30/31
08/08/2023 8 BOOTSTRAP LİSTE 32
Öğrenci bu sayfaya çalıştığı günleri ve çalışma konularının kısaca adını yazıp detaylı
bilginin hangi sayfada verildiğini belirtecektir.
STAJ GÜNLÜĞÜ
Çalışmanın Günlük Çalışma
Öğrencinin Çalıştığı Konular Sayfa No
Yapıldığı Tarih Saati
09/08/2023 8 BOOTSTRAP LİSTE
33
10/08/2023 8 BOOTSTRAP…GRID
34
11/08/2023 8 BOOTSTRAP GRID devamı
35
14/08/2023 8 C# TANIMI
36
15/08/2023 8 ASP.NET CORE
37
16/08/2023 8 ASP.NET…CORE MVC
38
17/08/2023 8 ASP.NET CORE
39
18/08/2023 8 ASP.NET…PROJE
OLUŞTURMAK 40
21/08/2023 8 ASP.NET MVS MODLES
OLUŞTURMA 41
22/08/2023 8 ROLE…OLUŞTURMA
42
23/08/2023 8 ROLE…OLUŞTURMAYA
DEVAM 43
24/08/2023 8 ASPNET…CATEGORY…OLUŞ
TURMA 44

25/08/2023 8 ASPNET…LOGİN…/…GİRİŞ…NOTİFİCATİON 45
Öğrenci bu sayfaya çalıştığı günleri ve çalışma konularının kısaca adını yazıp detaylı
bilginin hangi sayfada verildiğini belirtecektir.
(Özel Staj Notları)
5

Çalışılan Birim: Front-End ve Back-End nedir
YAPILAN İŞLER
 Bugün stajın ilk günü ,şirketin müdürüyle ve bana eğitim verecek yazılım mühendisiyle
görüştüm. onlarla tanıştıktan sonra şirketin yaptığı projeden bahsetti . Proje bir E-ticaret
sitesidir , temel amaçsanayi sektörinde makine ve üretim hattı satıcı aracılığıyla
müşterilere ulaşım sağlamasıdır. Ben de bu siteye benzer küçük bir E-Ticaret sitesi
yapmayı düşünüyorum.
 Her site iki kısımdan oluşmaktadır ,Front-End ve Back-End . Front-End kullanıcı
arayüzlerini temsiletmektedir yani direkt kullanıcı ile çalışır .Back-End kısmı ise
veritabanından sorumludur . Yani server ile direkt çalışır.
 Bundan dolayı öncelikle HTML öğrenmeye başlayacam daha sonra ise CSS ve sonra da
javascriptve Bootstrap’a başlayacam.
 Bunlar Front-End kısmını teşkil etmekedir . bu kısmı bitirdikten sonra asp.net core 'e
geçeceğim.Asp.net core ile sitenin veri tabanını kurabilirim ve siteyi geliştirebilirim .
 Front-end ve back-end’den daha açıkça bir şekilde
bahsedeyim.FRONTEND:
 bir yazılımın veya web sitesinin kullanıcı tarafından görüntülenen görsel yüz kısmıdır.
Katmanlı olarak tasarlanan web siteleri veya yazılımlarda ilk önce back-end dediğimiz
yazılım kısmının hazırlanması yapılır. Daha sonradan devreye Frontend kısmı giriş
yaparak kullanıcıya gösterilecekolan kısım tasarlanır. Bir yazılım veya web sitesi üzerinde
görsel anlamda gördüğünüz düzen tasarım, şablon düzeneği veya butonlar gibi detayların
tümü Frontend developerin işidir.
 Backend: Genellikle bir sunucu, bir uygulama ve bir veri tabanından oluşur. Bir havayolu
veyaotobüs firmasının web sitesine girerek bilet aldığınızda frontend ile etkileşime girmiş
olursunuz.Siz bilgilerinizi web sitesine girdiğinizde, uygulama bu bilgiyi alır ve bir sunucu
üzerinde kurulmuş olan veri tabanına depolar. Backend işleyişini basit bir şekilde
anlatabilmek için şöyleörnekleyebiliriz: Siz (uygulama), bir bilgiyi bilgisayarınızda
(sunucu) bulunan bir Excel (veri tabanı) dosyasına kaydediyorsunuz
Çalışmanın Yapıldığı Tarih: Sayfadaki çalışmanın kontrolünü üstlenen yetkilinin:
17/07/2023 Adı, Soyadı, Unvanı, İmzası
6

Çalışılan Birim: HTML öğrenme
YAPILAN İŞLER
 HTML nedir?
 HTML, web tasarımcılarına sayfalar ve uygulamalar için yapı profilleri, bağlantılar, blok alıntılar,
paragraflar ve başlıklar oluşturmalarında yardımcıdır. Bu konuda basit kod yapıları olan etiketler
venitelikler kullanılarak web sayfaları şekillendirilebilir. HTML için aslında bir web sitesinin iskeleti
denilebilir. Yani HTML kodları olmadan web sitesi kodlanamaz..
 Web sitesi ve sayfaları oluşturulurken mutlaka kullanılması gereken HTML, yeni
başlayanlar için öğrenmesi en kolay biçimleme dillerinden biridir. HTML dersleri alarak
sistemli bir çalışma için kendinizi geliştirebilir, öğrendiğiniz bilgileri web sayfası tasarlama
aşamasında deneyebilirsiniz. Zamanla sahip olduklarınızdan fazlasını öğrenebilir ve web
sitesi tasarlama konusunda söz sahibi olabilirsiniz.
 HTML Neler sunuyor ?
 Görsel, yazı ve video gibi içeriklerin web sayfasına konumlandırılmasını sağlamaktadır.
 Oluşturulan bu içeriklerin doğru şekilde internet sitelerinde görüntülenmesini sağlar.
 Arama motorlarına web siteleri hakkında bilgi verir.
 Html kodu yazmak için bilgisayarlara bir program yüklemek gerekmez. Wordpad, not defteri ya da
word gibi ortalamlarda bir metin editörü html sayfaları oluşturabilir. Kod yazmayı daha kolay hale
getirmek için dreamwear, sublime Text ve notepad++ gibi araçlar kullanılabilir. Yazılan html
kodlarıkaydedilirken htm, xhtml ve html gibi tarayıcıların anlayacağı şekilde kaydedilmesi gerekir.
 HTML Yazarken Dikkat Edilmesi Gerekenler
 < ,> şeklinde () büyüktür ifadesi ile yazılan birime tag denir.
 Açılan etiketler kapatılmalıdır. Etiketler / işareti
 Bu etiketler yazılırken küçük ya da büyük harf tercih
edilebilir.C- Html kodları yazılırken Türkçe karakter yer
almaz.
 küçük harfler tercih edilir
 En Çok Kullanılan HTML Kodları
 HTML kodları, bir web sayfasının yapısını oluşturan parçacıklardır. Kullanılan kod ne
olursa olsun tümü “<” ile başlar ve “>” ile bitmek zorundadır. Bazı basit HTML kodlarını
daima bilmeniz gerekir. Hazırladığınız web sayfalarında bu kodları birden fazla yerde
kullanmanız gerekecektir. Ancak öncesinde temel bir HTML belge yapısının nasıl olması
gerektiğini bilmeniz gerekir. Buna göre;
 <!DOCTYPE html>: Tüm HTML belgeleri bu kod ile başlamak zorundadır. Bu kod aslında
sayfanın HTML5 formatına göre kodlandığını gösterir.
 <html>: Kök etiket olarak da bilinen bu temel kullanımda tüm HTML kodları, bu iki etiket
arasında tanımlanmak zorundadır.
 <body>: Görünebilir tüm HTML kod parçalarının eklendiği etiket alanıdır.
 <head>: Web sayfasının dili, başlığı ve diğer düzenlemelerinin yer aldığı etikettir.
<title>: Web sitesinin başlık alanını tanımlamak için kullanılır. <title> etiketi, <head>
etiketleri arasındaolmak zorundadır.
7

Çalışılan Birim: HTML öğrenmeyi devamı
YAPILAN İŞLER
 HTML ETİKETLERİ VE HTML ETİKETLERİNİN ANLAMLARI:
 -HTML:Tüm etiketleri saran,html kodu ile kodlama işleme yapılması gerektiğini belirten
sayfanınbaşında açılarak sayfanın sonunda da kapatılan etiketin adıdır .
 -Head: Hazırlanan site ile alakalı içerik ve tanımların yer aldığı bölümdür .Bu alanda yer
alan kodlarsitede görünmez.
 -Body: Bu alan tüm sitenin görüntülendiği ve siteye giren herkesin görebildiği alandır .
Kullanılanetiketlerin büyük kısmı body alanı üzerinde yer bulunur.
 Metin Düzenleme Etiketleri: Tagının içine yazılan metinn düzenleme etiketleri tek tek
incelendiğinde şu detaylar öne çıkıyor.
 Başlık Etiketi: Bu etiket yazılara başlık eklemek için kullanılır. Farklı büyüklükte başlıklar
kullanılabileceği için h1, h2, h3, h4, h5, h6 olmak üzere 6 farklı başlık büyüklüğü
mevcuttur. Burada en büyük başlık <h1> en küçük ise <h6> dır.
 Kalınlık Etiketi: Bu etiket yazıları kalın yapmak için kullanılır. İngilizce bold
(kalın) kelimesinden gelmektedir. Bu kelimenin baş harfi kullanarak simgesi
oluşturulmuştur. 3)- İtalik (eğik yazı) Etiketi: Bu etiket metni eğik yazmak için
kullanılır. Italic kelimesinden gelmektedir. Bu etikette ziyaretçinin dikkatinin
çekilmesi istenen yerlerde kullanılır.
 Altını Çiz etiketi: Bu etiket metnin istenen yrrlerin altını çizmek için kullanılır.
İngilizceunderline (altı çizili) kelimesinin baş harfiyle oluşturulmuştur.
 Alt Satıra Geç Etiketi: alt satıra geçmek için Html koduyla Enter tuşunun işe
yaramadığınıgörürsünüz. Html’de alt satıra geçmek için <br> etiketi kullanılır..
 Paragraf Etiketi: Yazdığımız metini paragraflara bölmek için kullanılır. Uzun yazılarda
okunabilirliği arttırır.
 Etiketi: Font etiketi metin rengini ayarlama, yazı tipini değiştirme ve boyutunu ayarlamak
içinkullanılır. Tek bir etiketin bu 3 özelliği değiştirebilmesi aldığı parametreler sayesinde
olmaktadır.
 HTML'de Bağlantı Oluşturma:
 HTML'DE bağlantı oluşturma aslında gezinti işlemlerinin temelini oluşturur . Web sayfası
birçok alt başlık menüden meydana gelir bunun için html kodları bu alanlar arası bağlanı
oluşturarak bağlantı ğıoluşturulur .
Site içi bağlantı oluşturma ve site dışı bağlantı oluşturma var
8

Çalışılan Birim: HTML…DOM
YAPILAN İŞLER
HTML DOM Nedir ?
DOM Document Object Model kelimesinin kısaltılmasından gelir ve Türkçe karşılgı Belge
Nesne Modelidir .
DOM, HTML, XMI. gibi belgelerin diger programlama dilleri veya script dilleriyle iletişim
kurabilmesinisağlamak için geliştirilmiş bir arabirimdir . Programlama dillerinde sıkça
karşımıza çıkan Object Oriented yaklaşımı da bu yapıya benzerdir . Object Oriented
yaklaşımında kullandığımız nesneler yada sınıflar DOM yapısına göre bir HTML , sayfası
içerisinde bulunan etiketleri ( tag ) kapsar .
Şekil 1 :
DOM
Yukarıdaki (Şekile 1) olduğu gibi HTML sayfasında bulunan <head>, <body>, <hl>, <img> gibi
etiketlerbirer DOM nesneleridir. DOM sayesinde HTML veya XML elemanları ile
programlama veya script dilleri arasında haberleşme sağlayarak daha etkileşimli web siteler
yapılabilmesini sağlanır. DOM, Javascript, PHP, ASP, Java vb. birçok dile destek verir. Örnek
olarak web projelerinde sıkça kullandığımız Javascript ile bir DOM elemanıyla iletişim
kuralım.
9

Çalışılan Birim: HTML…DOM örnek
YAPILAN İŞLER
Şekil 2 : Etiketler Tanımla
1-) Yukandaki ömekte hir HTML belgesi içerisine <html>, head,body, div gibi etiketler
tanımladık.
2-) <div etiketi ile Javascript kodumuzun iletişimi için <div etiketine onMouseOver
özelligi tanımladık ve bu özelligi renkDegistir() adında bir Javascript fonksiyonuna
ifadesiyle gönderdik.
3-) Javascript kodumuzda Obj parametresi ile hangi etiketten geldigini belirledik ve a
etikete Obj.style.border Ipx solid red' diyerek yeni bir stil kazandırdık. NOT: Aynca, DOM
nesnelerine (this)gibi parametre kullanarak iletişim kurabildigimiz gibi, id, name, class gibi
özellikler (attribute) tanımlayarak da yapabiliriz.
10

Çalışılan Birim: HTML…DOM Örnek
YAPILAN İŞLER
Örnek1:
Bu örnekte bir Web Programlama dili olan Php' yi kullanalım <html>
<body>
<form action="post.php" method="post">
Name: <input type="text"
name="name"><br> E-mail: <input
type="text" name="email"><br>
<input type="submit">
</form>
</body>
</html> post.php
<?php
iffisset($_POS
T))
İf(isset(($_POS
T))
Sname = $_POST['name'];
Ssurname =$_POST['surname'];
Echo
"Adınız :
".Sname.“
Soyadınız :
".$surname;
}
1-) Yukarıdaki örnekte yine bir HTML belgesi içerisinde bazı etiketler kullandık.
2-) Form etiketi içerisinde iki adet inputumuz var. Bu inputları action post.php ifadesiyle
post.phpadında bir dosyasına gönderiyoruz.
3-) post.php dosyasında da inputlardan gelen ifadeleri name özelliğiyle yakalayıp
değişkene atıyoruzve ekrana basıyoruz.
11

Çalışılan Birim: CSS Nedir
YAPILAN İŞLER
CSS Nedir?
CSS bir kısaltmadır. "Cascading Style Sheets" kelimesinin baş harflerinden oluşur.Dilimizdeki
anlamı: Basamaklı Stil Sayfası.
Stiller, bir HTML elementinin nasıl görüneceğini belirleme olanağı sağlar. Stiller HTML 4.0'da birproblemi çözmemizi
sağlar. Siteyi görselleştirme!
HTML dosyamızın daha anlaşılır olmasını sağlar. Stillerimiz tek bir dosyada toplanır ve kolaylıklaokunur değiştirilir.
Stil dosyalarımızın uzantısı *.css dir. CSS Dosyası birçok stil barındırabilir.
CSS Büyük Bir Problemi Çözüyor!
HTML ilk ortaya çıktığında siyah beyaz bir televizyondan farksız değildi. Her zaman aynı kodlarkullanılır ve
aynı biçimde yazılar görünürdü. Ömeğin bir H1 elementiyle başlık yazıp farklı bir
yerdeki H1 elementini değişik bir renk ve tarzda gösteremiyorduk.
HTML 3.2 ile elementler bazı yeni özellikler kazandı. Örneğin FONT elementine colorözelliği eklendi. Tabi
bu da tam bir çözüm değildi. Bir CSS Koduna Bakış
Bir CSS kodu iki temel bileşenden oluşur. Biri element ve stilleri birbirinden ayıram seçim. Diğeri isebir ya da daha
fazla özelliği bildirdiğimiz ifade bölümü.
Şekil 3 : SELECTOR
Selector genel olarak stilini belirleyeceğimiz HTML clementidir, hl, a, body, p gibi. İfadeler ise sürekliolarak özellik:
değer; şeklinde { ve } işaretleri arasında sıralanır.
CSS Örneği
Bir css ifadesi her zaman noktalı virgül (;) ile biter. İfadeler bir kıvrımlı parantez içinde yer alır.Aşağıdaki örneğe
bakalım: p {
color :red ; text-align:
center ;
}
Örnek : <div> etiketlerinin yazı rengini beyaz, arkaplan rengini kırmızı, kutu genişliğini 200px,
kutu yüksekliğini 150px ,kutular arasındaki boşluğu yukarıdan 10px, aşağıdan 5px soldan ve
sağdan 3px olarak ayarlayın.
2 <style>
3 div{
4 color:white;
5 background-color: red;
6 width: 200px;
7 height: 150px;
8 float:left;
9 margin:10px 3px 5px 3px;
10 }
11 /style>
12

Çalışılan Birim: CSS ÖRNEKLERİ
YAPILAN İŞLER
Örnek:
Bu örmegimizde oluşturmuş oldugumuz HTML sayfamızda <hl>, <h2> ve <p>etiketlerine CSS ile birkaç stil
tanımlaması yapacağız.
Örneğimizi inceledigimizde CSS ile arkaplan rengi degiştirme, yazı rengi degistirme ve metinhizalaması
özelliklerinin uygulandıgını göreceğiz.
<!doctype html>
<html>
<head>
<title>CSS ömekleri</title>
<meta charset-"utf-8">
<st
yle
>
h1{
background-color: chartreuse; } h2{
background-color:
beige; color: orange; } P{
color: red; text-
align:
justify, }
</style>
</head>
<body>
<hl>BAŞLIK 1<hl>
<h2>BAŞLIK 2<h2>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, ." </p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, </p>
</body>
</html>
13

Çalışılan Birim: CSS ÖRNEKLERİ
YAPILAN İŞLER
Şimdi de sayfamızda bulunan 2 paragrafa ayrı aynı renk nasıl verebiliriz buna bakalım. Bunun
için paragraflarımıza ayn aynı id (kimlik) vereceğiz. İlk paragrafımıza id olarak p1, ikinci
paragrafimıza isep2 ismini verecegiz. örnek:
<!doctype html>
<html>
<head>
<title>CSS örnekleri</title>
<meta charset-"utf-8">
<style> h1{
background-color:blueviolet; color: white; }
h2{ background-color:darkturquoise; color:
orange,} #p1{ color: red;
text-align:
justify:}#p2{
color: mediumvioletred; background-color:
aliceblue;}
</style> </head> <body>
<hl>BAŞLIK 1</hl>
<h2>BAŞLIK 2</h2>
<p id="pl"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
<p id="p2"> Lorem ipsum dolor sit amet, consectetur adipiscing elit.. </p> </body> </html>
14

Çalışılan Birim: HTML…LİSTE…OLUŞTURMA
YAPILAN İŞLER
Bugün sıralı ve sırasız listelere ait örneklere ait kodları ve ekran görüntülerinden bahsedeceğim .
HTML'de iki ana liste türü vardır: sırasız listeler (<ul>) - liste öğeleri madde işaretleri ile
işaretlenir . sıralı listeler (<ol>) - liste öğeleri sayılar veya harflerle işaretlenmiştir
Css
html
ŞEKİL 4 : Liste Oluşturma
15

Çalışılan Birim: HTML…LİSTE…OLUŞTURMA ÖRNEK
YAPILAN İŞLER
Şekil 5 : BAŞLIK 1
 Simdi de sayfamızda bulunan 2 paragrafa aynı renk nasıl verebiliriz buna
hakalım. Bunun için paragraflarımıza ayrı id (kimlik) verecegiz. İlk
paragrafımıza id olarak p1. ikinci paragrafimıza ise p2ismini vereceğiz, örnek:
 <ldoctype htmi>
 <html>
 <head>
 <title>CSS ömekleri<title>
 <meta charset="utf-8">
 <style> h1{ background-color:blueviolet; color: white;}
 h2{ background-
 color:darkturquoise; color:
 orange;}#p1{
 color: red; text-align:
 justify;}#p2{
 color: mediumvioletred; background-color:
 aliceblue;}
 </style> </head> <body> <hl>BAŞLIK 1</hl>
 <h2>BAŞLIK2</h2>
 <p id-="pl"> Lorem ipsum dolor sit amet, consectetur adipiscing elit.." </p>
 <p id="p2"> Lorem ipsum dolor sit amet, consectetur adipiscing elit.. </p>
</body> </html>
16

Çalışılan Birim: DİV…KULLANIMI
YAPILAN İŞLER
Div kullanımı :
Div etiketi genellikle diğer HTML etiketleri için kapsayıcı( container ) olarak kullanılır. Div etiketinin
kendine özelparametreleri yoktur lakin en çok id, class ve style parametrelerini kullanır. CSS ile
birlikte kullanıldığında, < div
> etiketi içerik bloklarını biçimlendirmek için kullanılabilir. Div ile bir örnek yapalım, bir < div >
etiketini açıp kapatalım ve içersini yazılarımızla dolduralım ve Div etiketinin style parametresine
css kodları ekleyip sonucu görelim;
Şekil 6 : Div kullanımı
Çıktısı
Şekil 7 : ÇIKTI
17

Çalışılan Birim: HTML…SAYFA…NAVBAR
YAPILAN İŞLER
Başlık oluşturması:
Navigation bar html kodu:
Şekil 8 : Başlık
oluşturma
Css kısmı
*{ padding:
0; margin: 0;
box-sizing: border-box; list-style:
none; text-decoration: none;
}
nav{
background-color: salmon;
}
.container{ padding:
15px 0;
background-color: #fdcb9e;
display: flex; align-items:
center;
justify-content: space-between; max-width:
1140px;
margin: 0 auto;
.nav-list{ flex:1;
display: flex;
justify-content: space-between;
}
18

Çalışılan Birim: FOOTER…OLUŞTURMA
YAPILAN İŞLER
Ekran çıktısı :
Şekil 9: Ekran çıktısı
Footer (altbilgi )oluşturma:
<style> footer { text-align:
center; padding:
3px;background-color:
DarkSalmon; color:
white;
}
</style>
</head>
<body>
<footer>
<p>Author: Hege Refsnes<br>
<a href="mailto:hege@example.com">hege@example.com</a></p> </footer>
Ekran çıktısı :
Şekil 10 : Ekran çıktısı
19

Çalışılan Birim: FOOTER…OLUŞTURMA
YAPILAN İŞLER
Html css örneği:
Şekil 11 : Html css örneği
Ekran çıktısı
Şekil 12 : Ekran çıktısı
20

Çalışılan Birim: BOOTSTRAP`A GİRİŞ
YAPILAN İŞLER
 Bootstrap nedir:
 Bootstrap’i incelemeden önce, web uygulamalarının ön uç
iskeletlerinin neolduğuna yakından bakmakta fayda var. Bu
iskeletler, bir uygulamanın kullanıcıların etkileşime geçtiği
arayüzüdür. Yapıyı HTML kodları meydana getirir, basamaklı stil
şablonları görsel formatı oluşturur ve JavaScript kodları slaytlar,
açılan menüler gibi dinamik elementleri mümkün kılar. İskeletler,
websitelerinin üzerlerine inşa edildikleri temellerdir. Bir ön uç
iskeleti ve araç takımı olan Bootstrap, Twitter mühendisleri Mark
Otto ve Jacob Thornton tarafından geliştirilmiştir. Temel amacı web
uygulamalarının hızlı, kullanışlı vedaha duyarlı hale getirilmesini
kolaylaştırmaktır. Bootstrap günümüzde duyarlıve mobil öncelikli
web siteleri geliştirmek için en popüler CSS iskeleti olma unvanına
sahiptir. Duyarlı ve mobil odaklı web siteleri oluşturmak için
muazzam bir araçken, W3.CSS adında daha kompakt, daha hızlı ve
kullanımı daha kolay bir alternatifi de bulunur.
 Bootstrap Özellikleri : Bootstrap uyarlanabilir esnek bir düzen sağlaması ve arama
motoru optimizasyonu değerini arttırmaya yardımcı olması gibi özellikleri sayesinde
çok fazla tercih edilen bir web geliştirme aracıdır. Aracın tercih edilmesini sağlayan
diğer özellikleri sıralanacakolursa
Şekil 13: BootStrap Özellikleri
21

Çalışılan Birim: BOOTSTRAPA"a GİRİŞ devamı
YAPILAN İŞLER
Sonuç:
Bootstrap front end geliştiriciler arasında git gide daha da popüler olan ücretsiz bir framework'tür.
Kullanımı kolaydır ve geliştiricilerin tekrar tekrar söz dizimi yazmasına gerek kalmadığı için
vakitlerinden tasarruf etmelerini sağlar.
Bu framework ayrıca oldukça esnektir ve front end web sitesi geliştirme için neredeyse
bütüngereksinimleri karşılar. En iyi özelliklerinden birisiyse web sayfalarının bütün ekran
boyutlarında idealbiçimde çalışmasını sağlamasıdır.
ÖRNEK
Şekil 14: BootStrap örneği
Ekran çıktısı:
22

Çalışılan Birim: BOOTSTRAP LİSTE
YAPILAN İŞLER
Listegrubu:
Şekil 16: Teme Liste
Şekil 17: Ekran Liste
Şekil 18: Yatay Liste
Ekran Listesi:
Şekil 19: Ekran Listesi
Medya nesnesi:
Şekil 20: Medya nesnesi
23

Çalışılan Birim: BOOTSTRAP…GRID
YAPILAN İŞLER
Sayfa Planını Izgara Sistemi ile Oluşturmak:
Izrgara ( Grid ) sistemleri sitemizin belli standarda uygun ve hızlı bir şekilde sayfa planını
oluşturmamıza yarayan sistemlerdir. Bu sistemlerin uygulaması tasarımdan baslar. Tasarımcı bu
sisteme uygun bir site çıkarır. Kod yazarken bizde bu yapıyı uygularız. Bu durum maalesef
tasarımı, arayüz geliştirici arasındaki koordinasyon eksikliğinden çok fazla projede
uygulanamamasına neden oluyor. Daha sistemli ve standart çalışmak için güzel yapılar.
Biz arayüz geliştiriciler için bulunmaz bir nimet olan ızgara yapıları sayesinde, kodlama
sürelerimiz ciddi ölçüde azalır. Genişlikler, ara boşluklar belli olduğu için sayfa planını
oluşturmak çok basit bir hal alır. Daha önce ben PSD’den HTML’e - fanatikmarslar.com
Sitesinin Kodlaması makalesinde anlattığım gibi tüm bu değerleri tek tek ölçüp tanımlamam
gerekiyordu. Ancak ızgara sistemi ile oluşturulan sitelerde bu değerler belli ve atanmış olduğu
için bu kısmı hızlıca geçeriz.
Burada tasarımcı ve arayüz geliştiricileri açısından şöyle bir avantajı var. Tasarımcılar
yaptıkları tasarımın bire bir arayüze uyarlanmasını ister, , tabi uygularken bazı sorunlar çıkar
ve piksel hesabına dönen tartışmalar çıkar. Izgara sistemine uyan tasarımcı ve arayüz
geliştirici arasında böyle sorunlar olmaz, çünkü değerler baştan bellidir. Bu konuda
geliştirilmiş bir çok ana çatı ( framework ) var. –960 Grid System.
–Sektor.
–Blueprint.
–Less FrameWork. Vb .
Yukarıda listelenen ve daha fazlasını internette görebileceğimiz ızgara sistemleri mevcut. Bu
hazıryapıların amacı bu işi daha kolay hale getirmek.
Daha önce yukarıdaki ızgara sitemlerinden birini kullanmış olanlar için konunun
devamını anlamakdaha basit olacaktır.
24

Çalışılan Birim: BOOTSTRAP GRID devamı
YAPILAN İŞLER
Kapsayıcı (.container)
Bootstrap izgara sisteminde satırların tam yerleşmesi için bir kapsayıcı elemana ihtiyacı vardır.
Kapsayıcı eleman siteye yapısına göre iki farklı sınıf alır.
.container : sabit genişlikteki sitelerde .container-
fluidesnek yapılı sitelerde
Uyumlu web için değişen genişlikler de kapsayıcı genişliğide değişir. Satırlar ve kolonlar
vüzdedeğerli olduğu için değişen genişliklerde değerleri değişmez.
1200px veya daha büyük ekran çözünürlüğünde:
1170px992px - 1199px arasında: 970px
768px -991px arasında: 750px
768px' den daha düşük ekran çözüntürlüğünde:
autoSatırlar (.row)
Her 12'li kolonu kapsayan bir kapsayıcıdır. Sağdan soldan eksi 15px ile ana kapsayıcının bıraktığı
boşluğu doldurur, böylelikle kolonları aralarına konulan boşlukların sondaki kutuyu aşağı atması
engellenmiş olur. kolonlar float:left ile yan yana dizildiği için satır avnı zamanda taşan kolonları
satırbaşı yaptırmaya yarar. Satırları ana kapsayıcısı (.container) dışında kullanmayın çalışmıyor.
Baren gözden kaçıyor, sorun oluyor
Kolonlar (.col-*)
Her kolon 15px'lik sağ ve sol paddingleri vardır. Bu paddingler satır ile olan mesafeleri ayırmak
için eklenmiştir. Bu her kolon için aynı etkiyi yapacaktır ve yan yana kullanılan kolonlar arasındaki
mesafe30px olacaktır.
Farklı ekran çözünürlükleri için farklı kolon snıfları tanımlanır.
.col-xs- 768px'den küçükse
.col-sm- 768px ile 991px arasında
.col-md- 992px ile 1199px arasında
.col-lg- 1200px eşit ve büyükse
25

Çalışılan Birim: C# TANIMI
YAPILAN İŞLER
C#; Microsoft tarafından .NET Teknolojisi için geliştirilen modern bir programlama dilidir.
Sözdizimi C-like (C benzeri) bir deneyim sunar.
Microsoft tarafından geliştirilmiş olsa da ECMA ve ISO standartları altına alınmıştır.
C#, .NET orta seviyeli programlama dillerindendir. Yani hem makine diline hem de insan algısına
eşit seviyededir. Buradaki orta ifadesi dilin gücünü değil makine dili ile günlük konuşma diline
olan mesafesini göstermektedir. Örneğin; Visual Basic .NET (VB.NET) yüksek seviyeli bir dildir
dersek bu, dilin insanların günlük yaşantılarında konuşma biçimine yakın şekilde yazıldığını ifade
etmektedir. Dolayısıyla VB.NET, C#.NET'ten daha güçlü bir dildir diyemeyiz.
Tasarım hedefleri
- C#; basit, modern, genel-amaçlı, nesneye yönelik programlama dili olarak tasarlanmıştır.
-Çünkü yazılımın sağlamlığı, güvenirliği ve programcıların üretkenliği önemlidir. C# yazılım dili,
güçlü tipleme kontrolü (strong type checking), dizin sınırlar kontrolü (array bounds checking),
tanımlanmamış değişkenlerin kullanım tespiti, (source code portability), ve otomatik artık veri
toplama (garbage collector) gibi özelliklerine sahiptir
-Programcı portatifliği özellikle C ve C++ dilleri ile tecrübesi olanlar için çok önemlidir.
-Enternasyonal hale koymak için verilen destek çok önemlidir.
-C# programlama dili Sunucu (bilişim) ve gömülü sistemler için tasarlanmıştır. Bununla birlikte C#
programlama dili en basit işlevselli fonksiyondan işletim sistemini kullanan en teferruatlısına
kadar kapsamaktadır.
-C# uygulamaları hafıza ve işlemci gereksinimleri ile tutumlu olmak üzere tasarlanmıştır. Buna
rağmenC# programlama dili performans açısından C veya Assembly dili ile rekabet etmek için
tasarlanmamıştır
-C# sanal makineye dayalı bir dil olduğundan kaynak kodlarının korunması zordur. Kaynak kodları
karıştırıp şifreleyen ek uygulamalar ile güvenlik düzeyi artırırsa da tam olarak koruma
sağlanmaz. -
.NET Microsoft uygulama bonservisi Windows üzerinde geçerlidir. Fakat C# programlarını
Windows, Linux veya macOS üzerinde yürüten başka uygulamalar da yer almaktadır.
-C#, Sanal Makine'ye dayalı dillerden biridir, direkt yerleşik kod'a derlenen dillerden daha
yavaştır.
-Bellek yönetiminde bir atık toplayıcısına ihtiyaç duyuyor olması, sistem kaynaklarını C, C++ veya
Rust (programlama dili) gibi dillere göre daha fazla tükettiği anlamına gelir. Sistem kaynaklarının
kullanımına bağlı performans düşüşü olabilir.
26

Çalışılan Birim: ASP.NET CORE
YAPILAN İŞLER
ASP NET CORE Nedir?
ASP.NET Core, .NET teknojileri ile yazılım geliştirme çalışmaları yapan geliştiricilerin dahaduyarlı,
güvenilir ve genişletilebilir uygulamalar geliştirebilmelerini kolaylaştırmaktadır.
ASP.NET Core, tüm ASP.NET altyapısının yeniden tasarlanarak, Web API ve MVC altyapıları ile
birleştirilmesini sağlamıştır.
Net Core’un Temel Özellikleri
Modern ve esnek bir geliştirme platformu olarak yazılıcımların kullandığı Net Core’un bazı temel
özellikleri bulunmaktadır. Net Core’un temel özelliklerini şöyle sıralayabiliriz: 1-Açık kaynak kodlu
esnek bir geliştirme platformudur.
2-Net Core, cross platformdur. Yani platform bağımsızdır. Bu da Net Core kullanılarak geliştirilen
uygulamaların Windows dışındaki diğer işletim sistemlerinde de uygulamaları çalıştırabilmek, diğer
kullanıcıların erişimine açabilmek anlamına gelmektedir.
3-Net Core, docker ve diğer container servisleri ile birlikte rahatlıkla yayına alınabilmektedir.4-
Microsoft tarafından Github üzerinde, kaynak kodları açık bir şekilde MIT ve Apache 2
lisanslarına sahip olarak yer almaktadır.
5-Net Core uygulamaları C#, F# ve Visual Basic dilleriyle geliştirilebilir.6-Bir çapraz platformdur.
Net Framework Nedir?
Net Framework’u açıklamadan önce frameworkun ne anlama geldiği de bilinmelidir. İçerisinde uygulama
geliştiren arayüzleri (API) ve yazılımcıların ihtiyaç halinde yararlanabilecekleri bir kod kütüphanesini
barındıran paketler framework olarak tanımlanmaktadır. Kod kütüphanelerinin paylaşımlı olması
gerekmektedir. Bu paylaşımlı kütüphanelere ise Framework Class
Library denmektedir. Paylaşımlı kod kütüphaneleri sayesinde programcıların ufak tefek işlemler için
gerekli olan fonksiyonları baştan yazmaları gerekmez.
Net Framework’te yazılmış önceden var olan bir MVC uygulaması Linux kutusunda çalıştırılabilir. Net
Core; konsol uygulamaları, web uygulamaları, sınıf kütüphaneleri ve birim testlerini desteklemektedir.Bu da
çapraz platform 3D video oyunlarının bile Net Core ile oluşturulması anlamına gelmektedir.
Net Core’un bazı bileşenleri de bulunmaktadır: Bunlar, Net Runtime, Net Framework Libraries, NetCore
SDK, Dotnet App Host’tur
27

Çalışılan Birim: ASP.NET…CORE MVC
YAPILAN İŞLER
Model View Controller (Model Görünüm Kontrolü)
MVC Framework (Model View Controller Framework – Model Görünüm Kontrolü Altyapısı), bir
uygulamanın model, view (görünüm) ve controller (kontrol) adında üç temel katman içerisinde
geliştirilmesi esasına dayanan bir tasarım kalıbıdır. Genel olarak model uygulamanın üzerinde duracağı
meseleyi temsil eder ve genellikle veritabanıdır. Controller, model üzerindeki operasyonlarıtarif eden
roldür. View ise, gerekli bilginin görünümünden sorumludur. Proje bileşenleri, bu farklı katman yapılarını
kullanarak birbirlerinden bağımsız olarak geliştirilebilirler. Ayrıca açık kaynak kodlubir yapı olduğu için
uygulamanın genişletilmesi, kodların güncellenmesi ve test işlemlerinin yapılmasıişlemlerinde kolaylık
sağlanmış olur. MVC Framework, Microsoft tarafından ASP.NET WebForm’dan sonra Web uygulamaları
geliştirmek üzere sunulmuş ikinci bir uygulama geliştirme modelidir. ASP.NET MVC Framework
uygulamalarının sağladığı en önemli özellikler; daha sade html içeriğe ve URL Routing (URL yönlendirme)
ile daha anlaşılabilir URL adreslerine sahip, test edilebilir, kolay erişilebilir uygulamalar
tasarlanabilmesidir. Ayrıca MVC Framework uygulamaları WebForm uygulamalarına göre daha hızlı
çalışmaktadır.
MVC Framework yapısını oluşturan katmanlar aşağıdaki gibidir:
Model: Uygulamanın veriye erişimini ve iş mantığını gerçekleştiren nesneleri içeren katmandır. Başkabir
deyişle, kullanıcı bilgilerine erişmek, kullanıcı kaydetmek, kullanıcıyı kaydederken iş kuralı ve mantığının
yer aldığı kullanıcı varlığını temsil eden sınıftır. LINQ (Language Integrated Query – Dil Entegreli Sorgu) ile
gelen .dbml dosyaları ile Entity Framework (Varlık Altyapısı) ile gelen .edmx dosyaları veya DataSet,
DataReader gibi nesnelerle veri taşıyan tipler bu katmanda yer almaktadır. Veriye erişim gerektiğinde
controller ve view nesneleri bu kısımda yer alan nesnelerle iletişime geçebilir.
View (Görünüm): Uygulamanın kullanıcı arayüzünün oluşturulduğu ve arayüz dosyalarının bulunduğu
katmandır. Anasayfalar, .aspx sayfaları, kullanıcı kontrolleri gibi kullanıcının görüntüleyebileceği dosyalar
bu kısımda yer almaktadır. İstemciden iletilen HTTP talepleri kontrol nesneleri tarafından tutulur ve ilgili
kontrol gelen URL’yi çözümleyerek isteğe uygun olan action (eylem) metodunu çağırır. Bu metot
tarafından veri üzerinde işlem yapılacaksa model katmanındakinesnelere erişilerek işlenen veri ilgili
"view" nesnesine iletilir. Veri üzerinde yapılacak işlem yoksa talep doğrudan "view" nesnesine iletilebilir.
View katmanında HTML kodu oluşturularak istemciye gönderilir. Model her zaman bir .aspx dosyası olmak
zorunda değildir. Model katmanı her zaman bir
.aspx sayfasından oluşmayacağından, tanımlanmış bir view engine (görünüm motoru) kütüphanesi
kullanılarak da görünüm katmanı oluşturulabilir. ASP.NET MVC Framework ile gelen "view engine"
kütüphanelerinin yanında İnternet üzerinden açık kaynaklı bazı "view engine" kütüphanelerineerişmek
mümkündür.
MVC Framework yapısını oluşturan katmanlar aşağıdaki gibidir:
Controller (Kontrol): Uygulamaya gelen talepleri yöneten katmandır. Gelen bir http isteği routing
tablosuna bağlı olarak doğrudan controller sınıflarına ve o sınıflardaki action metotlarına aktarılır.
"Controller" nesneleri içerisinde bulunan action isimli metotlar, gelen talepleri (bir veriye erişmek,
güncellemek vs.) uygun görünüm ve model nesneleri üzerinden değerlendirmekle görevlidirler. Sayfaya
ulaşan talepler URL bazlı olarak çözümlenerek ilgili eylem metoduna iletilir. Kontrol katmanında bulunan
Eylem metotları uygulamanın görünüm ve model bileşenleriyle doğrudan iletişim kurabilir.
28

Çalışılan Birim: ASP.NET…PROJE OLUŞTURMAK
YAPILAN İŞLER
Porjenin güvenliğinin artması için Projemde repository kullandım . Repository
Veri merkezli yazılımların iş katmanlarından veriye ulaşım işlemleri sırasında meydana gelen ve
gözardı edilen bazı ayrıntılar, yazılımın ilerki aşamalarında önümüze bir çığ misali yığılıp
kalmaktadır.Özellikle katmanlı mimaride geliştirilen yazılımlarda iş kuralları ve katmanlar, düzgün
oluşturulmadığıtaktirde bir işi N defa yapmak zorunda kalabiliriz. Ancak nesneye yönelik (object
oriented) yapıların ilkelerinden biri de, bir kuralı bir kez belirleyip N kez çalıştırmaktır. Örneğin
veritabanındaki öğrencilertablosuna öğrenci eklemeyi yapan bir nesne ve bir metod olmalıdır.
İş katmanında dikkat edilmesi gereken bazı kurallar vardır. Bunlar:
Kod tekrarlarından
kaçınmak Hata yakalamayı
kolaylaştırmak
Kod yazımını ve okunuşunu
kolaylaştırmakTest edilebilir bir yapı
kurgulamak
Repository pattern de bizi bu kurallara uymaya zorlamaktadır. Peki repository pattern nedir?
Veri merkezli uygulamalarda veriye erişimin ve yönetimin tek noktaya indirilmesini sağlayan bir
tasarım desenidir. Veri merkezli uygulama olması şart değil elbette. Ama bu yazıdaki uygulama
veriyeerişim kurallarını belirleyen bir örnek üzerinden yürütülecektir.
Örneğimiz, bir ASP.NET MVC web uygulaması içerisinden alınmış repository uygulanışını
göstermektedir. Verileri, tek noktadan taşıma işlemini yapacak olan repository yapısı da Entity
Framework altyapısını kullanmaktadır. Repository pattern için kullanılan teknoloji çokta önemli
değildir. MVC veya Entity Framewok gibi detaylara bu örnekte gerek yoktur, yeri gelmişken
bahsetmeden geçemedim. İstersek kendi veri katmanımızı (data layer) hazırlayarak da yola
devam edebiliriz.
Şekil 21 : MVC
29

Çalışılan Birim: ASP.NET MVS MODLES OLUŞTURMA
YAPILAN İŞLER
Bugün de websiteesi projeme başlıyorum . Visual Studio kullanarak c# ASP.NET Core geliştirme
için kullanacağım, bir c# ASP.NET Core web uygulaması oluşturuyorum,
ASP basit veya dinamik bir web sitesi yapmak için ihtiyaç duyulan tüm işlemleri
gerçekleştirebileceğiniz bir teknolojidir. ASP, Aktif sunucu anlamına gelir. ASP İle oluşturulan
siteler dinamik web siteleridir. ASP İle yazılan kodlar ziyaretçiler tarafından görüntülenemez
(Tarayıcı tarafından yorumlanabilir) bu da asp teknolojisini oldukça güvenli kılar. ASP.NET ise
daha gelişmiş birteknolojidir. ASP.NET Web uygulamalarını oluşturan bir çatıdır. C# ile Asp.NET
yazılır. Asp.NET bütünlük ve derleme açısından hem de yazılımcılara çok büyük kolaylıklar sağlar.
C#, geliştiricilerin temelde .Net Çerçeve çalışması üzerinde çalışan her tür güvenli ve sağlam
uygulamaoluşturmasına yardımcı olan çekici ve zarif, nesnel yönelimli bir programlama dilidir.
Windows Uygulamaları, XML Web Servisleri, İstemci-Sunucu Uygulamaları, Veritabanı
Uygulamaları,Web Uygulamaları, Mobil Uygulama Daha Fazlasını oluşturmak için C#
kullanılabilir....
C# Dili, en iyi kullanıcı arabirimi tasarımcılarını kodlamak için gelişmiş bir düzenleyici ve
kullanıcının C# Dili ve .Net FrameWork'e dayalı uygulamalar geliştirmesini kolaylaştıran entegre
hata ayıklayıcı sağlar.
Proje oluşturma :
-Visual Studio'yu yükleme
- ilk olarak, bir ASP.NET Core projesi oluşturacam. Proje türü, tam olarak işlevsel bir Web sitesi
içinihtiyacınız olan tüm şablon dosyaları ile birlikte gelir.
1-Başlangıç penceresinde Yeni proje oluştur' u seçiyorum.
2-Yeni proje oluştur penceresinde dil listesinden C# ' ı seçiyorum. ardından, Platform
listesindenWindows ve proje türleri listesinden Web ' i seçiyorum.
3-Ek bilgi penceresinde, .NET Core 3,1 ' ıni
doğruluyorum.
4- Sayfalar klasörünü genişlettirmeye başlıyorum.
5- Sql server uygulamasını indirdikten sonra Projeyi appsettings.js dosyasında bağlantı
oluşturdum. 6-model dosyasını ekliyouz model : projede kullanılacak olan verilerin tutulduğu
alandır. Model’i kısacası gündelik hayatta kullandığımız somut nesnelerin, yazılım sektöründe
modellenmesi anlamına geldiğini düşünebiliriz. Örnek olarak e ticaret ile ilgili bir yazılım
geliştirmek istiyorum . category ile ilgili bilgileri tutmak için category modeline ihtiyaç duyarız. Bu
modelimizde category adı, resmi gibi çeşitli bilgiler yer alacaktır.
30

Çalışılan Birim: ASP.NET MVS MODLES OLUŞTURMA devamı
YAPILAN İŞLER
projede 11 tane modele ihtiyacımız var :
Application Category içine ( kategori adı ve resmi ).
ApplicationProduct içine ( ürün ad , resim, fiyat ,detayları , kullanıcı id ve kategori id)
ApplicationCounrty içine ( ülke ad,kod,bayrağı ) ekledim ve diğerlerine bu şekilde bilgileriDoldurdum
ve veri tabanımızı bu şekilde oluşturduk .
Şekil 22 : Product Tablo oluşturma
31

Çalışılan Birim: ROLE…
YAPILAN İŞLER
Uygulamamızda kullanıcıları belirli yetkiler doğrultusunda yönlendirebilmek ve sayfa
odaklı erişim durumlarına müdahale edebilmek için rol yönetimi üzerine konuşacağız.
Rol Bazlı Yetkilendirme Nedir?
Rol bazlı yetkilendirme, yukarıdaki giriş cümlesinde de ifade etmeye çalıştığım gibi kullanıcıların
bellibaşlı sayfalara erişimini belirlememizi sağlayan ve bunun için roller tanımlayarak
yetkilendirme yapmamıza imkan tanıyan bir stratejidir.
Şöyle basit bir örnekle metafor yaparsak eğer; ilaç almaya gittiğiniz eczanenin arka odasının
kapısında“Personel Harici Giremez!” uyarısı görmüşsünüzdür. Ha işte, o odaya erişebilmek
için o eczanede “Personel” rolüne sahip olmanız gerekmektedir. Eğer ki dışarıdan gelen müşteri
iseniz ne yazık ki o odaya giremezsiniz.
Web uygulamalarında da benzer mantık geçerlidir ve kullanıcılara rol odaklı sayfa
erişimleri sağlanmaktadır. Örneğin; E-TİCARET SİTESİNDE " add category " ,"dd product"
"addcity" sayfalarını içeren "DASHBOARD" sayfasına sade ve sadece "super admin" veya
"manager" rolüne sahip olan kullanıcılar erişebilirken, "addproduct" sayfasına satıcı(marchent)
ve " cart" sayfasına (herişebilmektedir.
dentityRole Sınıfı İle Rol Entitysi Tanımlama
Uygulamada bir rol entitysini tanımlayabilmek için ilgili sınıfın “IdentityRole” sınıfından
türemesi gerekmektedir
Ve bu rol sınıfı uygulamadaki Context nesnesinin “IdentityDbContext” base classına aşağıdaki gibi
bildirilmesi gerekmektedir. Ayrıca yine ilgili sınıfın Startup dosyasında da AddIdentity fonksiyonu ile
aşağıdaki gibi belirtilmesi gerekmektedir.
32

Çalışılan Birim: ROLE…OLUŞTURMA
YAPILAN İŞLER
Ayrıca yine ilgili sınıfın Startup dosyasında da AddIdentity fonksiyonu ile aşağıdaki gibi
Belirtilmesi gerekmektedir.
Şekil 23 : APPLICATONUSER
Rol Oluşturma
Rol oluşturabilmek için RoleManager sınıfının “CreateRole” metodunu aşağıdaki gibi kullanabiliriz.
Şekil 24 : Create Role
Bu şekilde role oluşturdum.
33

Çalışılan Birim: ASPNET CATEGORY OLUŞTURMA
YAPILAN İŞLER
Web sitemde ürün listesi yapmak istiyorum.Farklı kategorilerde bir çok ürün var. asp.net[c#]de admin kategorisi eklemek için kod
yazıyorum .
Modles klasöründe kısmında ApplicationCategory adlı bir sınıf oluşturuyoruz :
Şekil 25 : Category Tablo oluşturma
Resimi veritabanına eklemek için modelview adlı bir klasör oluşturdum ve içine ApplicationCategoryView adlı bir sınıf oluşturuyorum
Şekil 26 : CategoryView Tablo oluşturma
Yeni kategori eklemek için AddCategory ,kategori düzenlemek için EditCategory, kategori silmek içinDeleteCategory ,ekleyeceğimiz
Kategorileri listelemek için ListCategory ve kategori getirmek için GetCategory fonksiyonlarını controle gitmek için interface türünden
bir sınıfına ekledim
Şekil 27 : Category interface
34

Çalışılan Birim: ASPNET CATEGORY REPOSİTORY
YAPILAN İŞLER
Fonksiyonları gerçekleştirmek için rep klasörünü açıyoruz ve içine categoryrep adlı bir sınıf oluşturuyoruz AddCategory:
Şekil 28 : Add Category
DeleteCategory:
Şekil 29 : Delete Category
EditCategory:
Şekil 30 : Edit Category
GetCategory
Şekil 31 : Get Category
35

Çalışılan Birim: ASPNET…CATEGORYCONTROLLER
YAPILAN İŞLER
İşlemler Repositorey klasöründen controllere geliyor ondan sonra viewe geliyor
Şekil 32 : Repositorey
Şekil 33 : edit category Route
36

Çalışılan Birim: ASPNET…CATEGORY…VİEW
YAPILAN İŞLER
Arayüzünde görünecek işlemleri view kısmına bu şekilde ekliyorum
Şekil 34 : view kodu
Ekran çıktısı
Şekil 35 :Ekran çıktısı
Ve bu şekilde adminin eklediği kategoryleri listelemek için bu şekilde tablo oluşturduk.
37

Çalışılan Birim: ASP.NET CORE MVC CART OLUŞTURMAK
YAPILAN İŞLER
Bugün kullanıcı sepeti oluşturmam gerek. Ondan önce bir kaç önemli adım yapacağım. Her ürün
birkategoriye ait olduğu için . O yüzden kullanıcı kategoriyi seçip sonra bu kategoiye bağlı her
ürünü gösterecektir. Bir ürün seçerse bu ürünün bütün detaylarını göstermesi lazım. 1.adım bizim
kategorilerimizin resimlere tıklayarak seçtiğimiz kategoriye bağlı ürünleri gösterecektir. Bu süreç
kategori ID ile yapılır.
Şekil 37: süreç kategori
Şimdi Ürünler Sayfası yapacağız. Bu sayfada seçtiğimiz kategori ID ile bütün ürünleri göstereceğiz
Ürünler yan yana ve her ürün altında fiyatı ve küçük bir açıklaması olacak şekilde yaptım Şimdi bu
ürünlerden birisini seçersek. Bu ürün sepete taşınır.
Şekil 39: sepete taşınır Kodu
38

Çalışılan Birim: ASP.NET CART OLUŞTURMAK
YAPILAN İŞLER
Ama sepet nasıl olacak acaba?
Birkaç e-ticaret sitelerini ziyaret ettikten sonra sepet oluşturdum. Sepet bir tablo olup resim, fiyat,
aded vs. detaylar yan yana olacaktır.
Şekil 40 : sepete
Şimdi ürünlerin adedini kaydetmem için hiç bir fikrim yok. Bir arama yaptıktan sonra basit bir
yöntem buldum. Ürünlerin detayları form ile göndereceğim. Bu form fatura controller kısmına
(order controller) taşınır. Sepetten gelen detaylar ile bir fatura oluşturacağız.Bugün sepet oluşturup
ve gereken işlemler hallettim. Yarın fatura ile ilgili şekil ve işlemler yapacağım.
39

Çalışılan Birim: ASP.NET…ORDER
YAPILAN İŞLER
Şimdi fatura yapacağız.İlk önce sepetin altına bir button eklememiz gerek. Eklediğimiz button fatura
ekle(AddOrder) bir kontrole taşınır.Sepet formunun bilgileri parametre olarak alınır. Sonra döngü ile
sepetteki ürünlerinin tek tek bilgileri alınır. Bu bilgiler Orderde eklenir.
Şekil 41: Fatura Kodu
Şuan bilgilerimiz hazır. Html sayfamız A4 kağıt şekline döndüreceğiz. Bir CSS koduyla boyutu ve şekli
düzelteceğiz.
Şekil 41: Css Fatura Kodu
Şuan faturamız A4 kağıt oldu. Şimdi bu sayfamızı yazdırmamız lazım. Bu süreci asp.net(C#) ile yapacağız.
Arama yaptıktan sonra bir yöntem buldum. Yazdırmak için bir hazır fonksiyon var. Bu fonksiyon ismi
(denk). Bu fonksiyon button tıkladığımzda çalışacak ve sayfamız yazdıracaktır .
40

Çalışılan Birim: ASP.NET…ORDER.
YAPILAN İŞLER
Şekil 42: Fatura Kodu
Önceki gün bulduğum yazdırmak fonksiyonu program çalıştığında biraz yavaş bir şekilde çalışır. Çünkü böyle işlemler server side
olmaz!. Client Side (javascript) bir fonksiyon bulmam gerek. Arama yaparken birkaç y öntem buldum onlardan birisini seçtim.
Şekil 43Fatura Kodu javascript
Şimdi programla yine çalıştım ve işlemleri tek tek inceledim. Bir şey farketim sepetten bir ürün ekledikten sonra silme seçeneği yok. O
yüzden şimdi sepetten bir ürün silebilmemiz için controlde bir fonksiyon ekleyeceğiz. Bu fonksiyon Linq komutları ile veritabanında
sepet tablosunda seçtiğimiz ürünü silecektir. Bu fonksiyon ile sepette mevcut ürünler yan yana olacaktır. tıkladığımızda çalışıp silinir
Şekil 44: Delete Product Kodu
Şimdi neredeyse işimiz hazır. Front-End kısmında yani arayüzler geliştireceğim
41

Çalışılan Birim: ASP.NET CORE' DEKİLİTLEME
YAPILAN İŞLER
ASP.NET Identity'de kullanıcı kilitleme için bir kavram vardır. Kilitleme başlamadan önce kullanıcının kaç
deneme yapabileceğini ve kilitlemenin ne kadar süreyle etkinleştirileceğini belirleyebilirsiniz. Bu, çevrimiçi
tüm makalelerden yaygın olarak bilinir. Ancak bu makalelerin söylemediği şey, kullanıcılarınbu sürece
kaydolup çıkabilmeleridir.
IdentityUser sınıfına bakarsanız, kilitleme ile ilgili 2 alan vardır: LockoutEnabled ve LockoutEndDateUtc. İlk
tepkim, LockoutEnabled'ın kullanıcının kilitli olduğunu veLockoutEndDateUtc'nin kilitleme süresinin
dolduğunu söylemesiydi.
Yanıldığım ortaya çıktı. LockoutEnabled, kullanıcının prensipte kilitlenebileceğini (veya edilemeyeceğini)
belirten bir bayraktır. yani kilitleme için kabul bayrağı. Dolayısıyla, kilitlemek istemediğimiz bir yönetici
kullanıcımız varsa, bu bayrağı false olarak ayarlayacağız. Ve kullanıcı tabanının geri kalanı için bu doğru
olarak ayarlanmalıdır.
Kullanıcının kilitli olup olmadığını kontrol etmek için UserManager.IsLockedOutAsync(user.Id) kullanın.
UserManager.GetLockoutEnabledAsync() işlevi, kullanıcının kilitlemeyi etkinleştirip seçmediğini kontrol
eder, kullanıcının gerçekten kilitli olup olmadığını kontrol etmez.
Bu kodu kilitlemek istediğimiz satıcıya ekleriz :
LockoutEnabled = true,
LockoutEnd=DateTime.Today.AddYears(100),
kilitleme fonksiyonu de ekleriz : public async
Task<bool> LockUsers(string id)
{
var user1 = await _Db.Users.FindAsync(id);if (user1
== null)
{
return false;
}
_Db.Users.Attach(user1);user1.LockoutEnabled =
true;
user1.LockoutEnd = DateTime.Now.AddYears(100);
_Db.Entry(user1).Property(x => x.LockoutEnabled).IsModified = true;
_Db.Entry(user1).Property(x => x.LockoutEnd).IsModified = true;
await _Db.SaveChangesAsync();
return true;
}
42

Çalışılan Birim: ASP.NET (KİLİT…AÇMAK)
YAPILAN İŞLER
kilidi açma fonksiyonu de ekleriz :
public async Task<bool> UnLockUsers(string id)
{
var user1 = await _Db.Users.FindAsync(id);
if (user1 == null)
{
return false;
}
_Db.Users.Attach(user1);
user1.LockoutEnabled = false; user1.LockoutEnd
= DateTime.Now;
_Db.Entry(user1).Property(x =>
x.LockoutEnabled).IsModified = true;
_Db.Entry(user1).Property(x => x.LockoutEnd).IsModified =
true;
await _Db.SaveChangesAsync();
return true;
}
43

Çalışılan Birim: ASPNET…LOGİN/SİGN…İN…LOG…OUT
YAPILAN İŞLER
Siteden her bir kişinin kendi sepetine ürün eklemek isterse veya almak isterse login (giriş) yapmasıgereklidir
.eğer üye olmamışsa sigin in (yeni öye ) olarak girebilir .
Controller klasöründe login sınıfında login kodunu bu şekilde yazdım.
Şekil 45: Controller login kodu
Controller klasöründe register sınıfında yeni üye kodunu bu şekilde yazdım.
Şekil 46: Controller Register kodu
Kıllanıcının Logout yapabilmesi için login sınıfında da logout kodunu ekledim
Şekil 47: Controller logout kodu
44

Çalışılan Birim: ASPNET…LOGİN…/…GİRİŞ…NOTİFİCATİON
YAPILAN İŞLER
Login ve sign in arayüzünü bu şekilde düzelttim .
Şekil 48 : LOGIN SAYFASI
Satıcı olarak giriş yapabilmek role kullanaraK Usercontroller sınıfında addmerchant işlemini
ekledim
Şekil 49 : SATICI Koudu
Ve popup kullanarak satıcı olarak satıcının ismini ve şifresini girerek giriş yapıyor ve adminin
eklediğikategorilere göre ürünler ekliyor. Sitede her bir kullanıcı order yapınca satıcıya bildirim
gelmesi için notification kodunu ekledim
45

StajDefteri_BİLGİSAYAR_23.doc

Recommended

Recommended

More Related Content

Similar to StajDefteri_BİLGİSAYAR_23.doc

Similar to StajDefteri_BİLGİSAYAR_23.doc (20)

StajDefteri_BİLGİSAYAR_23.doc