Asp Net MVC Dersleri 4 | Form Uygulaması

Microsoft tarafından geliştirilen Asp Net MVC teknolojisi ile Form uygulamasının yapımına devam ediyoruz. Orta seviye hazırlıklarımızı, veri tabanı bağlantısını ve TFS sistemine yüklenmesini işlemiştik.
Form uygulamamızın kodlarını adım adım yazmaya başlayalım.

*Emeğe Saygı
Not: Projemiz dahilinde Front End (Ön Yüz) kodları olarak, açık kaynak kodlu bir tasarımı kullanacağız: SB – 2 Admin Dashboard.

Projemizin ilk kurulumlarının nasıl yapıldığını, MVC’nin teker teker açılımını daha önceden yaptığım için, direk kod yazımına başlayacağım. Bu adımları öğrenmek için buradaki makalemi okuabilirsiniz.

Front End Kodlarımız (index sayfası)

Projemizi oluştururken olmazsa olmaz sayfalarımızdan bir tanesi olan index sayfasının, Front End (Ön Yüz) kodlarını inceleyeceğiz. İndex sayfasının Back-End tarafında, Veri tabanındaki veriler ile kullanıcıdan gelen verileri sorgulayıp, eşleşirlerse giriş işlemini yapacağız.

Kullanıcılarımızın giriş yapabilmeleri için kullanacakları panelin ön yüz kodlarını yazıyoruz. Akabinden kullanıcıların kayıt olabilecekleri panelin kodlarını yazacağız.

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<div class="row justify-content-center">

    <div class="col-xl-10 col-lg-12 col-md-9">

        <div class="card o-hidden border-0 shadow-lg my-5">
            <div class="card-body p-0">
                <!-- Nested Row within Card Body -->
                <div class="row">
                    <div class="col-lg-6 d-none d-lg-block bg-login-image"></div>
                    <div class="col-lg-6">
                        <div class="p-5">
                            <div class="text-center">
                                <h1 class="h4 text-gray-900 mb-4">Welcome Back!</h1>
                            </div>

                            <form class="user" method="post" action="@Url.Action("index","login")">
                                <div class="form-group">
                                    <input required type="email" name="user_email" class="form-control form-control-user" id="exampleInputEmail" aria-describedby="emailHelp" placeholder="Enter Email Address...">
                                </div>
                                <div class="form-group">
                                    <input required type="password" name="user_password" class="form-control form-control-user" id="exampleInputPassword" placeholder="Password">
                                </div>
                                @*<div class="form-group">
                                        <div class="custom-control custom-checkbox small">
                                            <input type="checkbox" class="custom-control-input" id="customCheck">
                                            <label class="custom-control-label" for="customCheck">Remember Me</label>
                                        </div>
                                    </div>*@
                                <input type="submit" value="Login" class="btn btn-primary btn-user btn-block" />

                                <hr>
                                <a href="index.html" class="btn btn-google btn-user btn-block">
                                    <i class="fab fa-google fa-fw"></i> Login with Google
                                </a>
                                <a href="index.html" class="btn btn-facebook btn-user btn-block">
                                    <i class="fab fa-facebook-f fa-fw"></i> Login with Facebook
                                </a>
                            </form>

                            <hr>
                            <div class="text-center">
                                <a class="small" href="@Url.Action("forget","login")">Forgot Password?</a>
                            </div>
                            <div class="text-center">
                                <a class="small" href="@Url.Action("register","login")">Create an Account!</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>

</div>

Kodlarımızı inceleyelim

ViewBag.Title = “Index”; -> Web sitelerinin en tepesinde Title alanları bulunmaktadır. Burayı değiştirdiğinizde, SEO Title alanını değiştirmiş olursunuz.
ViewBag komutu, bir değişkeni dönmek için kullanılmaktadır.

Layout = “~/Views/Shared/_Layout.cshtml”; -> Asp Net MVC teknolojisinin en gözde özelliklerinden bir tanesidir. Burada, tüm sayfalarda ortak olan yani, tüm sayfalarda bulunan arama butonu, menü gibi objeleri barındırıyoruz. Bu kodu yazdığımız her sayfada otomatik olarak, objeler bulunacaktır.

.cshtml dosyaları içerisnde açıklama satırı yapmak istiyorsanız @**@ kodlarını kullanabilirsiniz.

@Url.Action(“forget”,”login”) -> Normal durumda rel=”nofollow” href=”https://teknotower.com” şeklinde yazıp, kullanıcılarımızı yönlendirebiliriz. MVC teknolojisi ile @Url.Action(“Action”,”Controller”) şeklinde yazıp yönlendirme yapabilirsiniz. İlerleyen bölümlerde, ID veya dengi değişkenleri gönderip, farklı Action’lar da yakalayacağız.

Front End Kodlarımız (Register sayfası)

Kullanıcıların kayıt olacakları ve üyelik alacakları formu oluşturuyoruz. Burada kullanıcıların bilgilerini alıp, veritabanına göndereceğiz.

Register sayfasının Back End tarafında kullanıcıdan gelen verileri, veritabanımız’a kayıt edeceğiz.

@{
    ViewBag.Title = "Register";
}

<div class="card o-hidden border-0 shadow-lg my-5">
    <div class="card-body p-0">
        <!-- Nested Row within Card Body -->
        <div class="row">
            <div class="col-lg-5 d-none d-lg-block bg-register-image"></div>
            <div class="col-lg-7">
                <div class="p-5">
                    <div class="text-center">
                        <h1 class="h4 text-gray-900 mb-4">Create an Account!</h1>
                    </div>
                    <form class="user" action="@Url.Action("register","login")" method="post">
                        <div class="form-group row">
                            <div class="col-sm-6 mb-3 mb-sm-0">
                                <input type="text" class="form-control form-control-user" name="user_name" id="exampleFirstName" placeholder="First Name">
                            </div>
                            <div class="col-sm-6">
                                <input type="text" class="form-control form-control-user" name="user_surname" id="exampleLastName" placeholder="Last Name">
                            </div>
                        </div>
                        <div class="form-group">
                            <input type="email" class="form-control form-control-user" name="user_email" id="exampleInputEmail" placeholder="Email Address">
                        </div>
                        <div class="form-group row">
                            <div class="col-sm-6 mb-3 mb-sm-0">
                                <input type="password" class="form-control form-control-user" name="user_password" id="exampleInputPassword" placeholder="Password">
                            </div>
                            <div class="col-sm-6">
                                <input type="password" class="form-control form-control-user" name="user_retry_password" id="exampleRepeatPassword" placeholder="Repeat Password">
                            </div>
                        </div>
                        <input type="submit" class="btn btn-primary btn-user btn-block" value="Create Accound" />

                        <hr>
                        <a href="index.html" class="btn btn-google btn-user btn-block">
                            <i class="fab fa-google fa-fw"></i> Register with Google
                        </a>
                        <a href="index.html" class="btn btn-facebook btn-user btn-block">
                            <i class="fab fa-facebook-f fa-fw"></i> Register with Facebook
                        </a>
                    </form>
                    <hr>
                    <div class="text-center">
                        <a class="small" href="@Url.Action("forget","login")">Forgot Password?</a>
                    </div>
                    <div class="text-center">
                        <a class="small" href="@Url.Action("index","login")">Already have an account? Login!</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Bu sayfamız, Login Controller’ı altında yer alan Register.cshtml dosyasının kodlarıdır. Fark ettiğiniz üzere bu sayfaya, Layout sayfasını çekmek için kodlarımızı yazmadık. Bunun nedeni; Login Controller, altında barındığından dolayıdır. Sonuçta ikisi de aynı controller yapısı içerisinde yer almaktadır.

Olası hatada aynı kodu bu sayfa içerisinde de kullanabilirsiniz.

Sayfamız dahilinde ekstra anlatmamız gereken bir nokta bulunmamaktadır. Hızlıca kodlarımızı yazmaya devam edelim.

Front End Kodlarımız (Forget sayfası)

Kullanıcı verilerini almak için Register sayfasını kullandık. Register’dan aldığımız veriler ile sorgulama yapmak için index.cshtml sayfasını kullandık. Bu adımda kullanıcı şifresini unuttuğunda kullanacağı “şifremi unuttum” sayfasının tasarımını yapacağız.

@{
    ViewBag.Title = "Forget";
}

<div class="row justify-content-center">

    <div class="col-xl-10 col-lg-12 col-md-9">

        <div class="card o-hidden border-0 shadow-lg my-5">
            <div class="card-body p-0">
                <!-- Nested Row within Card Body -->
                <div class="row">
                    <div class="col-lg-6 d-none d-lg-block bg-password-image"></div>
                    <div class="col-lg-6">
                        <div class="p-5">
                            <div class="text-center">
                                <h1 class="h4 text-gray-900 mb-2">Forgot Your Password?</h1>
                                <p class="mb-4">We get it, stuff happens. Just enter your email address below and we'll send you a link to reset your password!</p>
                            </div>
                            <form class="user" method="post" action="@Url.Action("forget","login")">
                                <div class="form-group">
                                    <input type="email" name="user_email" class="form-control form-control-user" id="exampleInputEmail" aria-describedby="emailHelp" placeholder="Enter Email Addressssss...">
                                </div>
                                <input type="submit" value="Reset Password" class="btn btn-primary btn-user btn-block" />
                            </form>
                            <hr>
                            <div class="text-center">
                                <a class="small" href="@Url.Action("register","login")">Create an Account!</a>
                            </div>
                            <div class="text-center">
                                <a class="small" href="@Url.Action("Index","login")">Already have an account? Login!</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>

</div>

Layout Sayfamızın Kodları ( _Layout.cshtml )

Web sitemizin temelini oluşturan “<html><body> # </body</html>” kodlarımızı barındırdığımız ve sayfamızda kullandığımız Css dosyalarını, bu dosya içersinde barındıracağız.

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Baran Yıldırım - Teknotower</title>


    <!-- Custom styles for this template-->
    <link href="../Content/css/sb-admin-2.min.css" rel="stylesheet">

</head>

<body class="bg-gradient-primary">

    <div class="container">
        @RenderBody()
        <div><h1><a rel="nofollow" href="https://www.instagram.com/teknotower/" style="color:red">Teknotower</a></h1></div>
        <div><h1><a rel="nofollow" href="https://www.instagram.com/byildirim_001/" style="color:yellow">Baran Yıldırım</a></h1></div>
    </div>


    <!-- Bootstrap core JavaScript-->
    <script src="../Content/vendor/jquery/jquery.min.js"></script>
    <script src="../Content/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

    <!-- Core plugin JavaScript-->
    <script src="../Content/vendor/jquery-easing/jquery.easing.min.js"></script>

    <!-- Custom scripts for all pages-->
    <script src="../Content/js/sb-admin-2.min.js"></script>

</body>

</html>

Bu sayfa içerisinde ekstra bir kod bulunmamaktadır. @renderbody() komutunun ne anlama geldiğini anlatayım:

Asp Net MVC – RenderBody Nedir ?

Web sitelerinin çalışması için bir yerden tetiklenmesi gerekmektedir. Asp Net MVC projelerinde de bu durumu RenderBody() üstlenmektedir.

Sitenizde veya projenizde aynı yapıya sahip bir çok sayfa olabilir. Örnek vermek gerekirse; Youtube üzerinden herhangi bir videoyu izlediğinizi varsayalım. Sayfanın sağ tarafında önerilen videolar, üst tarafında ara yapacağınız alan, sol tarafında ilgili menü bulunmakta ve ortasında video oynamaktadır.

Bu şablon, hangi videoya girerseniz girin sabit kalmaktadır. Bu düzeni sağlamak için her sayfaya özel css yazılmamaktadır. Her sayafaya özel <div class=”container”> yapısı da kullanılmaz. Bu tür kodlar sadece 1 yerde yazılır ve tüm sayfalara çağrılır.

Bunun için Layout (yerleşim) oluştururuz. Tüm sayfalarımızı bu şablon üzerine düzenleriz. Asp Net MVC projelerinde bu işlemi, _Layout.cshtml dosyası içerisinde barındırıyoruz.

Gelelim işin (benim için) en keyifli yerine… Back End kodlarımıza bakalım.

Asp Net MVC | Back END

Projemiz dahilinde, Front End kısmını düzlüğe çıkarmış bulunmaktayız. Şimdi de Back End kodlarımız ile projemizi ayağa kaldırıp, çalıştıralım. <3

Back End tarafında 2 farklı yapı ile çalışacağız,
1- Get kısmı -> index.cshtml dosyamızı oluşturmak için yapmamız gerekenleri (view oluşturma) makalemde anlatmıştım. Dosyayı oluşturduğumuz da index.cshtml dosyasının GET kısmını da oluşturmuş bulunmaktayız.
2- Post kısmı -> index.cshtml tarafından gelen verileri alabilmek için POST versiyonunu oluşturduk. Bunları makale devamında daha detaylı inceleyeceğiz.

Back End – Kullandığımız Kütüphaneler

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Helpers;
using System.Web.Mvc;
using tt_login.Models;

Aşağıda belirteceğim tüm kodlar, burada ki kodlar’ın altında yazılmaktadır. – Asp Net MVC

namespace tt_login.Controllers
{
    public class LoginController : Controller
    {
        tt_loginEntities db = new tt_loginEntities();
        User create_user = new User();

Kodlarımızı inceleyelim

tt_loginEntities db = new tt_loginEntities(); -> Veri tabanımızın bağlantısının adını tt_loginEntities şeklinde, ilk veri tabanı bağlantısını yaparken ayarlamıştım. Veri tabanı bağlantısının nasıl yapıldığını burada ki makalemde anlattım. Burada veri tabanımızı db değişkenine aktardım.

User create_user = new User(); -> Veri tabanımızda yer alan tablolardan USER tablosunda ki satırları, create_user değişkenine aktardım.

Back End Kodlarımız (İndex.cshtml)

public ActionResult Index()
        {
            return View(); //İndex.cshtml view kısmını oluşturmak için kullanıyoruz.
        }

        [HttpPost]
        public ActionResult Index(FormCollection form)
        {
            var user_email = form["user_email"].Trim(); //user_email değişkenine formdan gelen "user_mail" değerini atıyoruz.
            var user_password = form["user_password"].Trim();

            var user_data = db.Users.FirstOrDefault(a => a.Email == user_email.ToString() && a.Password == user_password.ToString()); //Gelen değerleri veri tabanında arıyoruz.
            if (user_data != null && user_data.Statu == "1")//Veri tabanından gelen verilerin boş olup olmadığını sorguluyoruz. Eğer kullanıcın statüsü 1 ise giriş yapabilir, 1 den farklı olarak 0 gelirse, kullanıcı olduğu sayfada kalır ve giriş işlemi başarısız olur.
            {
                Session["user_url"] = user_data.Url.ToString();
                return RedirectToAction("index", "home");
            }
            return View();
        }

Burada ki “user_email” ve “user_password” nereden geliyor ?

Hemen hemen herkesin, bu soruyu sorduğunu tahmin edebiliyorum.

İndex.cshtml dosyamızın içerisinde yer alan <input> tagleri içerisinde, kullanıcıdan E-mail adresini yazmasını istemiştik. Tam da o kodun içerisinde name=”user_email” ve hemen altında name=”user_password” kodları bulunmaktadır. Name ile biz hangi alanı alacağımızı belirleyebiliyoruz. Bu, sadece Asp Net MVC de değil PHP gibi teknolojilerinde de aynıdır.

Kodlarımızı inceleyelim

FormCollection form -> Formdan gelen verileri almak için Formcollection fonksiyonunu kullanıyoruz. Gelen verileri de form değişkenine aktarıyoruz. Burada form yerine, istediğiniz ismi verebilirsiniz. Türkçe karakter olmamasına özen göstermeniz gerektiğini hatırlatmak isterim.

Trim(); -> Formdan gelen veriler arasında yer alan boşlukları sayıp, gelen veriyi hiç değiştirmeden almamız için gerekli olan bir fonksiyondur.

FirstOrDefault -> Formdan gelen verileri, veri tabanınında aramamız için işimize yarayan bir fonksiyondur. Bu kod ile sadece aranan verilerin bulunduğu satır alınır.
.tolist(); fonksiyonu ile tüm veriler, tüm satırlar veri tabanından çekilir. Bu bizim işimizi zorlaştırır. Bize sadece giriş yapmak isteyen kişinin verilerinin, veri tabanın da olup/olmadığı lazım.

Session[“user_url”] -> Kullanıcımızın, veri tabanından çektiğimiz url verisini, session’a atıyoruz. Ve bu sayede aynı kullanıcı “tarayıcıyı kapatmadığı” sürece, tekrar şifre girmesi gerekmez.

return RedirectToAction(“index”, “home”); -> Giriş işlemi başarılı olduğu için kullanıcımızı, Anasayfaya yönlendirebiliriz. Burada (“Action” , “Controller”) mantığı uygulanmaktadır. Home controller içerisinde yer alan İndex Action alanına gönderiyoruz.

Back End Kodlarımız (Register.cshtml)

public ActionResult Register()
        {
            return View();
        }

        [HttpPost]
        public ActionResult Register(FormCollection form)
        {


            Random urls = new Random(); //new adında rastgele sayı oluşturup,
            int url = urls.Next();//İnt deger ile url değişkenine atıyoruz.

            var user_name = form["user_name"].Trim(); //user_name değişkeni içerisine form'dan gelen "user_name" değerini yazıyoruz.
            var user_surname = form["user_surname"].Trim();
            var user_email = form["user_email"].Trim();
            var user_password = form["user_password"].Trim();
            var user_retry_password = form["user_retry_password"].Trim();

            if (user_email != null && user_password == user_retry_password) //Bu alan drive da yok! Buraya dikkat edin.
            {
                create_user.Url = url.ToString() + "_byildirim"; //Kullanıcıya özel oluşturduğumuz url'in sonuna _byildirim ekliyoruz. Buraya istediğinizi yazabilirsiniz. Burada veri tabanına kayıt işlemlerini başlıyoruz.
                create_user.name = user_name;
                create_user.Surname = user_surname;
                create_user.Email = user_email;
                create_user.Password = user_password;
                create_user.Statu = "0";//Dikkat! burada kullanıcıları 0 şeklinde ekliyoruz!
                db.Users.Add(create_user);//Create_user içerisinde ki verileri ekliyoruz
                db.SaveChanges();//Veri tabanını kayıt ediyoruz.
                return RedirectToAction("index", "login");//İşlem başarılı olduğu için ana safayaya, giriş yapmaları için yönlendiriyoruz.

            }
            else
            {
                return View(); //İşlem başarsız ise hiçbir işlem yapmayacak.
            }
        }

Kodlarımızı inceleyelim

create_user.Statu = “0” -> Kullanıcının statüsünü 0 ayarlıyoruz. Web sitemize herkesin giriş yapmasını istemiyoruz. Önce 0 şeklinde kayıt olurlar. Sonrasında biz istersek, onaylarız ve değerlerini 1 yaparız. Aksi takdirde sitemize giriş yapamazlar.

Back End Kodlarımız (Forget.cshtml)

Burada ki kodları çok fazla önemsemeyin. Burası size hata dönderecektir. Bu adımı önümüzde ki makalelerde, MAİL Gönderme başlığında paylaşacağım.

public ActionResult Forget()
        {
            return View();
        }
        [HttpPost]
        public ActionResult Forget(FormCollection form)
        {
            var user_mail = form["user_email"].ToString();
            var user_query = db.Users.Where(a => a.Email == user_mail).FirstOrDefault();
            if (user_query != null)
            {
                Random new_p = new Random();
                int new_pass = new_p.Next();
                user_query.Password = new_pass.ToString();
                db.SaveChanges();

//Buradan sonrasını önümüzde ki makalelerimde anlatacağım. Şuan da burası hata dönecektir.
                var user_headline = "Şifre Sıfırlama maili";
                var user_desc = "Bu bir bir test mailidir. Şifreniz: " + new_pass;
                var user_to = "info@byteknolog.com";
                WebMail.SmtpServer = "mail.byteknolog.com";
                WebMail.UserName = "info@byteknolog.com";
                WebMail.Password = " RNcb69Y2";
                WebMail.EnableSsl = true;
                WebMail.SmtpPort = 25;
                WebMail.Send(user_mail, user_headline, user_desc, user_to);

                return RedirectToAction("index", "login");
            }
            return View();
        }

Kodlarımızı inceleyelim

Kullanıcımız şifresini unuttu. Ve yeni bir şifre istiyor. Biz de yeni şifresini, bize vermiş olduğu e-mail adresine göndereceğiz. Bunun için kullanıcın bize Forget.cshtml ‘den gönderdiği mail adresini, veri tabanında sorgulayacağız . –>

var user_query = db.Users.Where(a => a.Email == user_mail).FirstOrDefault();

Eğer kullanıcımız var ise yani null dönmezse, onun için yeni bir şifre üreteceğiz. Ve eski şifresini veri tabanında silip, yenisi ile güncelleyeceğiz. –>

user_query.Password = new_pass.ToString();

Özetleyelim… – Asp Net MVC

Epeyce uzun ve anlaşılır olduğuna inandığım bir makalenin sonuna geldik. Makalemiz dahilinde yaptığımız işlemlerimiz;

• İndex / Register ve Forget action dosyalarımızı oluşturduk.
• Layout mantığını kısadan öğrendik.
• Kullancılarımızın verilerini alıp, veri tabanımız’a kayıt ettik.
• Sonrasında giriş işlemlerini yaptık ve en son olarak, Forget ile kullanıcımıza yeni bir şifre üretip, eskisini sildik.

Ancak ürettiğimi şifreyi, henüz kullanıcımıza göndermedik. Bunu önümüzde ki makalelerimde sizlere anlatacağım.

Asp Net MVC teknolojisi ile geliştirmemizi istediğiniz proje örneklerini yorumlardan benimle paylaşabilirsiniz.

Sizlere çok güzel bir haberim var! Bu eğitim içerisinde yazdığım tüm kodları tek bir dosya halinde Google Drive üzerinden paylaştım. Buradan İndirebilirsiniz.
*Olası indirme hataların da veya kurulum hataların da lütfen yorumlar da bizimle iletişime geçin.

Bizi sosyal medyadan takip edebilirsiniz.

Önümüzdeki süreç içerisinde;

• Facebook ile giriş,
• Twitter ile giriş,
• Google ile giriş,
• Cookie ile otomatik giriş,
• Mail gönderme,
• Ajax ile kayıt,
• Asp Net MVC – Yapay zeka birleşimi

Gibi kompleks konulara değineceğim. Asp Net ile adeta şov yapacağız. Sadece birkaç tanesini yazmış olduğum, onlarca konu için bildirimleri açıp hazırda bekleyin.

Odak gruplarıyla çalışarak ürün tasarlamak gerçekten zor bir iş. İnsanlar çoğu zaman istedikleri şeyin ne olduğunu, sen onlara bir şeyler gösterene kadar bilmezler.

Steve Jobs – Apple CEO