section etiketi HTML5'de 'Semantic Elements' başlığı altındaki etiketlerden bir tanesidir. Semantic elementler, kodun okunurluğunu kolaylaştırır ayrıca SEO açısından da önemlidir. Bu link den 'Semantic Elements' başlığı altındaki section da dahil olmak üzere diğer etiketler hakkında daha fazla bilgi edinebilirsin.

Yapılmasının bir çok yolunun olması bir yana, array_reduce metodu ile nasıl yapılır? Bildiğim kadarıyla açıklamaya çalışayım.

array_reduce metodu üç parametre alıyor;

• İlk parametre, işlem yapmak üzere gezinmek istediğimiz array.
• İkinci parametre, yapacağımız işlemleri gerçekleştirecek bir callback fonksiyon. (bunun da iki parametresi var)
  • İlki, PHP'nin kendi sitesinde $carry olarak adlandırdığı, genelde "accumulator" olarak da bilinen, her bir iterasyonda modifiye edilen/güncellenen, yapılan işlemler sonucu döndürülecek olan değişken.
  • İkincisi ise PHP'nin kendi sitesinde $item olarak adlandırdığı, gezinmek üzere verdiğimiz array deki her bir değeri sırayla döngü boyunca tutacak olan değişken.
• Üçüncü parametre ise isteğe bağlı olan, callback fonksiyonumuza verdiğimiz "accumulator"ın başlangıç değeri.

Aşağıdaki kodun kabaca ne yaptığını anlatayım, array_reduce metodu ile $data mız içerisinde dönüyoruz. Her döngüde $acc içerisinde $date isimli bir keyin(değişkenin) olup olmadığını kontrol ediyoruz, yoksa bu isimde bir key oluşturup value olarak da boş bir array veriyoruz. Daha sonra array_push metodu yardımıyla $obj mizi az önce oluşturduğumuz ya da daha önce oluşturulmuş olan $acc->$date arrayine pushluyoruz. Son olarak elimizdeki $acc değerini döngünün sonraki iterasyonunda kullanılmak(modifiye etmek/güncellemek) üzere döndürüyoruz.

function categorizeData($acc, $obj)
{
	$date = $obj->date;

    if(!isset($acc->$date)){
    	$acc->$date = array();
    }
 
    array_push($acc->$date, $obj);
    return $acc;
}

// $data = soruda belirtmiş olduğun array
$categorizedData = array_reduce($data, "categorizeData", (object) array());
print_r($categorizedData);

Sonuç:

stdClass Object
(
    [20200629] => Array
        (
            [0] => stdClass Object
                (
                    [count] => 25
                    [date] => 20200629
                    [paymentType] => cod
                )

            [1] => stdClass Object
                (
                    [count] => 64
                    [date] => 20200629
                    [paymentType] => credit card
                )

        )

    [20200630] => Array
        (
            [0] => stdClass Object
                (
                    [count] => 33
                    [date] => 20200630
                    [paymentType] => cod
                )

            [1] => stdClass Object
                (
                    [count] => 110
                    [date] => 20200630
                    [paymentType] => credit card
                )

        )

)

$categorizedData değişkeni üzerinde foreach yardımıyla istediğin sonuca ulaşabilirsin.

foreach($categorizedData as $date => $data) {
    echo "<b>$date</b><br>";
    foreach($data as $val){
        echo "$val->paymentType : $val->count<br>";
    }
    echo "<br>";
}

Kullanmıyorum ancak kâğıt üstündeki özellikleri ve fiyatına bakılınca rakipsiz olarak gördüğüm Monster Aryond A32 V1.1'e bir göz atmanızı tavsiye ederim. Dediğim gibi kullanmıyorum fakat arada bu tarz teknolojik aletleri araştırmayı seven birisiyim. "Alacak olsam bunu alırdım" listemdeki aletlerden bir tanesi. Malzeme kalitesi, garantisi, teknik servisi konusunda bir bilgim yok. Bu tarz bilgileri de öğrenip göz önüne alarak bir tercih yapabilirsin. Şimdiden iyi günlerde kullanman dileğiyle.

test1 fonksiyonu içerisinde tanımlanan x değeri sadece orada kullanılabilir. x'i global olarak tanımlarsan her yerden okuyabilirsin ya da test2 fonksiyonuna x değerini parametre olarak gönderebilirsin. Aşağıdaki örnek kodu inceleyebilirsin.
(ayrıca test2 fonksiyonu içerisindeki alert fonksiyonunu yanlış çağırmışsın)

var t = "global değişken";

function test1(){
    var x = "asd";
    test2(x);
}

function test2(z){ // test2 ile yollanan değer artık bu fonksiyon içerisinde z olarak kullanılacak.
    alert(z);
    alert(t);
}

test1();

display: flex ile child elementleri yan yana getirebilirsin. Aynı zamanda belli bir yüksekliğe sahipse align-items: center ile dikeyde ortalama yapabilirsin.
Çok basic bir header örneğini aşağıya bıraktım.

<header>
  <div class="logo">LOGO</div>
  <nav class="menu">
    <ul>
      <li><a href="#">Menu</a></li>
      <li><a href="#">Menu</a></li>
      <li><a href="#">Menu</a></li>
      <li><a href="#">Menu</a></li>
    </ul>
  </nav>
  <div class="test">test</div>
</header>

* { 
  list-style: none;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;
} /* Reset */

header {
  display: flex; /* Logo ve menüyü yan yana getirir */
  height: 80px;
  align-items: center; /* Header içerisindeki child ları dikeyde ortalar */
  border-bottom: 1px solid #ccc;
  padding: 0 100px;
}
.menu ul {
  display: flex; /* Menüdeki li leri yan yana getirir */
  margin-left: 30px;
}
.menu ul li:not(:first-child) {
  margin-left: 10px;
}
.test {
  margin-left: auto;
}

Güzel soruymuş kardeşim inşallah cevaba ulaşırsın...

Formuna #form id si verip aşağıdaki gibi dener misiniz? Veri başarıyla URL de okunuyorsa GET uygulamanda sorun yok. Veriyi nasıl çekmeye/kaydetmeye çalıştığın kısım problemli.

$("#form").on("submit", function(e){
  $.ajax({
    url: '/',
    type: 'get',
    data: autocomplete._selectedOption
  });
  
  e.preventDefault();
});

Fakat dediğim gibi bu şekilde bir submit işlemi sağlıklı mı değil mi emin değilim, dikkatinizde olsun.

Sağlıklı veya doğru bir çözüm müdür bilmem ama gördüğüm kadarıyla selected value ya autocomplete._selectedOption.value ile erişebilirsin. Submit işlemi gerçekleştiğinde arkada AJAX ile bu veriyi gönderebilirsin.