Html

TrendYol 2023 - 2024 Süper Lig Fikstür Çekimini Yapan BootStrap Html Uygulaması-1

Bu uygulamamızda süper lig takımlarından 4 tanesinin kendi aralarında oynayacakları mini bir lig oluşturacağız. İleride ise, bu uygulama baz alınarak, tüm lig için uygulamayı yapmaya çalışacağız. En basit anlamda böyle bir lig oluşturmak için aşağıdaki adımlar takip edilmelidir.

a) Takımların belirlenmesi

b) Kuraların çekilmesi

c) Maçların oynanması ve skorların belirlenmesi

d) Her hafta oyanan maçlara göre puan durumunun belirlenmesi

Önceliikle bu işlemleri sabit değerler üzerinden yapacağız. Daha sonra yapılan işlemlerin algoritmasını anlayarak işlemleri dinamik hale getirmeye çalışacağız. Şimdi bu işlemleri sabit değerler üzerinden yapmaya çalışalım.

Mini lig için takımlarımız Göztepe, Trabzonspor, Konyaspor ve Malatyaspor olsun. Tabi siz başka takımlarda belirleyebilirsiniz. Tercih sizin. Ben mini ligi bu takımlar arasında kuracağım.

Takımlar için kendi aralarında yapacakları maçları belirleyelim.

1. Hafta Maçları

Göztepe – Konyaspor 

Malatyaspor – Trabzonspor

2. Hafta Maçları

Konyaspor – Malatyaspor 

Trabzonspor – Göztepe

3. Hafta Maçları

Göztepe – Malatyaspor 

Konyaspor – Trabzonspor

Bu maçlardan sonra mini ligimizin ilk yarısı bitecek. İkinci yarı maçlarında ise, ev sahibi takım deplasmanda, deplasmandaki takım ise ev sahibi olarak yazılacaktır.

4. Hafta Maçları

Konyaspor Göztepe

Trabzonspor Malatyaspor 

5. Hafta Maçları

Malatyaspor Konyaspor 

GöztepeTrabzonspor

6. Hafta Maçları

Malatyaspor Göztepe

Trabzonspor Konyaspor 

Şimdi de maçları oynayıp puan durumlarını belirleyelim.

1. Hafta Maç Sonuçları

Göztepe 1 – 2 Konyaspor 

Malatyaspor 1 – 0 Trabzonspor

Oynanan bu maçlara göre puan durumunu yazaılım. Galip gelen takım 3 puan, mağlup olan takım 0 puan, beraberlik halinde her iki takım birer puan alacaktır. Buna göre puan durumunu belirleyelim.

#

Takımlar

O

G

B

M

A

Y

AV

P

1

Konyaspor 

1

1

0

0

2

1

1

3

2

Malatyaspor 

1

1

0

0

1

0

1

3

3

Göztepe

1

0

0

1

1

2

-1

0

4

Trabzonspor

1

0

0

1

0

1

-1

0

2. Hafta Maç Sonuçları

Konyaspor 0 – 0 Malatyaspor 

Trabzonspor 1 – 0 Göztepe

Puan durumu şöyle olacaktır.

#

Takımlar

O

G

B

M

A

Y

AV

P

1

Konyaspor 

2

1

1

0

2

1

1

4

2

Malatyaspor 

2

1

1

0

1

0

1

4

3

Trabzonspor

2

1

0

1

1

1

0

3

4

Göztepe

2

0

0

2

1

3

-2

0

3. Hafta Maç Sonuçları

Göztepe 2 – 0 Malatyaspor 

Konyaspor 0 – 1 Trabzonspor

Puan durumu şöyle olacaktır.

#

Takımlar

O

G

B

M

A

Y

AV

P

1

Trabzonspor

3

2

0

1

2

1

1

6

2

Konyaspor 

3

1

1

1

2

2

0

4

3

Malatyaspor 

3

1

1

1

1

2

-1

4

4

Göztepe

3

1

0

2

3

3

0

3

Bu maçlardan sonra mini ligimizin ilk yarısı bitti. Görüldüğü gibi, ilk yarının lideri Trabzonspor olmuştur. İkinci yarı maç sonuçlarını ve puan durumlarını siz yazabiliriniz. Biz burada sabit yapılan işlemleri bitireceğiz. Yukarıda verilen bilgilere göre sistemin işleyişine ait algoritmayı umarım kavramışsınızdır. Uygulamamızı yapmaya başlayalım.

Visual Studio programını açalım.

Yeni bir Web projesi oluşturalım. Projenin adını MiniCemilUstaLigi olarak belirleyelim. Uygulama dilini ise c# olarak seçelim.

Projeye yeni bir web sayfası ekleyelim. Sayfanın ismini superLig.html olarak belirleyelim. Öncelikle web sayfasına BootStrap kütüphanelerini ekleyelim.

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
Web sayfasının başlığını belirleyelim.
    <title>Cemil Usta Mini Süper Lig Turnuvası</title>
Daha sonra uygulama başlığını belirlemek için aşağıdaki etiketleri yazalım.
    <div class="jumbotron text-center">
        <h1>
            2019 Cemil Usta Mini Süper Ligi</h1>
        <p>
            Mini Lig için fikstür seçimi ve maçların oynanıp puanların belirlenmesi</p>
    </div>
Nasıl gidiyor kodlama işi. Şimdiden 3 etiket yazdık bile. Projemizi kaydedip çalıştıralım. Aşağıdaki pencere ekrana gelir.

Devam edelim kodlama işlemine. Şimdi her hafta oynanan maçları ve buna göre oluşan puan durumlarını belirlememiz gerekiyor. Bunun için iki sütunlu bir satır oluşturalım.

    <div class="container">
        <div class="row">
            <div class="col-sm-6">
            </div>
            <div class="col-sm-6">
            </div>
        </div>
    </div>
İlk sütunda 1. Haftaya ait maç sonuçlarını, ikinci sütunda ise puan durumunu görüntüleyeceğiz. Bunlar için table etiketini kullanalım. Buna göre maç sonuçları için table etiketi şöyle tanımlanmalıdır.
                <table class="table table-hover">
                    <caption class="text-center text-info">
                        1. Hafta Maç Sonuçları
                    </caption>
                    <tbody>
                        <tr>
                            <td>
                                Göztepe
                            </td>
                            <td>
                                1 - 2
                            </td>
                            <td>
                                Konyaspor
                            </td>
                        </tr>
                        <tr>
                            <td>
                                Malatyaspor
                            </td>
                            <td>
                                1 - 0
                            </td>
                            <td>
                                Trabzonspor
                            </td>
                        </tr>
                    </tbody>
                </table>
 
Nasıl. Table etiketiyle ligin birinci haftasına ait maç sonuçlarını gösteriverdik. Şimdi de takımların aldığı puanları ve sıralamaları gösterelim.

#

Takımlar

O

G

B

M

A

Y

AV

P

1

Konyaspor 

1

1

0

0

2

1

1

3

2

Malatyaspor 

1

1

0

0

1

0

1

3

3

Göztepe

1

0

0

1

1

2

-1

0

4

Trabzonspor

1

0

0

1

0

1

-1

0

Yukarıda verilen tabloya ait başlık satırını yazalım.

                    <caption class="text-center label-info">
                        Puan Durumu</caption>
                    <thead>
                        <tr>
                            <th>
                                #
                            </th>
                            <th>
                                Takımlar
                            </th>
                            <th>
                                O
                            </th>
                            <th>
                                G
                            </th>
                            <th>
                                B
                            </th>
                            <th>
                                M
                            </th>
                            <th>
                                A
                            </th>
                            <th>
                                Y
                            </th>
                            <th>
                                AV
                            </th>
                            <th>
                                P
                            </th>
                        </tr>
                    </thead>
Şimdi de ilk haftaya ait takımların puanlarını ve sıralamayı gösterelim.
               <tbody>
                        <tr>
                            <td>
                                1
                            </td>
                            <td>
                                Konyaspor
                            </td>
                            <td>
                                1
                            </td>
                            <td>
                                1
                            </td>
                            <td>
                                0
                            </td>
                            <td>
                                0
                            </td>
                            <td>
                                2
                            </td>
                            <td>
                                1
                            </td>
                            <td>
                                1
                            </td>
                            <td>
                                3
                            </td>
                        </tr>
                        <tr>
                            <td>
                                2
                            </td>
                            <td>
                                Malatyaspor
                            </td>
                            <td>
                                1
                            </td>
                            <td>
                                1
                            </td>
                            <td>
                                0
                            </td>
                            <td>
                                0
                            </td>
                            <td>
                                1
                            </td>
                            <td>
                                0
                            </td>
                            <td>
                                1
                            </td>
                            <td>
                                3
                            </td>
                        </tr>
                        <tr>
                            <td>
                                3
                            </td>
                            <td>
                                Göztepe
                            </td>
                            <td>
                                1
                            </td>
                            <td>
                                0
                            </td>
                            <td>
                                0
                            </td>
                            <td>
                                1
                            </td>
                            <td>
                                1
                            </td>
                            <td>
                                2
                            </td>
                            <td>
                                -1
                            </td>
                            <td>
                                0
                            </td>
                        </tr>
                        <tr>
                            <td>
                                4
                            </td>
                            <td>
                                Trabzonspor
                            </td>
                            <td>
                                1
                            </td>
                            <td>
                                0
                            </td>
                            <td>
                                0
                            </td>
                            <td>
                                1
                            </td>
                            <td>
                                0
                            </td>
                            <td>
                                1
                            </td>
                            <td>
                                -1
                            </td>
                            <td>
                                0
                            </td>
                        </tr>
                    </tbody>
Uygulamayı kaydedip çalıştıralım. Web sayfası çalıştırıldığında tarayıcıda aşağıdaki görüntü ekrana gelir.
Diğer haftalara ait puan durumlarının gösterimini size bırakıyorum. Verdiğimiz maç sonuçları örnek gösterimdi. Şimdi yukarıdaki sonuçlara bakarak hangi değişkenleri tanımlamamız gerektiğini bulmaya çalışalım. Fikri olan arkadaşlar yorumlar kısmından fikirlerini bizimle paylaşabilir.

 


İlgili Makaleler
Cimbomun Yer Aldığı 2023 Uefa Şampiyonlar Ligi A Grubundaki Takımları Table Etiketiyle Gösterimi
TrendYol 2023 - 2024 Süper Lig Fikstür Çekimini Yapan BootStrap Html Uygulaması-1
Web Sayfalarına Youtube Videolarını Ekleme
Web Tabanlı Uygulama Geliştirme Dersi Birinci Dönem Birinci Yazılı Çalışma Soruları
Jquery Uygulamalarında Ajax İsteği Yapılınca Oluşabilecek Hataları Yakalama
Form Bloğu İçinde Kullanılan fieldset ve legend Etiketleri
2022 Katar Dünya Kupasında Belirlenen Grupları Liste Etiketini Kullanarak Web Sayfasında Görüntüleme
BootStrap Temayla Kullanıcı Adı ve Şifre Girişi Kontrolü
Visual Studio 2022 Programında Table Etiketini Kullanarak Hesap Makinesi Tasarımını Web Sayfasında Yapma
Failed to load resource: the server responded with a status of favicon.ico 404 (Not Found) Hatasını Düzeltme
Birden Fazla Tanımlanan Div Etiketlerini Aynı Sütunda Gösterme İşlemi Nasıl Yapılır
2022 Katar Dünya Kupasında Belirlenen Grupları Table Etiketini Kullanarak Web Sayfasında Görüntüleme
Web Sayfasına Eklenen Resmi Gösterip Gizleyen Uygulamayı Javascript Kodlarıyla Gerçekleştirme
Cimbomun Yer Aldığı 2023 Uefa Şampiyonlar Ligi A Grubundaki Takımların Div Etiketiyle Gösterimi
Visual Studio 2022 Programında Takımlarımızın Uefa Avrupa Ligi Maç Özetlerini Gösteren Web Sayfası Uygulaması
Form Elemanlarını Kullanarak Web Sayfasında Kayıt Formu Tasarımı
Form Bloğu İçinde Kullanılan Meter Etiketi ve Özellikleri
Form Bloğu İçinde Form ve Veri Giriş Özellikleri
Jquery Ajax 200 OK JSON ParseError Hatasını Düzeltme
Visual Studio 2022 Programında Takımlarımızın Uefa Avrupa Ligi Puan Durumunu Div Etiketiyle Listeleyen Web Sayfası Uygulaması

Yorum Ekle
   
Kötü
İyi