Blogları kart olarak göstermek

Blog listelemesini değiştirmek için "Görüntülenebilir Sorugular"ın Sonuç Görüntüleme Şablonu alanını "Tablo" değil "Özel kart" seçmemiz ve "Kart görünümü şablon sınıfı" alanında kendi belirteceğimiz "ResultsViewer" dan türeyen bir görünümü bildirmemiz gerekiyor.

Bunun için öncelikle ResultsViewer dan türeyen BlogViewer sınıfını oluşturuyoruz.

BlogViewer sınıfı bir görünüm olduğu için App\Views isim uzayı altına oluşturulmalıdır.

getTemplateFile fonksiyonu soyut olan ResultsViewer sınıfından kalıtıldığı için yeniden yazılmalıdır. Çevrilen değer bu görünümün kullanacağı twig dosyasının adıdır. Bu dosya tema içerisinde templates/views altında bulunmalıdır.

Görüntülenebilir sorguda ise şu ayarı yapıyoruz:

Tema dizininde templates/views altında blog-viewer.twig dosyası oluşturuyoruz.

Bu aşamada /blog sayfasına baktığımızda sayfanın içeriğinin boş olduğunu göreceğiz. Bunun nedeni BlogViewer tema dosyasına hiçbirşey yazmamış olmamızdır.

CoreDB içerisinde bulunan Table (Tablo) görünümü de ResultsViewer'dan türemektedir. Bunun için hazırlayacağımız twig dosyası için Table görünümünün kullandığı table.twig dosyasından kopya çekebiliriz.

table.twig dosyası aşağıdaki gibidir.

<div class="table-responsive">
	<table class="{{ view.classes|join(" ") }}" {{ view.renderAttributes()|raw }}>
		<thead>
			<tr>
			{% for key, header in view.headers %}
				<th>
					{% if view.orderable and not( key matches '/^\\d+$/') %}
						<a href="?{{ view.filter_params|url_encode }}&orderBy={{key}}&orderDirection={{ view.orderBy == key and view.orderDirection == "DESC" ? "ASC" : "DESC" }}"
							class="fw-bolder text-nowrap">
							{{ header }}
							{% if view.orderBy == key and view.orderDirection == "DESC" %}
								<i class="fa fa-sort-down"></i>
							{% else %}
								<i class="fa fa-sort-up"></i>
							{% endif %}
						</a>
					{% else %}
						{{ header }}
					{% endif %}
				</th>
			{% endfor %}
			</tr>
		</thead>
		<tbody>
			{% for row in view.data %}
				<tr>
					{% for key, data in row %}
						<td>
							{{ data }}
						</td>
					{% endfor %}
				</tr>
			{% endfor %}
		</tbody>
	</table>
</div>

Twig tarafında

• "view" ile ifade edilen değişken görünüm sınıfını ifade eder.
• "view.headers" görünüm tablo başlıklarını,
• "view.orderable" görünümün sıralanabilir olup olmadıdığını
• "view.filter_params" url üzerinden gönderilen filtre parametrelerini
• "view.orderBy" url üzerinden belirtilen sıralama kolonunu
• "view.orderDirection" url üzerinden belirtilen sıralama şeklini
• "view.data" ise satır ve sütün olarak, sorgu sonucunda elde edilen verileri ifade eder.

İstenilen değişkenler kullanılıp istenilenler kullanılmayabilir.

Şablon olarak başlık kısımlarının kullanılmadığı durumda aşağıdaki görünüm şablonunun kullanılması tavsiye edilir.

<div class="{{ view.classes|join(" ") }}" {{ view.renderAttributes() }}>
	{% for row in view.data %}
		<div>
			{% for key, data in row %}
				<div>
					{{ data }}
				</div>
			{% endfor %}
		</div>
	{% endfor %}
</div>

Blog kartları için kullanacağımız HTML ve Bootstap şablonunu belirlemek amacıyla Bootstrap Cards sayfasına bakılabilir.

Basitçe şu kart yapısını kullanırsak:

<div class="card m-2">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Hazırlayacağımız twig dosyası aşağıdaki gibi olmalıdır:

<div class="{{ view.classes|join(" ") }}" {{ view.renderAttributes() }}>
	{% for row in view.data %}
		<div class="card m-2">
			<div class="card-body">
				<h5 class="card-title">{{ row.title }}</h5>
				<p class="card-text">{{ row.body|raw }}</p>
				<a href="#" class="btn btn-primary">Go somewhere</a>
			</div>
		</div>
	{% endfor %}
</div>

Burada body alnı twig ya da view üzerinde tanımlanacak php metodları ile filtrelenebilir, özeti çıkarılabilir.

Bu aşamada blog sayfası aşağıdaki gibi görüntülenecektir: