AKREP WEB TASARIM PROJESİ

(1)

1

AKREP WEB TASARIM PROJESİ

WEB SİTE COMPONENTS (WEB SİTE BİLEŞENLERİ)

MUSTAFA YAVUZ 100214007

(2)

2 PROJE NEDEN ÖZGÜN?

Bizim projemiz web site bileşenleri (slider, header, banner vs.) içeren ve kullanıcı girişli çalışmalara erişilebilen bir site üzerine olacak. Sektörde bizim yapacağımız gibi web site bileşenleri üzerine bir site yok. Web tasarım siteleri bunları parça parça sitelerine koymuşlar. Bizim projemizde konu başlıkları altında olacak. Yabancı sitelerde bizim yapacağımız projeye daha yakın siteler var.

Bunlar tabi Türkçe değil ve ücretli çalışmalar bulunduran siteler.

(3)

3 RAKİP ANALİZİ www.gencgrafiker.com

Genç Grafiker tasarımcılara, tasarıma ilgisi olanlara, kreatif düşünenlere öneriler sunmak ve ilham kaynağı sağlamak adına oluşturulmuş yeni nesil bir blog. Özellikle kendini yenilemek ve farklı tasarımlar incelemek isteyenler için sürekli yenilenen bir kaynak.

Bizde birer tasarımcıyız ve sektörü sürekli yakından takip ediyoruz. Nelere ihtiyacımız var, neler bize fayda sağlar bunları iyi biliyoruz.

Yerli ve yabancı birçok tasarımcının çalışmalarını paylaşarak hem kendimize ve size daima ilham alacağımız içerikler oluşturuyoruz hem de tasarımcıların çalışmalarını daha fazla kişinin incelemesini sağlıyoruz.

Olumlu Yönleri

Renk olarak sade bir tasarım seçilmiş. Efektler dinamik, hareketli göze hitap eden şekilde olmuş. Teknik olarak site kendini dolgun gösteriyor. Rastgele bir basit tasarım olmamış. İçerik olarak zengin bir yapıya sahip.

Olumsuz Yönleri

Bu site bizim projemizin çok genelinde bir site olmuş. Web in dışında konular içeriyor. Site

biraz kendini aşmış grafik ve tasarımın dışına çıkıp sosyal konu paylaşımları var. Web site örnekleri

olarak da sadece site yönlendirmesi var. Herhangi bir kaynak kodu paylaşımı yok. Çok başlık açarak

biraz dikkat dağınıklığı yapıyor. Gözü yoruyor.

(4)

4 studio.envato.com

Sitede bilişimle ilgili birçok şeye ulaşabiliyoruz. Yazılım olarak, tasarım olarak birçok çalışmalar var. Yabancı bir site. Çalışmalar ücretli ve üyelik sistemi üzerine kurulmuş bir site.

Olumlu yönleri

Tasarım olarak sade ve göze hitap edici olmuş. Çalışmalar kategori olarak iyi düzenlenmiş. İçerik olarak oldukça zengin bir yapıya sahip. Teknik olarak da sitede sorun yok profesyonelce bir site olmuş. Çalışmaların altında tavsiye edilme oranları yani müşteri memnuniyetleri yazılmış oransal olarak.

Olumsuz Yönleri

Türkçe dil desteği yok. Çalışmalar ücretli ve pahalı. Çok konu başlığı var İngilizce bilmeyen birisi için

istediğini bulmak zor olacaktır.

(5)

5 KULLANICI HİKAYELERİ

 Ben bir kullanıcı olarak siteye üye olabilmeliyim.

 Ben bir kullanıcı olarak siteye mail ve şifrem ile giriş yapabilmeliyim.

 Ben bir kullanıcı olarak unuttuğum şifremi yenileyebilmeliyim.

 Ben bir kullanıcı olarak şifremi değiştirmeliyim.

 Ben bir kullanıcı olarak kendi projeme uygun dosyaları indirebilmeliyim.

 Ben bir kullanıcı olarak hoşuma giden içerikleri daha sonra kullanmak üzere kayıt edebilmeliyim.

 Ben bir kullanıcı olarak kaydettiğim içerikleri hatırlama amacıyla mail alabilmeliyim.

 Ben bir kullanıcı olarak içeriklerin ne işe yaradığını gösteren bilgilere ulaşabilmeliyim.

 Ben bir kullanıcı olarak içerikleri kendi projeme nasıl

ekleyeceğimi gösteren bilgilere ulaşabilmeliyim.

(6)

6  Ben bir kullanıcı olarak yardım anında ulaşabileceğim sık sorulanlar kısmını bulabilmeliyim.

 Ben bir kullanıcı olarak kişisel bilgilerimi güncelleyebilmeliyim.

 Ben bir kullanıcı olarak sitenin amacını ve geçmişini bilmeliyim.

 Ben bir kullanıcı olarak daha önce kullanılmış içeriklere yapılan yorumları görebilmeliyim.

 Ben bir kullanıcı olarak içerik hakkında istek ve görüşlerimi belirtebilmeliyim.

 Ben bir kullanıcı olarak içerik filtrelemesi yapabilmeliyim.

 Ben bir kullanıcı olarak içerikleri oylayabilmeliyim.

 Ben bir kullanıcı olarak kullanmak istediğim içeriğin kodunu da görebilmeliyim.

 Ben bir kullanıcı olarak yanlış kullanıcı adı, yanlış parola da

hata almalıyım.

(7)

7 GEREKSİNİM LİSTESİ

1. Logo bulunacak.

2. Alan adı ve hosting alınacak.

3. Hakkımızda bölümü yazılacak.

4. Paylaşılan çalışmaları puanlama sistemi yapılacak.

5. Paylaşılan çalışmaları favorilere ekleme sistemi ayarlanacak.

6. Sık sorulanlar kısmı oluşturulacak.

(8)

8 EKRAN TASARIMLARI

(9)

9

(10)

10

(11)

11

(12)

12

(13)

13

(14)

14

(15)

15

(16)

16

(17)

17

(18)

18

(19)

19

(20)

20

(21)

21 KAVRAM HARİTASI

(22)

22 TEKNİK ŞARTNAME

1. Anasayfa

a. Kullanıcı Giriş Yap butonuna basıldığında popup şeklinde üye girişi yapılabilecek bir giriş ekranı gelmeli

b. Kullanıcı şifresini unuttuğunda Şifremi Unuttum linkine tıklayarak şifresini yenileyebilmeli

c. Kullanıcı Üye Ol butonuna basıldığında siteye üye olabilmeli

d. Kullanıcı Breadcrumbs Navigasyonu ile kolaylıkla önceki sayfalara gidebilmeli e. Kullanıcı en son ve popüler olan çalışmaları görebilmeli

f. Kullanıcı çalışmalara tıkladığında dosyayı indirebilecek ve kaynak kodunu görebilecek sayfaya yönlendirilmeli

g. Kullanıcı çalışmaların altında çalışmaya ait çalışma başlığını görebilmeli 2. Hakkımızda

a. Kullanıcı sitenin geçmişi ve site hakkında bilgiye ulaşabilmeli 3. Projelerimiz

a. Kullanıcı sol tarafta sidebar içinde konu başlıklarını görebilmeli ve tıklandığında çalışmalara ulaşabilecek sayfaya yönlendirilmeli

b. Kullanıcı bir konu başlığı içerisinde o konu ile alakalı çalışmaları görebilmeli

c. Kullanıcı çalışmalara tıkladığında dosyayı indirebilecek ve kaynak kodunu görebilecek sayfaya yönlendirilmeli

d. Kullanıcı çalışmaların altında çalışmaya ait çalışma başlığını görebilmeli e. Kullanıcı giriş yapmadan çalışmaya ait dosyayı indirmemeli ve kaynak koduna

ulaşmamalı ve giriş yapmasını isteyen uyarı almalı

f. Kullanıcı giriş yaptıysa çalışmaya ait dosyayı indirebilmeli ve kaynak koduna ulaşabilmeli

g. Kullanıcı çalışmaya ait yorumları görebilmeli

h. Kullanıcı giriş yaptıysa sadece mail adresi ile yorum yapabilmeli, ismi veritabanından çekilmeli

i. Kullanıcı giriş yapmadıysa isim ve mail adresi ile çalışmalara yorum yapabilmeli j. Kullanıcı giriş yapmadan sık sorulanları görebilmeli

k. Kullanıcı giriş yaptıysa sık sorulanları görebilmeli, soru ve cevap verebilmeli l. Kullanıcı giriş yaptıysa çalışmalarını favorilerine ekleyebilmeli

m. Kullanıcı giriş yaptıysa kişisel bilgilerini güncelleyebilmeli 4. İletişim

a. Kullanıcı site yöneticileri ile isim ve mail adresi ile iletişim kurabilmeli

(23)

23 PROJE KODLARI

Default.Master

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="default.master.cs"

Inherits="projeson._default" %>

<!DOCTYPE html>

(24)

24

<asp:ContentPlaceHolder ID="head" runat="server">

</asp:ContentPlaceHolder>

</head>

<body>

</div>

<li role="presentation"><a href="default.aspx">ANASAYFA</a></li>

<li role="presentation"><a href="hakkimizda.aspx">HAKKIMIZDA</a></li>

<li role="presentation"><a href="projelerimiz.aspx">PROJELERİMİZ</a></li>

<li role="presentation"><a href="iletisim.aspx">İLETİŞİM</a></li>

</ul>

</div>

<asp:Button ID="btn_giris" CssClass="btn btn-info navbar-btn"

runat="server" Text="Giriş Yap" />

<asp:Button ID="btn_uye" CssClass="btn btn-info navbar-btn"

PostBackUrl="~/uyeOl.aspx" runat="server" Text="Üye Ol" />

<table>

<td>Kullanıcı Adı : </td>

<td><asp:TextBox ID="txt_kAd"

runat="server"></asp:TextBox> </td>

</tr>

<td>Şifre : </td>

<td><asp:TextBox ID="txt_sifre" runat="server"

TextMode="Password"></asp:TextBox> </td>

</tr>

<tr>

<td><a href="sifremi-unuttum.aspx"><span>Şifremi Unuttum?</span></a> </td>

</tr>

</table>

</div>

</header>

<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">

</div>

</form>

</body>

</html>

Default.Master.cs

using System;

using System.Collections.Generic;

using System.Linq;

(25)

25

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Data;

using System.Data.SqlClient;

namespace projeson {

public partial class _default : System.Web.UI.MasterPage {

Sqlbaglantisi baglan = new Sqlbaglantisi();

string kullaniciAd = "";

protected void Page_Load(object sender, EventArgs e) {

}

protected void btn_girisPopup_Click(object sender, EventArgs e) {

kullaniciAd = txt_kAd.Text;

SqlCommand cmdGiris = new SqlCommand("select

kullaniciKullanici,kullaniciSifre,yetki from Kullanici", baglan.baglan());

SqlDataReader drGiris = cmdGiris.ExecuteReader();

while (drGiris.Read()) {

if (drGiris.GetString(0).ToString() == txt_kAd.Text &&

drGiris.GetString(1).ToString() == txt_sifre.Text) {

if (drGiris["yetki"].ToString() == "admin") {

Session.Add("kullaniciKullanici", kullaniciAd);

Response.Redirect("/admin/default.aspx");

}

else if (drGiris["yetki"].ToString() == "uye") {

Session.Add("kullaniciKullanici", kullaniciAd);

Response.Redirect("/kullanici-default.aspx");

} else {

Response.Redirect("default.aspx");

} } else {

btn_girisPopup.Text = "Giriş Hatalı!";

} } } } }

Default.aspx

<%@ Page Title="" Language="C#" MasterPageFile="~/default.Master"

AutoEventWireup="true" CodeBehind="default.aspx.cs" Inherits="projeson._default1" %>

(26)

26

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">

</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">

<li><a href="projelerimiz.aspx" class="active" >Projelerimiz</a></li>

</ol>

<ul>

<asp:DataList ID="dl_projelerimizBanner" runat="server"

RepeatDirection="Horizontal" RepeatLayout="Flow" RepeatColumns="4">

<li>

<img src='<%#Eval("bannerResim") %>' width="190"

height="150" alt="" /></a> <span>

<asp:Label ID="lbl_baslik" runat="server"

Text='<%#Eval("bannerBaslik") %>'></asp:Label>

</span><a

href='banner.aspx?bannerID=<%#Eval("bannerID")%>'>Detaylar için tıklayın!</a>

</li>

</ItemTemplate>

</asp:DataList>

</ul>

<ul>

<asp:DataList ID="dl_projelerimizSidebar" runat="server"

<li>

<img src='<%#Eval("sidebarResim") %>' width="190"

Text='<%#Eval("sidebarBaslik") %>'></asp:Label>

</span><a

href='sidebar.aspx?sidebarID=<%#Eval("sidebarID")%>'>Detaylar için tıklayın!</a>

</li>

</ItemTemplate>

</asp:DataList>

</ul>

<ul>

<asp:DataList ID="dl_projelerimizBackgroundImage" runat="server"

<li>

<img src='<%#Eval("bgImageResim") %>' width="190"

Text='<%#Eval("bgImageBaslik") %>'></asp:Label>

</span><a

href='background.aspx?bgImageID=<%#Eval("bgImageID")%>'>Detaylar için tıklayın!</a>

</li>

</ItemTemplate>

</asp:DataList>

</ul>

</div>

</asp:Content>

Default.aspx.cs

(27)

27

using System;

using System.Linq;

using System.Web;

using System.Data;

namespace projeson {

public partial class _default1 : System.Web.UI.Page {

//banner

SqlCommand cmdBanner = new SqlCommand("select top 8 * from Banner order by bannerID", baglan.baglan());

SqlDataReader okuBanner = cmdBanner.ExecuteReader();

dl_projelerimizBanner.DataSource = okuBanner;

dl_projelerimizBanner.DataBind();

//sidebar

SqlCommand cmdSidebar = new SqlCommand("select top 8 * from Sidebar order by sidebarID", baglan.baglan());

SqlDataReader okuSidebar = cmdSidebar.ExecuteReader();

dl_projelerimizSidebar.DataSource = okuSidebar;

dl_projelerimizSidebar.DataBind();

//background Image

SqlCommand cmdBg = new SqlCommand("select top 8 * from BackgroundImage order by bgImageID", baglan.baglan());

SqlDataReader okuBg = cmdBg.ExecuteReader();

dl_projelerimizBackgroundImage.DataSource = okuBg;

dl_projelerimizBackgroundImage.DataBind();

} } }

Admin.master

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="admin.master.cs"

Inherits="projeson.admin.admin" %>

<!DOCTYPE html>

<asp:ContentPlaceHolder ID="head" runat="server">

</head>

(28)

28

<body>

</div>

<h2>ADMİN PANELİ</h2>

</div>

<div class="p-resim"><asp:Image ID="img_profil" runat="server"

Height="35px" ImageAlign="Middle" Width="35px" /></div>

<div class="k-isim">Hoşgeldiniz, <a href="default.aspx"><asp:Label ID="lbl_kullanici" runat="server" Text="Label"></asp:Label></a></div>

<div class="exit"><a href="../default.aspx"><asp:Label ID="lbl_exit"

runat="server" Text="Çıkış Yap"></asp:Label></a></div>

</div>

</header>

<li role="presentation"><a href="#"><span id="ustmenu- 1">KATEGORİLER</span></a>

<li><a href="banner.aspx?kategoriID=1">BANNER </a></li>

<li><a href="background.aspx?kategoriID=2">BACKGROUND </a></li>

<li><a href="header.aspx?kategoriID=3">HEADER </a></li>

<li><a href="slider.aspx?kategoriID=4">SLİDER </a></li>

<li><a href="navbar.aspx?kategoriID=5">NAVBAR MENÜ </a></li>

<li><a href="sidebar.aspx?kategoriID=6">SİDEBAR MENÜ </a></li>

<li><a href="form.aspx?kategoriID=7">FORM BİLEŞENLERİ </a></li>

<li><a href="template.aspx?kategoriID=8">WEB TEMPLATE </a></li>

</ul>

</li>

<li role="presentation"><a href="#"><span id="ustmenu- 2">YORUMLAR</span></a>

<li><a href="banner-yorum.aspx">BANNER YORUMLAR </a></li>

<li><a href="background-yorum.aspx">BACKGROUND YORUMLAR

</a></li>

<li><a href="header-yorum.aspx">HEADER YORUMLAR </a></li>

<li><a href="slider-yorum.aspx">SLİDER YORUMLAR </a></li>

<li><a href="navbar-yorum.aspx">NAVBAR MENÜ YORUMLAR </a></li>

<li><a href="sidebar-yorum.aspx">SİDEBAR MENÜ YORUMLAR </a></li>

<li><a href="form-yorum.aspx">FORM BİLEŞENLERİ YORUMLAR

</a></li>

<li><a href="template-yorum.aspx">WEB TEMPLATE YORUMLAR

</a></li>

</ul>

</li>

<li role="presentation"><a href="adminler.aspx">ADMİNLER</a></li>

<li role="presentation"><a href="kullanicilar.aspx">KULLANICILAR</a></li>

</ul>

</div>

<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">

</div>

</form>

</body>

</html>

(29)

29

Admin.master.cs

using System;

using System.Linq;

using System.Web;

using System.Data;

namespace projeson.admin {

public partial class admin : System.Web.UI.MasterPage {

if (Session["kullaniciKullanici"] != null) {

kullaniciAd = Session["kullaniciKullanici"].ToString();

lbl_kullanici.Text = kullaniciAd;

SqlCommand cmdABilgi = new SqlCommand("select * from Kullanici where kullaniciKullanici='" + lbl_kullanici.Text + "'", baglan.baglan());

SqlDataReader drABilgi = cmdABilgi.ExecuteReader();

DataTable dtBGuncelle = new DataTable("tablo");

dtBGuncelle.Load(drABilgi);

DataRow row = dtBGuncelle.Rows[0];

img_profil.ImageUrl = row["kullaniciResim"].ToString();

} else {

}

} } }

Default.aspx(admin)

<%@ Page Title="" Language="C#" MasterPageFile="~/admin/admin.Master"

AutoEventWireup="true" CodeBehind="default.aspx.cs" Inherits="projeson.admin._default"

%>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">

</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">

<h2>Profilim</h2>

(30)

30

</div>

<asp:Image ID="img_profil" runat="server" Width="256px" Height="256px"

/><br />

<asp:FileUpload ID="FU_kullanici" runat="server" />

</div>

<ul>

<li><asp:TextBox ID="txt_ad" runat="server"

Enabled="False"></asp:TextBox> </li>

<li class="left"><span>Soyad : </span></li>

<li><asp:TextBox ID="txt_soyad" runat="server"

</ul>

<ul>

<li><span>Cinsiyet : </span></li>

<li><asp:TextBox ID="txt_cinsiyet" runat="server"

</ul>

<ul>

<li><span>Kullanıcı Ad : </span></li>

<li><asp:TextBox ID="txt_kAd" runat="server"

</ul>

<ul>

<li><span>Şifre : </span></li>

<li class="left"><span>Şifre Tekrar : </span></li>

</ul>

<asp:Button ID="btn_guncelle" CssClass="btn btn-success"

runat="server" Text="Güncelle" />

</div>

<%--<table>

<tr>

<td><asp:TextBox ID="txt_ad" runat="server"

Enabled="False"></asp:TextBox> </td>

<td>Soyad : </td>

<td><asp:TextBox ID="txt_soyad" runat="server"

</tr>

<tr>

<td>Cinsiyet : </td>

<td><asp:TextBox ID="txt_cinsiyet" runat="server"

</tr>

<tr>

<td>Kullanıcı Ad : </td>

<td><asp:TextBox ID="txt_kAd" runat="server"

(31)

31

</tr>

<tr>

<td>Şifre : </td>

<td> <asp:TextBox ID="txt_sifre"

runat="server"></asp:TextBox></td>

<td>Şifre Tekrar : </td>

<td> <asp:TextBox ID="txt_sTekrar"

runat="server"></asp:TextBox></td>

</tr>

</table>--%>

</div>

</asp:Content>

Default.aspx.cs(admin) using System;

using System.Linq;

using System.Web;

using System.Data;

namespace projeson.admin {

public partial class _default : System.Web.UI.Page {

if (Session["kullaniciKullanici"] != null) {

kullaniciAd = Session["kullaniciKullanici"].ToString();

txt_kAd.Text = kullaniciAd;

SqlCommand cmdABilgi = new SqlCommand("select * from Kullanici where kullaniciKullanici='" + txt_kAd.Text + "'", baglan.baglan());

SqlDataReader drABilgi = cmdABilgi.ExecuteReader();

DataTable dtBGuncelle = new DataTable("tablo");

dtBGuncelle.Load(drABilgi);

DataRow row = dtBGuncelle.Rows[0];

txt_ad.Text = row["kullaniciAd"].ToString();

txt_soyad.Text = row["kullaniciSoyad"].ToString();

txt_cinsiyet.Text = row["kullaniciCinsiyet"].ToString();

txt_email.Text = row["kullaniciMail"].ToString();

img_profil.ImageUrl = row["kullaniciResim"].ToString();

} else {

(32)

32

}

} } }

(33)

33 PROJE VERİTABANI

(34)

34 WEB PROJESİ EKRAN GÖRÜNTÜLERİ

(35)

35

(36)

36

(37)