\n\u00d6ncelikle mant\u0131\u011f\u0131n\u0131 inceleyelim.<\/strong><\/span>
\nhttps:\/\/www.000webhost.com\/cpanel-login?from=panel<\/a><\/strong><\/p>\n
Sitesinden kendinize bir hesap alman\u0131z gerekiyor. Bu site size web sitenizi olu\u015fturacak yer vermekle birlikte bedava veritaban\u0131 a\u00e7ma imk\u00e2n\u0131 ve kolay bir \u015fekilde web sitenizi olu\u015fturacak ara\u00e7lar sa\u011flar. Bundan dolay\u0131 resim m\u00fczik ve di\u011fer yer kaplayan b\u00fcy\u00fck kaynak dosyalar\u0131m\u0131z\u0131 Google Drive<\/strong> da tutarsak, yer tasarrufu sa\u011flam\u0131\u015f oluruz. Fakat burada google drive<\/strong> resim linki verdi\u011finizde ekranda resim g\u00f6r\u00fcnm\u00fcyor. Bunun yerine sadece google drive\u2019a g\u00f6nderen link g\u00f6r\u00fcn\u00fcyor. Bu istemedi\u011fimiz bir durum. Bizim istedi\u011fimiz resim gelsin dedi\u011fimizde otomatik a\u00e7\u0131lmas\u0131d\u0131r. Google drive dan direkt payla\u015f\u0131labilir ba\u011flant\u0131y\u0131 al dedi\u011finizde a\u015fa\u011f\u0131daki \u015fekildeki gibi g\u00f6r\u00fcn\u00fcr.<\/p>\n Yukar\u0131daki link\u2019e t\u0131klad\u0131\u011f\u0131n\u0131zda google drive sayfas\u0131 a\u00e7\u0131l\u0131r ve ses \u00e7almaya ba\u015flar. K\u0131rm\u0131z\u0131 ile i\u015faretlenen yerler dosya payla\u015f\u0131lan isimdir.\u00a0<\/span><\/p>\n A\u015fa\u011f\u0131daki link\u2019e basarsan\u0131z normal internet sayfas\u0131 gelir ve ses dosyas\u0131 \u00e7almaya ba\u015flar. Aradaki fark bu k\u0131s\u0131mdad\u0131r. http:\/\/docs.google.com\/uc?export=open&id<\/a>=<\/strong> Bu dizilimde dosyan\u0131n istenen yere g\u00f6nderilip a\u00e7\u0131lmas\u0131n\u0131 sa\u011flar. = i\u015faretinden sonras\u0131 ise 1RrTvEWA6l3o7URxMBcTTy6SmF7nozQ-R<\/strong> Buraya kadar neden ve nas\u0131l google drive kulland\u0131\u011f\u0131m\u0131z\u0131 g\u00f6rd\u00fck. \u015eimdi ise program\u0131n di\u011fer \u00f6\u011felerini neden kulland\u0131k ona bakal\u0131m. \u00a0\u00d6ncelikle bir a\u00e7\u0131l\u0131r pencere kullanmam gerekiyordu. Bu pencerede \u015fark\u0131 isimleri olmal\u0131yd\u0131. Se\u00e7mek i\u00e7in bu isimleri HTML program\u0131m\u0131n i\u00e7ine yazabilirdim. Burada 2 dezavantaj olacakt\u0131.<\/span> Fakat bir problem vard\u0131. Java script ile dosya okuma biraz kar\u0131\u015f\u0131k geldi. Bundan dolay\u0131 dosyay\u0131 PHP program\u0131yla okumaya karar verdim. PHP den gelen bilgiyi par\u00e7alamam gerekiyordu<\/p>\n Buraya kadar a\u00e7\u0131l\u0131r men\u00fcm\u00fcz\u00fc olu\u015fturduk.<\/span> Burada veritaban\u0131 dedik. Videoda nas\u0131l a\u00e7\u0131ld\u0131\u011f\u0131n\u0131 g\u00f6receksiniz. 000webhost \u00fczerinden web siteniz i\u00e7in bedava yer ald\u0131\u011f\u0131n\u0131zda, ayn\u0131 zamanda veritaban\u0131 i\u00e7in de size yer veriyor. Siz de \u015fark\u0131lar\u0131n linklerini bu veritaban\u0131na yazarak sitenizin daha h\u0131zl\u0131 y\u00fcklenmesi ve h\u0131zl\u0131 bir \u015fekilde \u015fark\u0131 \u00e7almas\u0131n\u0131 sa\u011flars\u0131n\u0131z.<\/p>\n Hem de bu \u015fekilde veritaban\u0131na yeni bilgileri kolayl\u0131kla eklersiniz. Anlatt\u0131klar\u0131m\u0131z\u0131 toparlarsak:<\/strong><\/span> db_connect.php<\/strong><\/span>\u00a0\u00a0\u00a0 PHP dosyalar\u0131n\u0131n veritaban\u0131na ba\u011flanmas\u0131n\u0131 ayarl\u0131yor (kendi veritaban\u0131n\u0131za g\u00f6re ayarlay\u0131n. )<\/p>\n dbconfig.php<\/strong><\/span>\u00a0 Veri taban\u0131 \u015fifrelerini tutuyor.( kendi veritaban\u0131n\u0131za g\u00f6re ayarlay\u0131n)<\/p>\n specific.php<\/strong><\/span> \u00a0\u00a0\u00a0 Hangi id numaras\u0131 verildiyse o veriyi okuyup geri veriyor.<\/p>\n mp3_php_dene.html<\/strong>\u00a0<\/span>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 MP3 player program\u0131 ( otomatik \u00e7al\u0131\u015fmada index.html olarak isim de\u011fi\u015fecek)<\/p>\n webdictionary.txt<\/strong><\/span> \u015eark\u0131 isimlerini tutan txt dosyas\u0131<\/p>\n \u00a0wrap2.php<\/span><\/strong>\u00a0<\/span> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u015eark\u0131 isim dosyas\u0131n\u0131 okuyan dosya.<\/p>\n Yukar\u0131daki dosyalar bir b\u00fct\u00fcnd\u00fcr. Bu dosyalar\u0131 kendi sitenizin bulundu\u011fu yerde public_html dizinine kopyalarsan\u0131z veri taban\u0131n\u0131z\u0131n durumuna g\u00f6re sizde de otomatik \u00e7al\u0131\u015facakt\u0131r.<\/p>\n <\/p>\n Yukar\u0131daki resimde webdictionary.txt <\/strong>yani isimlerin tutuldu\u011fu dosyan\u0131n i\u00e7eri\u011fini g\u00f6r\u00fcyorsunuz. Burada dikkat etmemiz gereken nokta sat\u0131r sonunda (,) i\u015fareti konulmas\u0131. Program buna g\u00f6re sat\u0131rlar\u0131 ay\u0131r\u0131yor. Fakat dikkat ederseniz son sat\u0131rda yoktur. \u0130sterseniz koyabilirsiniz. Bu haliyle a\u00e7\u0131l\u0131r pencerede isimleri g\u00f6rd\u00fc\u011f\u00fcn\u00fczde en alt k\u0131s\u0131ma kadar t\u00fcm isimleri g\u00f6r\u00fcrs\u00fcn\u00fcz. \u015eayet (,) koyarsan\u0131z en alt k\u0131s\u0131mda bo\u015f bir sat\u0131r g\u00f6receksiniz. Tabii ki bu bo\u015f k\u0131sm\u0131n veritaban\u0131nda kar\u015f\u0131l\u0131\u011f\u0131 olmad\u0131\u011f\u0131ndan \u00e7al\u0131\u015fmayacakt\u0131r.<\/p>\n Sitede kullan\u0131lan ara\u00e7lar\u0131n \u00f6\u011freticilerine ve daha fazla \u00f6\u011freticiye a\u015fa\u011f\u0131daki sitelerden ula\u015fabilirsiniz.<\/p>\n HTML a\u00e7\u0131l\u0131r pencere \u00f6rne\u011fi :<\/span> https:\/\/www.w3schools.com\/tags\/tag_option.asp<\/a><\/strong><\/p>\n Audio player \u00f6rne\u011fi\u00a0<\/span> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0: https:\/\/www.w3schools.com\/tags\/tag_audio.asp<\/a><\/strong><\/p>\n Audio player \u00f6rnek SCRIPT<\/span> : https:\/\/www.w3schools.com\/jsref\/dom_obj_audio.asp<\/a><\/strong><\/p>\n HTML javascript php gibi programlar\u0131 \u00f6\u011frenmek istiyorsan\u0131z W3SCHOOLS sitesini rahatl\u0131kla kullanabilirsiniz. Fakat ben her \u015feye bakay\u0131m derseniz zorlanacaks\u0131n\u0131z \u00e7\u00fcnk\u00fc \u00e7ok bilgi var. Program yaparken neye ihtiyac\u0131n\u0131z varsa arama yaparken yan\u0131na w3schools yazarsan\u0131z \u00f6ncelik o bilgiler gelecektir. Fakat sadece bu site ile kendinizi k\u0131s\u0131tlamay\u0131n. \u0130nternet \u00fczerinde \u00e7ok faydal\u0131 bilgiler de var. Bundan dolay\u0131 sadece komut yaz\u0131p aramak yerine bir detayl\u0131 c\u00fcmle yaz\u0131n ki istedi\u011finiz bilgiler \u00f6n planda \u00e7\u0131ks\u0131n. Mesela audio player javascript w3schools gibi yaz\u0131labilir.<\/p>\n 000webhost ta nas\u0131l hesap al\u0131n\u0131r site a\u00e7\u0131l\u0131r. <\/strong><\/span><\/p>\n https:\/\/www.000webhost.com\/cpanel-login?from=panel<\/a><\/strong><\/p>\n 000webhost.com sitesinden bir host hesab\u0131 ald\u0131\u011f\u0131n\u0131zda bu ekran kar\u015f\u0131n\u0131za \u00e7\u0131kar.<\/p>\n Dosyan\u0131zda EDIT i\u015flemini se\u00e7erseniz a\u015fa\u011f\u0131daki \u015fekilde bir ekran kar\u015f\u0131n\u0131za gelir.<\/p>\n <\/p>\n Yukar\u0131daki resimlerde domain ald\u0131\u011f\u0131n\u0131z site ile webhost sitesinin nas\u0131l birbirine ba\u011fland\u0131\u011f\u0131n\u0131 g\u00f6rebiliyorsunuz. Freenom sitesine nameserver lar\u0131 yaz\u0131yorsunuz webhost sitesinde ise domain ismini sitenize bu men\u00fcden bir alan ad\u0131 ba\u011fla butonuyla ba\u011fl\u0131yorsunuz.<\/p>\n A\u015fa\u011f\u0131daki resimde ayn\u0131 sitenin 2 g\u00f6r\u00fcnt\u00fcs\u00fc var. 1. Si dosya y\u00f6neticisinden view ile a\u00e7\u0131ld\u0131. Burada site ismi 97safak.000webhost\u2026. olarak g\u00f6sterir. Di\u011feri ise domain ile \u00e7a\u011f\u0131r\u0131ld\u0131\u011f\u0131ndan domain ismiyle ba\u015flar. Sizler sitenizi test ederken \u00f6nce webhost \u00fczerinden index.html dosyan\u0131za sa\u011f t\u0131klay\u0131p view men\u00fcs\u00fcyle \u00e7al\u0131\u015ft\u0131rmal\u0131s\u0131n\u0131z. Bu \u015fekilde \u00e7al\u0131\u015f\u0131yorsa yukar\u0131daki gibi domain ba\u011flant\u0131s\u0131n\u0131 yapt\u0131\u011f\u0131n\u0131zda otomatik \u00e7al\u0131\u015facakt\u0131r.<\/p>\n <\/p>\n Sitenin \u00f6rnek \u00e7al\u0131\u015fmas\u0131n\u0131 izlemek i\u00e7in<\/span> bu link’e t\u0131klaman\u0131z yeterli<\/a>.\u00a0<\/strong><\/p>\n T\u00fcm dosyalara<\/span> buradan ula\u015fabilirsiniz<\/a><\/strong>.<\/p>\n D\u0130KKAT :<\/span> Github<\/strong> \u00fczerinde bazen dosyalar\u0131 direkt indir ya da s\u0131k\u0131\u015ft\u0131r indir butonunu g\u00f6remezsiniz. Bu gibi durumlarda kaydetmek istedi\u011finiz dizine girin ve adres \u00e7ubu\u011fundaki adresi bu sitedeki<\/a> kutuya yap\u0131\u015ft\u0131r\u0131n.<\/strong> Programlar\u0131n hepsi pc’nize inecektir.<\/p>\n
\nSiteniz (benim \u00f6rnek sitemdeki gibi ) bu \u015fekilde \u00e7a\u011f\u0131r\u0131lacakt\u0131r. https:\/\/97safak.000webhostapp.com\/<\/a><\/strong>
\nBu site ismi ak\u0131lda kal\u0131c\u0131 olmad\u0131\u011f\u0131 i\u00e7in .com .net .tk gibi uzant\u0131larla kendi sitem \u00e7a\u011f\u0131r\u0131ls\u0131n diyorsan\u0131z. Bedava DOMAIN alman\u0131z gerekir. Ben buradan ald\u0131m. Buradan kendi sitenizin nas\u0131l \u00e7a\u011f\u0131r\u0131lmas\u0131n\u0131 istiyorsan\u0131z ismini belirlemeniz gerekir. https:\/\/www.freenom.com\/tr\/index.html?lang=tr<\/a><\/strong><\/p>\n![\"\"](\"https:\/\/github.com\/safaka123\/Mikrobotik_yazilarim\/blob\/main\/mp3player_site_kur\/freenom1.JPG?raw=true\")
<\/a>
\nBu site 12 ayl\u0131k bedava domain veriyor sonras\u0131nda isterseniz paral\u0131 isterseniz bedava yenileyebiliyorsunuz.
\n<\/strong>![\"\"](\"https:\/\/github.com\/safaka123\/Mikrobotik_yazilarim\/blob\/main\/mp3player_site_kur\/freenom_renew.png?raw=true\")
<\/a>
\n\u015eimdi art\u0131k bedava domain var bedava hosting var. Bunlar\u0131 birbirine ba\u011flaman\u0131z gerekiyor. Freenom sitesinde nameserver<\/strong> denilen yerlere 000webhost\u2019un verdi\u011fi nameserver isimlerini Freenom sitesine yazman\u0131z yeterli. 000webhost k\u0131sm\u0131na da ald\u0131\u011f\u0131n\u0131z domain ismini yazman\u0131z yetiyor. Bu \u015fekilde art\u0131k sitenizi belirledi\u011finiz isim ile \u00e7a\u011f\u0131rabilirsiniz.<\/p>\n![\"\"](\"https:\/\/github.com\/safaka123\/Mikrobotik_yazilarim\/blob\/main\/mp3player_site_kur\/freenom2.JPG?raw=true\")
<\/a>
\nBu firmalar, bedava oldu\u011fu i\u00e7in yer olarak size d\u00fc\u015f\u00fck kapasite veriyorlar. \u00c7ok da d\u00fc\u015f\u00fck say\u0131lmasa da resim ve m\u00fczikleri sayfaya eklemeye ba\u015flad\u0131\u011f\u0131n\u0131zda verdikleri yer doluyor.<\/p>\n
\n\u015eunu da s\u00f6ylemeliyim neden google drive?<\/strong> \u00c7\u00fcnk\u00fc bedava 15gb a kadar yer veriyor. Bundan dolay\u0131 bunu kullanabiliriz.<\/p>\n![\"\"](\"https:\/\/github.com\/safaka123\/Mikrobotik_yazilarim\/blob\/main\/mp3player_site_kur\/google_drive_paylas2.png?raw=true\")
<\/a>
\nhttps:\/\/drive.google.com\/file\/d\/1RrTvEWA6l3o7URxMBcTTy6SmF7nozQ-R<\/span>\/view?usp=sharing<\/a><\/strong><\/p>\n
\nhttp:\/\/docs.google.com\/uc?export=open&id=1RrTvEWA6l3o7URxMBcTTy6SmF7nozQ-R<\/a><\/strong><\/p>\n
\nbu dizilim dosyan\u0131n payla\u015f\u0131labilir ismidir. Web sitenizde adresleri yazarken sadece bu k\u0131s\u0131m dosya ismine g\u00f6re de\u011fi\u015fir. Bu k\u0131s\u0131m dosya payla\u015f\u0131labilir ba\u011flant\u0131y\u0131 al dedi\u011finizde g\u00f6r\u00fcnen k\u0131s\u0131md\u0131r. Buradan sadece dosya ad\u0131n\u0131 alacaks\u0131n\u0131z.\u00a0<\/span><\/p>\n![\"\"](\"https:\/\/github.com\/safaka123\/Mikrobotik_yazilarim\/blob\/main\/mp3player_site_kur\/Google_paylas1.JPG?raw=true\")
<\/a>
\nAyr\u0131ca resim \u00e7al\u0131\u015fs\u0131n derseniz Link:<\/strong><\/span> Link \u00e7al\u0131\u015fmazsa google chrome \u00fczerine yap\u0131\u015ft\u0131r\u0131p deneyin. https:\/\/docs.google.com\/uc?export=open&id=1bEd0jTjP7jLLqJpeXXbLEzhJ4SNmJfml<\/a><\/strong><\/p>\n
\n1-<\/span> Y\u00fczlerce \u015fark\u0131 ismini y\u00fcklemek Web sitesinin ge\u00e7 a\u00e7\u0131lmas\u0131na sebep olacakt\u0131.
\n2-<\/span> MP3 dosyalar\u0131m\u0131n yenilerini eklemek istedi\u011fimde program\u0131 tamamen a\u00e7\u0131p i\u00e7ine eklemem gerekiyordu.
\nBu dezavantajlar\u0131 yok etmek i\u00e7in \u015fark\u0131 isimlerini bir dosyaya yazd\u0131m. HTML y\u00fcklendikten sonra otomatik olarak SCRIPT kodu ve PHP kodu \u00e7al\u0131\u015farak isim dosyas\u0131n\u0131 okuyor ve bunu a\u00e7\u0131l\u0131r pencerenin se\u00e7enekleri olarak yaz\u0131yordu. Bu daha h\u0131zl\u0131 oluyordu ve kullan\u0131c\u0131 kolay kolay gecikmeyi fark edemiyordu.<\/p>\n
\nJava script AJAX program\u0131yla PHP dosyas\u0131na okumas\u0131n\u0131 s\u00f6yl\u00fcyor. PHP okuduktan sonra bunu java script koduna veriyor. ( Tabii ki java script ile okusam daha h\u0131zl\u0131 olacakt\u0131 ama anlamam biraz zor oldu\u011fundan php daha kolay geldi\u011finden b\u00f6yle yapt\u0131m) Gelen \u015fark\u0131 isimleri hepsi birden okunuyordu ve script koduna iletiliyordu.<\/p>\n![\"\"](\"https:\/\/github.com\/safaka123\/Mikrobotik_yazilarim\/blob\/main\/mp3player_site_kur\/okunanisimler.JPG?raw=true\")
<\/a>
\nBu \u015fekilde gelen isimleri (,)<\/span><\/strong> i\u015faretine g\u00f6re par\u00e7alayarak a\u00e7\u0131l\u0131r men\u00fcye ekledim. $txt.split(“,”<\/span>); komutuyla bir dizi(array) \u015fekline \u00e7evirdim. Bundan dolay\u0131 <\/strong>her ismin sonunda (,)<\/span> kullan\u0131lmak zorundad\u0131r.<\/strong><\/p>\n<script>\r\n\r\n$.ajax({\r\n method: \"POST\",\r\n url: \"wrap2.php\",\r\n data: { text: $(\"p.unbroken\").text() }\r\n})\r\n .done(function( response ) {\r\n \/\/$(\"p.demo\").text(response);\r\n $txt =response;\r\n \/\/$(\"p.broken\").html(response);\r\n var arr = $txt.split(\",\");<\/strong><\/span>\r\n \/\/ document.getElementById('demo6').innerHTML =$txt;\r\n \r\n var i;\r\n for (i = 0; i < arr.length; i++) {\r\n res = arr[i] ;\r\n var x = document.getElementById(\"album-select\");\r\n var option = document.createElement(\"option\");\r\n option.text = res;\r\n \/\/document.getElementById('demo5').innerHTML =arr.length;\r\n x.add(option);\r\n \r\n }\r\n \r\n });<\/pre>\n
\nArt\u0131k bunu se\u00e7ti\u011fimizde olu\u015fturdu\u011fumuz veritaban\u0131ndan (database SQL) \u00e7a\u011f\u0131rmam\u0131z gerekir. Bunu da yine script kodu ve a\u00e7\u0131l\u0131r men\u00fcn\u00fcn select index \u00f6zelli\u011fiyle yap\u0131yoruz. Bir isim se\u00e7ti\u011finizde 0 dan ba\u015flayarak her sat\u0131ra +1 ekleyerek bir g\u00f6r\u00fcnmez numaraland\u0131rma vard\u0131r. Bu numaraland\u0131rma select dedi\u011fimiz se\u00e7me i\u015flemi yapt\u0131\u011f\u0131m\u0131zda script koduyla elde edilir. Bu \u015fekilde elde edilen numaray\u0131 ise veritaban\u0131ndan \u00e7a\u011f\u0131rmam\u0131z gerekiyor. Yine burada PHP devreye giriyor.
\nJava script veritaban\u0131 okuyacak programa se\u00e7ti\u011fimiz sat\u0131r numaras\u0131n\u0131 veriyor. PHP program\u0131 ise veritaban\u0131ndaki id numaras\u0131yla e\u015fle\u015fen bilgiyi okur ve script koduna verir. Bu \u015fekilde bilgiyi alan script kodu AUDIO tag dedi\u011fimiz player\u2019\u0131n SRC(source=kaynak) dedi\u011fimiz \u00f6zelli\u011fine google drive \u00fczerindeki \u015fark\u0131n\u0131n Link\u2019ini verir. Audio player \u015fark\u0131y\u0131 \u00e7almaya ba\u015flar.<\/p>\n
\nVeritaban\u0131 ve ilgili PHP dosyalar\u0131n\u0131 k\u00fc\u00e7\u00fck bir de\u011fi\u015fiklik ile ESP8266 mod\u00fcllerinizde kullanabilirsiniz. Bu linkteki yaz\u0131 size \u00f6rnek olacakt\u0131r.<\/a><\/strong><\/p>\n
\n\u00d6ncelikle bir HTML dosyam\u0131z olacak.
\nAyr\u0131ca \u015fark\u0131 isimlerini i\u00e7ine yazaca\u011f\u0131m\u0131z bir txt dosyas\u0131 olacak.
\nBunun yan\u0131 s\u0131ra \u015fark\u0131 linklerinin tutuldu\u011fu bir veritaban\u0131 olacak. (Google drive \u015fark\u0131 linkleri)
\nTabii ki aradaki ba\u011flant\u0131y\u0131 sa\u011flayan PHP dosyalar\u0131 da olacak.<\/p>\n![\"\"](\"https:\/\/github.com\/safaka123\/Mikrobotik_yazilarim\/blob\/main\/mp3player_site_kur\/webhost_menu7.JPG?raw=true\")
<\/a><\/p>\n![\"\"](\"https:\/\/github.com\/safaka123\/Mikrobotik_yazilarim\/blob\/main\/mp3player_site_kur\/webhost_1_sayfa.JPG?raw=true\")
<\/a>
\n\u015eayet sitenizi olu\u015fturduysan\u0131z sol taraftaki kutu \u00e7\u0131kar ve \u00fczerine geldi\u011finizde siteyi y\u00f6net yazar. Bast\u0131\u011f\u0131n\u0131zda ise a\u015fa\u011f\u0131daki men\u00fc \u00e7\u0131kar.<\/p>\n![\"\"](\"https:\/\/github.com\/safaka123\/Mikrobotik_yazilarim\/blob\/main\/mp3player_site_kur\/webhost_menu1.JPG?raw=true\")
<\/a>
\nSonras\u0131nda buradan dosya y\u00f6neticisini \u00e7a\u011f\u0131r\u0131p a\u015fa\u011f\u0131daki ekrandaki gibi web sitesi dosyalar\u0131n\u0131n oldu\u011fu yere gelirsiniz.<\/p>\n![\"\"](\"https:\/\/github.com\/safaka123\/Mikrobotik_yazilarim\/blob\/main\/mp3player_site_kur\/webhost_menu2.JPG?raw=true\")
<\/a>
\nBurada public_html dizini sizin web sitenizin bulundu\u011fu dizindir. Bu dizin i\u00e7ine girip dosyalar\u0131n\u0131zda d\u00fczeltme yapabilirsiniz. \u0130sterseniz sa\u011f tu\u015f ile edit se\u00e7ip d\u00fczeltirsiniz isterseniz view se\u00e7ene\u011fi ile ekranda durumu g\u00f6rebilirsiniz.<\/p>\n![\"\"](\"https:\/\/github.com\/safaka123\/Mikrobotik_yazilarim\/blob\/main\/mp3player_site_kur\/webhost_menu3.JPG?raw=true\")
<\/a>
\nResimden de g\u00f6rece\u011finiz gibi html program\u0131n\u0131z\u0131n index.html olarak kullan\u0131lmas\u0131 gerekiyor. Sebebi ise siteyi \u00e7a\u011f\u0131rd\u0131\u011f\u0131n\u0131zda index.html yi arara bulursa otomatik ekrana getirir. Mp3player.html yazd\u0131\u011f\u0131n\u0131zda otomatik gelmez sizin yazarak \u00e7a\u011f\u0131rman\u0131z gerekir bundan dolay\u0131 otomatik a\u00e7\u0131lmas\u0131n\u0131 istedi\u011finiz html dosyan\u0131z index.html olmak zorundad\u0131r.<\/p>\n![\"\"](\"https:\/\/github.com\/safaka123\/Mikrobotik_yazilarim\/blob\/main\/mp3player_site_kur\/webhost_menu5.JPG?raw=true\")
<\/a><\/p>\n![\"\"](\"https:\/\/github.com\/safaka123\/Mikrobotik_yazilarim\/blob\/main\/mp3player_site_kur\/webhost_menu8.JPG?raw=true\")
<\/a>
\nYukar\u0131daki resimde size bedava yapabilece\u011finiz i\u015flemleri g\u00f6sterir. Aktif olanlar yapabilecekleriniz inaktif olanlar ise paral\u0131 olarak kullanabilece\u011finiz \u00f6zelliklerdir.
\nBu \u00f6zelliklerin aras\u0131nda wordpress g\u00f6r\u00fcyorsunuz. \u0130sterseniz sitenizi wordpress sitesi olarak da a\u00e7abilirsiniz. Haz\u0131r bedava temalar kullanabilirsiniz. \u00dccretsiz yeriniz az oldu\u011fu i\u00e7in bir s\u00fcre sonra yer s\u0131k\u0131nt\u0131s\u0131 \u00e7ekebilirsiniz. Fakat denemek isterseniz kullanabilirsiniz gibi g\u00f6r\u00fcn\u00fcyor. Ben denemedim.<\/p>\n![\"\"](\"https:\/\/github.com\/safaka123\/Mikrobotik_yazilarim\/blob\/main\/mp3player_site_kur\/webhost_menu9.JPG?raw=true\")
<\/a>
\nYukar\u0131daki resimde ise PHP versiyonu g\u00f6r\u00fcyorsunuz. Ben d\u00fc\u015f\u00fck versiyon kulland\u0131m yeterliydi. Siz daha y\u00fcksek versiyonu kullanabilirsiniz. \u00d6zellikle WordPress site kuracaksan\u0131z ki wordpress yo\u011fun \u015fekilde PHP kullan\u0131r. Bundan dolay\u0131 son versiyon ya da sondan bir evvelki versiyonu kullanabilirsiniz.<\/p>\n![\"\"](\"https:\/\/github.com\/safaka123\/Mikrobotik_yazilarim\/blob\/main\/mp3player_site_kur\/webhost_menu10.JPG?raw=true\")
<\/a><\/a>![\"\"](\"https:\/\/github.com\/safaka123\/Mikrobotik_yazilarim\/blob\/main\/mp3player_site_kur\/webhost_menu6.JPG?raw=true\")
<\/a>
\nSitenizi ilk defa olu\u015fturacaksan\u0131z isterseniz bir \u00f6rnek html dosyas\u0131n\u0131 yukar\u0131da anlatt\u0131\u011f\u0131m gibi webhost sitesine public_html dizinine yerle\u015ftirirsiniz. Ya da wordpress se\u00e7ene\u011fini kullan\u0131rs\u0131n\u0131z Ya da ilk gelen bu ekrandan site olu\u015ftur se\u00e7ebilirsiniz. Ya da ZYRO ile kolay site olu\u015fturabilirsiniz.<\/p>\n<\/a><\/p>\n