SignIn ve SignUp Sayfa Ayarlamaları

 Login işlemi için UIkatmanındaki Views altına User klasörü açalım ve açtığımız klasöre sağ tıklayarak add, controller ile UserController açalın.

Açılan controllerda SignIn ve SignUp adında iki tane fonksiyon açalım. 

Fonksiyon isimlerine sağ tıklayalım  ve Add View diyerek View sayfalarını aynı isimde oluşturalım.

Home İndex sayfasındaki Giriş Yap ve Üye Ol butonlarına tıklanıldığında bu sayfaların açılması için tag helper kütüphanesini tanıtmamız gerekiyor. Bunun için Views klasörü altına _ViewImports adında yeni bir view açalım ve aşağıdaki kütüphaneleri yazalım. View yapılarında kullanacağımız katman yada bölüm olursa buradan import etmemiz yeterli.

@addTagHelper *,Microsoft.AspNetCore.Mvc.TagHelpers
@using PetrolStation.MODEL.Entities

Bu işlemi yaptıktan sonra Shared klasöründeki _Layout dosyasına gelip navbardaki giriş yap ve üye ol butonlarını aşağıdaki gibi güncelleyelim.

   <li><a class="get-a-quote" asp-controller="User" asp-action="SignIn">Giriş Yap</a></li>

   <li><a class="get-a-quote" asp-controller="User" asp-action="SignUp">Üye Ol</a></li>

Şimdi SignIn view dosyasına login tasarımımızı yapalım. Ben indirdiğimiz templatin parçalarını kullanarak hazırladım:

<section id="get-a-quote" class="get-a-quote">

      <div class="container" data-aos="fade-up">

        <div class="row g-0 ">

          <div class="col-lg-2"></div>

          <div class="col-lg-4 quote-bg" style="background-image: url(/img/quote-bg.jpg);"></div>

          <div class="col-lg-5"> 

            <form action="forms/quote.php" method="post" class="php-email-form">

               <h2 style="text-align: center;"> Giriş Yapın</h2>

                <div class="row gy-4 mt-5">

                    <div class="col-md-12">

                      <input type="text"  class="form-control" placeholder="Kullanıcı Adınızı Giriniz" required>

                    </div>

                    <div class="col-md-12">

                      <input type="password"  class="form-control" placeholder="Şifrenizi Giriniz" required>

                    </div>

                    <div class="col-md-12 text-center">

                      <button type="submit">Giriş Yap</button>

                    </div>

              </div>       

            </form>      

          </div>

        </div>

      </div>

    </section>

Şimdi SignUp view dosyasına Üye olma sayfasının tasarımını yapalım.

<section id="get-a-quote" class="get-a-quote">

    <div class="container" data-aos="fade-up">

        <div class="row g-0">

            <div class="col-lg-2"></div>

            <div class="col-lg-4 quote-bg" style="background-image: url(/img/quote-bg.jpg);"></div>

            <div class="col-lg-5">

                <form action="forms/quote.php" method="post" class="php-email-form">

                    <h2 style="text-align: center;">Aramıza Katılmak İstermisin?</h2>

                    <div class="row gy-4 mt-5">

                        <div class="col-md-12">

                            <input type="text" name="name" class="form-control" placeholder="İsim Soyisim Giriniz" required>

                        </div>

                        <div class="col-md-12 ">

                            <input type="text" class="form-control" name="email" placeholder="Kullanıcı Adınızı Giriniz" required>

                        </div>

                        <div class="col-md-12 ">

                            <input type="password" class="form-control" name="email" placeholder="Şifrenizi Giriniz" required>

                        </div>

                         <div class="col-md-12 ">

                            <input type="password" class="form-control" name="email" placeholder="Şifrenizi Yeniden Giriniz" required>

                        </div>

                        <div class="col-md-12">

                            <input type="text" class="form-control" name="phone" placeholder="Telefon Giriniz" required>

                        </div>

                        <div class="col-md-12">

                           <label>  <b>Profil Resminiz</b></label>

                            <input type="file" >

                        </div>

                        <div class="col-md-12 text-center">

                            <button type="submit">Üye OL</button>

                        </div>

                    </div>

                </form>

            </div>

        </div>

    </div>

</section>

Bir sonraki yazıda login işlemini yapalım.