Meşe Bilişim

Yazilim

Projemize Detay Sayfasının Oluşturulması;

Projemizde yazılmış olan gönderilerin ayrıntılı bir şekilde gösterileceği bir sayfa oluşturarak başlıyoruz. ilk olarak templates dizini altına bir adet "detay.html" adında sayfa oluşturuyoruz. Bu sayfada blogta yer alan gönderiye ait video, resim gibi içerikleri görüntülenecek. Ardından blog uygulamamızın altına yeni bir model oluşturmamız gerekli, bunun için models.py dosyasının içerisine;
 

slug = models.SlugField(max_length=80, null=True, blank=True, help_text=u"Link otomatik alinir, Lutfen Degistirmeyiniz!")
 

kodunu yerleştiriyoruz. Model kodlandı bunun uygulamamıza uygulanması için;

./manage.py makemigrations
./manage.py migrate

komutlarını pycharm terminalden ilgili projede çalıştırıyoruz. Böylelikle uygulamamız için gerekli model blog paneline ve veritabanına yansımış ve oluşturulmuş oluyor. Blog detay sayfası için oluşturduğumuz model ile gerekli olan Slug temel, basit ismi kullanarak ulaşım sağlayacağız. Detaylar için Html sayfamız oluşturmuştuk. Bu sayfaya yönlendirme yapmak için view oluşturmamız gerekli, blog uygulamamızın içindeki views.py dosyasına;

def detay(request, url):
     val = Blog.objects.get(slug = url)
     return render(request, 'detay.html',locals())

kodunu ekleyerek yeni bir tanım yapmış olduk. Bununla birlikte "val" adında kullanabileceğimiz detay sayfasına ait bir nesne tanımlamış olduk. Detay sayfasınına yönlendirme için son bir adımımız kaldı. Proje içerisinde yer alan urls.py içerisinde eklemelerin yapılması, kodun tamamı yer almakta gerekli düzenlemeleri ihtiyacınıza göre düzenliye bilirsiniz.

urlpatterns = [
    url(r'^$', views.index , name='index'),
    url(r'^admin/', admin.site.urls),
    url(r'^detay/(?P[^/]*)/$', views.detay , name='detay'),
]

urlpatterns += [
    url(r'^media/(?P.*)$', serve, {'document_root': settings.MEDIA_ROOT,}),
    url(r'^static/(?P.*)$', serve,{'document_root': settings.STATIC_ROOT,}),

]

urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

Biz bu kodda sadece 4.satır olan detay kısmını ekledik diğer "static" ve "media" kısımları resim ve video ile ilintilidir. Projede medya ve statik kullanımı için bir iki küçük eklenti daha yapmamış olmamış gerekiyor. Bu eklentiyi de proje de yer alan settings.py içerisinde yapıyoruz. Geniş bir şekilde kod verilmiştir. konumunu doğru bir şekilde bulunabilmesi için;

TIME_ZONE = 'UTC'

USE_I18N = True

USE_L10N = True

USE_TZ = True

# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/1.9/howto/static-files/

STATIC_URL = '/static/'
MEDIA_URL = '/media/'

MEDIA_ROOT = os.path.join(BASE_DIR, '../proje_media')
STATIC_ROOT = os.path.join(BASE_DIR, '../proje_static')

STATICFILES_FINDERS = (
'django.contrib.staticfiles.finders.FileSystemFinder',
'django.contrib.staticfiles.finders.AppDirectoriesFinder',
)

STATICFILES_DIRS = (BASE_DIR + '/static/',)

STATICFILES_STORAGE = 'whitenoise.django.GzipManifestStaticFilesStorage'

SESSION_COOKIE_AGE = 60*100 # 100 dakika sonra logout oturumu otomatik kapat

FILE_UPLOAD_MAX_MEMORY_SIZE = 510241024 # 5mb

gerekli olan kısımlar "media" ve "static" isimlerini içerek bölümlerdir. Böylelikle; Detay sayfamız çalışır bir hale gelmiş tüm hazırlıklarımızı tamamlamış olduk. 

Projemize Resim ve Video ekleme;

Blog gönderilerinin içerisine resim ve video ekleme yapacağız. Bunları da hazırlamış olduğumuz detay sayfasında görüntülemiş olacağız. İlk olarak modellerimizi oluşturalım.

    image = models.ImageField(upload_to='BlogResimleri/%Y/%m/%d', default='BlogResimleri/blog.png')
    video = models.FileField(upload_to='Videos/%Y/%m/%d', blank=True)
    link = models.URLField(blank=True)

Yukarıdaki kodlarda bir adet resim içeriği tutacağımız bir model açıktık. İki adette video tutmak için model oluşturduk. İlk ki bir video dosyasını içeride tutacağımız, diğeri ise dışarıda örnek olarak youtube'dan alacağımız link ile tutacağımız video modellerimiz oluşturulmuş oldu.Sırada yazmış olduğumuz modellerin oluşturulması için;

./manage.py makemigrations
./manage.py migrate

komutlarını çalıştırdık. Projemizi çalıştırarak admin paneline gidiyoruz buradan, yeni bir blog içeriği oluşturup, içerisine media dizini içerisine yerleştireceğimiz video ve resim dizinleri altında yer alan görüntülenecek olan içerikleri ekliyoruz. Bu görüntülemeler detay sayfasında yer alacağı için detay.html içerisine resim için;

<img src="{{val.image.url}}" />

Videoyu dizinden göstermek için;

<video controls="" height="480" src="{{val.video.url}}" type="video/mp4" width="640"></video>

Videoyu link üzerinden göstermek için;

<iframe allow="autoplay; encrypted-media" allowfullscreen="" frameborder="0" height="315" src="{{val.link}}" width="560"></iframe>

kodlarını kullanıyoruz. Vermiş olduğunuz views içerisindeki nesne ismine göre "val" farklı olabilir ya da model isimlerinize göre "val.link" veya "val.video" farklı olabilir. Dizinden bir şeyler çektiğimiz "upload_to" kaynak içeren modellerimiz için sonlarına "val.video.url" gibi ".url" eklemesi yapıyoruz. Son işlemimiz ise videolarımızı görüntülerken kullanıcı eğer video yüklediyse onu, ya da linkte yer alan videoyu göstereceğiz. Sonuç olarak bir adet video içeriği görüntülenmiş olacak. bunun için video görüntüleme kodlarımızı SNIPPET dediğimiz "{% %}" işaretleri içerisine alıp basit bir if koşulu kullanacağız.

{% if val.video.url != null %}
            <video controls="" height="480" src="{{val.video.url}}" type="video/mp4" width="640"></video>
{% else %}
            <iframe allow="autoplay; encrypted-media" allowfullscreen="" frameborder="0" height="315" src="{{val.link}}" width="560"></iframe>

 {% endif %}