Bu yazımda amatörce bedava site nasıl açılır ve ayrıca bu site için resim ve müzikler gibi dosyaları Google Drive dan nasıl alabiliriz. Bunları anlatmaya çalışacağım.

Basit bir HTML sayfası hazırladım. Sadece 1 açılır menü penceresi var ve bir de AUDIO player var. Oldukça basit.

Fakat kullanılan programlama basit olmasına rağmen çok çeşitli öğelerden oluşuyor. Bu da sizin için güzel bir deneyim olacak diye düşünüyorum.
Öncelikle mantığını inceleyelim.
https://www.000webhost.com/cpanel-login?from=panel

Sitesinden kendinize bir hesap almanız gerekiyor. Bu site size web sitenizi oluşturacak yer vermekle birlikte bedava veritabanı açma imkânı ve kolay bir şekilde web sitenizi oluşturacak araçlar sağlar.
Siteniz (benim örnek sitemdeki gibi ) bu şekilde çağırılacaktır. https://97safak.000webhostapp.com/
Bu site ismi akılda kalıcı olmadığı için .com .net .tk gibi uzantılarla kendi sitem çağırılsın diyorsanız. Bedava DOMAIN almanız gerekir. Ben buradan aldım. Buradan kendi sitenizin nasıl çağırılmasını istiyorsanız ismini belirlemeniz gerekir. https://www.freenom.com/tr/index.html?lang=tr

Bu site 12 aylık bedava domain veriyor sonrasında isterseniz paralı isterseniz bedava yenileyebiliyorsunuz.

Şimdi artık bedava domain var bedava hosting var. Bunları birbirine bağlamanız gerekiyor. Freenom sitesinde nameserver denilen yerlere 000webhost’un verdiği nameserver isimlerini Freenom sitesine yazmanız yeterli. 000webhost kısmına da aldığınız domain ismini yazmanız yetiyor. Bu şekilde artık sitenizi belirlediğiniz isim ile çağırabilirsiniz.

Bu firmalar, bedava olduğu için yer olarak size düşük kapasite veriyorlar. Çok da düşük sayılmasa da resim ve müzikleri sayfaya eklemeye başladığınızda verdikleri yer doluyor.

Bundan dolayı resim müzik ve diğer yer kaplayan büyük kaynak dosyalarımızı Google Drive da tutarsak, yer tasarrufu sağlamış oluruz. Fakat burada google drive resim linki verdiğinizde ekranda resim görünmüyor. Bunun yerine sadece google drive’a gönderen link görünüyor. Bu istemediğimiz bir durum. Bizim istediğimiz resim gelsin dediğimizde otomatik açılmasıdır.
Şunu da söylemeliyim neden google drive? Çünkü bedava 15gb a kadar yer veriyor. Bundan dolayı bunu kullanabiliriz.

Google drive dan direkt paylaşılabilir bağlantıyı al dediğinizde aşağıdaki şekildeki gibi görünür.

https://drive.google.com/file/d/1RrTvEWA6l3o7URxMBcTTy6SmF7nozQ-R/view?usp=sharing

Yukarıdaki link’e tıkladığınızda google drive sayfası açılır ve ses çalmaya başlar. Kırmızı ile işaretlenen yerler dosya paylaşılan isimdir. 

Aşağıdaki link’e basarsanız normal internet sayfası gelir ve ses dosyası çalmaya başlar.
http://docs.google.com/uc?export=open&id=1RrTvEWA6l3o7URxMBcTTy6SmF7nozQ-R

Aradaki fark bu kısımdadır. http://docs.google.com/uc?export=open&id= Bu dizilimde dosyanın istenen yere gönderilip açılmasını sağlar. = işaretinden sonrası ise 1RrTvEWA6l3o7URxMBcTTy6SmF7nozQ-R
bu dizilim dosyanın paylaşılabilir ismidir. Web sitenizde adresleri yazarken sadece bu kısım dosya ismine göre değişir. Bu kısım dosya paylaşılabilir bağlantıyı al dediğinizde görünen kısımdır. Buradan sadece dosya adını alacaksınız. 

Ayrıca resim çalışsın derseniz Link: Link çalışmazsa google chrome üzerine yapıştırıp deneyin. https://docs.google.com/uc?export=open&id=1bEd0jTjP7jLLqJpeXXbLEzhJ4SNmJfml

Buraya kadar neden ve nasıl google drive kullandığımızı gördük. Şimdi ise programın diğer öğelerini neden kullandık ona bakalım.  Öncelikle bir açılır pencere kullanmam gerekiyordu. Bu pencerede şarkı isimleri olmalıydı. Seçmek için bu isimleri HTML programımın içine yazabilirdim. Burada 2 dezavantaj olacaktı.
1- Yüzlerce şarkı ismini yüklemek Web sitesinin geç açılmasına sebep olacaktı.
2- MP3 dosyalarımın yenilerini eklemek istediğimde programı tamamen açıp içine eklemem gerekiyordu.
Bu dezavantajları yok etmek için şarkı isimlerini bir dosyaya yazdım. HTML yüklendikten sonra otomatik olarak SCRIPT kodu ve PHP kodu çalışarak isim dosyasını okuyor ve bunu açılır pencerenin seçenekleri olarak yazıyordu. Bu daha hızlı oluyordu ve kullanıcı kolay kolay gecikmeyi fark edemiyordu.

Fakat bir problem vardı. Java script ile dosya okuma biraz karışık geldi. Bundan dolayı dosyayı PHP programıyla okumaya karar verdim.
Java script AJAX programıyla PHP dosyasına okumasını söylüyor. PHP okuduktan sonra bunu java script koduna veriyor. ( Tabii ki java script ile okusam daha hızlı olacaktı ama anlamam biraz zor olduğundan php daha kolay geldiğinden böyle yaptım) Gelen şarkı isimleri hepsi birden okunuyordu ve script koduna iletiliyordu.

PHP den gelen bilgiyi parçalamam gerekiyordu

Bu şekilde gelen isimleri (,) işaretine göre parçalayarak açılır menüye ekledim. $txt.split(“,”); komutuyla bir dizi(array) şekline çevirdim. Bundan dolayı her ismin sonunda (,) kullanılmak zorundadır.

<script>

$.ajax({
  method: "POST",
  url: "wrap2.php",
  data: { text: $("p.unbroken").text() }
})
  .done(function( response ) {
    //$("p.demo").text(response);
    $txt =response;
    //$("p.broken").html(response);
    var arr = $txt.split(",");
 // document.getElementById('demo6').innerHTML =$txt;
  
  var i;
    for (i = 0; i < arr.length; i++) {
    res = arr[i] ;
    var x = document.getElementById("album-select");
    var option = document.createElement("option");
    option.text = res;
    //document.getElementById('demo5').innerHTML =arr.length;
    x.add(option);
 
   }
  
  });

Buraya kadar açılır menümüzü oluşturduk.
Artık bunu seçtiğimizde oluşturduğumuz veritabanından (database SQL) çağırmamız gerekir. Bunu da yine script kodu ve açılır menünün select index özelliğiyle yapıyoruz. Bir isim seçtiğinizde 0 dan başlayarak her satıra +1 ekleyerek bir görünmez numaralandırma vardır. Bu numaralandırma select dediğimiz seçme işlemi yaptığımızda script koduyla elde edilir. Bu şekilde elde edilen numarayı ise veritabanından çağırmamız gerekiyor. Yine burada PHP devreye giriyor.
Java script veritabanı okuyacak programa seçtiğimiz satır numarasını veriyor. PHP programı ise veritabanındaki id numarasıyla eşleşen bilgiyi okur ve script koduna verir. Bu şekilde bilgiyi alan script kodu AUDIO tag dediğimiz player’ın SRC(source=kaynak) dediğimiz özelliğine google drive üzerindeki şarkının Link’ini verir. Audio player şarkıyı çalmaya başlar.

Burada veritabanı dedik. Videoda nasıl açıldığını göreceksiniz. 000webhost üzerinden web siteniz için bedava yer aldığınızda, aynı zamanda veritabanı için de size yer veriyor. Siz de şarkıların linklerini bu veritabanına yazarak sitenizin daha hızlı yüklenmesi ve hızlı bir şekilde şarkı çalmasını sağlarsınız.

Hem de bu şekilde veritabanına yeni bilgileri kolaylıkla eklersiniz.
Veritabanı ve ilgili PHP dosyalarını küçük bir değişiklik ile ESP8266 modüllerinizde kullanabilirsiniz. Bu linkteki yazı size örnek olacaktır.

Anlattıklarımızı toparlarsak:
Öncelikle bir HTML dosyamız olacak.
Ayrıca şarkı isimlerini içine yazacağımız bir txt dosyası olacak.
Bunun yanı sıra şarkı linklerinin tutulduğu bir veritabanı olacak. (Google drive şarkı linkleri)
Tabii ki aradaki bağlantıyı sağlayan PHP dosyaları da olacak.

db_connect.php    PHP dosyalarının veritabanına bağlanmasını ayarlıyor (kendi veritabanınıza göre ayarlayın. )

dbconfig.php  Veri tabanı şifrelerini tutuyor.( kendi veritabanınıza göre ayarlayın)

specific.php     Hangi id numarası verildiyse o veriyi okuyup geri veriyor.

mp3_php_dene.html        MP3 player programı ( otomatik çalışmada index.html olarak isim değişecek)

webdictionary.txt Şarkı isimlerini tutan txt dosyası

 wrap2.php            Şarkı isim dosyasını okuyan dosya.

Yukarıdaki dosyalar bir bütündür. Bu dosyaları kendi sitenizin bulunduğu yerde public_html dizinine kopyalarsanız veri tabanınızın durumuna göre sizde de otomatik çalışacaktır.

 

Yukarıdaki resimde webdictionary.txt yani isimlerin tutulduğu dosyanın içeriğini görüyorsunuz. Burada dikkat etmemiz gereken nokta satır sonunda (,) işareti konulması. Program buna göre satırları ayırıyor. Fakat dikkat ederseniz son satırda yoktur. İsterseniz koyabilirsiniz. Bu haliyle açılır pencerede isimleri gördüğünüzde en alt kısıma kadar tüm isimleri görürsünüz. Şayet (,) koyarsanız en alt kısımda boş bir satır göreceksiniz. Tabii ki bu boş kısmın veritabanında karşılığı olmadığından çalışmayacaktır.

Sitede kullanılan araçların öğreticilerine ve daha fazla öğreticiye aşağıdaki sitelerden ulaşabilirsiniz.

HTML açılır pencere örneği : https://www.w3schools.com/tags/tag_option.asp

Audio player örneği              : https://www.w3schools.com/tags/tag_audio.asp

Audio player örnek SCRIPT : https://www.w3schools.com/jsref/dom_obj_audio.asp

HTML javascript php gibi programları öğrenmek istiyorsanız W3SCHOOLS sitesini rahatlıkla kullanabilirsiniz. Fakat ben her şeye bakayım derseniz zorlanacaksınız çünkü çok bilgi var. Program yaparken neye ihtiyacınız varsa arama yaparken yanına w3schools yazarsanız öncelik o bilgiler gelecektir. Fakat sadece bu site ile kendinizi kısıtlamayın. İnternet üzerinde çok faydalı bilgiler de var. Bundan dolayı sadece komut yazıp aramak yerine bir detaylı cümle yazın ki istediğiniz bilgiler ön planda çıksın. Mesela audio player javascript w3schools gibi yazılabilir.

000webhost ta nasıl hesap alınır site açılır.

https://www.000webhost.com/cpanel-login?from=panel

000webhost.com sitesinden bir host hesabı aldığınızda bu ekran karşınıza çıkar.

Şayet sitenizi oluşturduysanız sol taraftaki kutu çıkar ve üzerine geldiğinizde siteyi yönet yazar. Bastığınızda ise aşağıdaki menü çıkar.

Sonrasında buradan dosya yöneticisini çağırıp aşağıdaki ekrandaki gibi web sitesi dosyalarının olduğu yere gelirsiniz.

Burada public_html dizini sizin web sitenizin bulunduğu dizindir. Bu dizin içine girip dosyalarınızda düzeltme yapabilirsiniz. İsterseniz sağ tuş ile edit seçip düzeltirsiniz isterseniz view seçeneği ile ekranda durumu görebilirsiniz.

Resimden de göreceğiniz gibi html programınızın index.html olarak kullanılması gerekiyor. Sebebi ise siteyi çağırdığınızda index.html yi arara bulursa otomatik ekrana getirir. Mp3player.html yazdığınızda otomatik gelmez sizin yazarak çağırmanız gerekir bundan dolayı otomatik açılmasını istediğiniz html dosyanız index.html olmak zorundadır.

Dosyanızda EDIT işlemini seçerseniz aşağıdaki şekilde bir ekran karşınıza gelir.

Yukarıdaki resimde size bedava yapabileceğiniz işlemleri gösterir. Aktif olanlar yapabilecekleriniz inaktif olanlar ise paralı olarak kullanabileceğiniz özelliklerdir.
Bu özelliklerin arasında wordpress görüyorsunuz. İsterseniz sitenizi wordpress sitesi olarak da açabilirsiniz. Hazır bedava temalar kullanabilirsiniz. Ücretsiz yeriniz az olduğu için bir süre sonra yer sıkıntısı çekebilirsiniz. Fakat denemek isterseniz kullanabilirsiniz gibi görünüyor. Ben denemedim.

Yukarıdaki resimde ise PHP versiyonu görüyorsunuz. Ben düşük versiyon kullandım yeterliydi. Siz daha yüksek versiyonu kullanabilirsiniz. Özellikle WordPress site kuracaksanız ki wordpress yoğun şekilde PHP kullanır. Bundan dolayı son versiyon ya da sondan bir evvelki versiyonu kullanabilirsiniz.

 

Yukarıdaki resimlerde domain aldığınız site ile webhost sitesinin nasıl birbirine bağlandığını görebiliyorsunuz. Freenom sitesine nameserver ları yazıyorsunuz webhost sitesinde ise domain ismini sitenize bu menüden bir alan adı bağla butonuyla bağlıyorsunuz.

Aşağıdaki resimde aynı sitenin 2 görüntüsü var. 1. Si dosya yöneticisinden view ile açıldı. Burada site ismi 97safak.000webhost…. olarak gösterir. Diğeri ise domain ile çağırıldığından domain ismiyle başlar. Sizler sitenizi test ederken önce webhost üzerinden index.html dosyanıza sağ tıklayıp view menüsüyle çalıştırmalısınız. Bu şekilde çalışıyorsa yukarıdaki gibi domain bağlantısını yaptığınızda otomatik çalışacaktır.

Sitenizi ilk defa oluşturacaksanız isterseniz bir örnek html dosyasını yukarıda anlattığım gibi webhost sitesine public_html dizinine yerleştirirsiniz. Ya da wordpress seçeneğini kullanırsınız Ya da ilk gelen bu ekrandan site oluştur seçebilirsiniz. Ya da ZYRO ile kolay site oluşturabilirsiniz.

 

Sitenin örnek çalışmasını izlemek için bu link’e tıklamanız yeterli. 

Tüm dosyalara buradan ulaşabilirsiniz.

DİKKAT : Github üzerinde bazen dosyaları direkt indir ya da sıkıştır indir butonunu göremezsiniz. Bu gibi durumlarda kaydetmek istediğiniz dizine girin ve adres çubuğundaki adresi bu sitedeki kutuya yapıştırın. Programların hepsi pc’nize inecektir.