Html

2020 - 2021 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
Web Sayfasına Eklenen Resmi Gösterip Gizleyen Uygulamayı Javascript Kodlarıyla Gerçekleştirme
2020 - 2021 Süper Lig Fikstür Çekimini Yapan BootStrap Html Uygulaması-1
Web Sayfalarına Youtube Videolarını Ekleme
BootStrap Temayla Kullanıcı Adı ve Şifre Girişi Kontrolü
Failed to load resource: the server responded with a status of favicon.ico 404 (Not Found) Hatasını Düzeltme
Input Html Etiketinin Pattern Özelliği
Terminal ve Sunucu Tabanlı Web Projeleri Arasındaki Farklar
Jquery Uygulamalarında Ajax İsteği Yapılınca Oluşabilecek Hataları Yakalama
Web Sayfalarında BootStrap Tablo Oluşturma
Web Sayfasında Marquee Etiketiyle Resim Kaydırma İşlemleri
Web Sayfasında Marquee Etiketiyle Metin Kaydırma İşlemleri
Jquery Ajax 200 OK JSON ParseError Hatasını Düzeltme
Html5 Canvas Nedir, Canvas Nasıl Kullanılır, Canvas Elementiyle Neler Yapılabilir
Listeleme Etiketleri
Web Sayfalarında İç İçe Çerçeve Oluşturma
Web Sayfalarında Fare İmleci Şeklini Değiştirme
Web Sayfalarında Arkaplan Resmini Yükleme Çeşitleri
Web Sayfalarında Sayfa Yönlendirme İşlemi
Metin Düzenleme Etiketleri
Görünüm Düzenleme Etiketleri

Yorum Ekle
   
Kötü İyi