G\u00fcn\u00fcm\u00fcz dijital d\u00fcnyas\u0131nda ki\u015fisel bir web sitesi veya “Hakk\u0131mda” sayfas\u0131, profesyonel kimli\u011finizi sergilemenin ve potansiyel i\u015fverenler, i\u015f ortaklar\u0131 veya m\u00fc\u015fterilerle ba\u011flant\u0131 kurman\u0131n temel yollar\u0131ndan biridir. Bu t\u00fcr bir sayfan\u0131n sadece i\u00e7erik a\u00e7\u0131s\u0131ndan zengin olmas\u0131 de\u011fil, ayn\u0131 zamanda farkl\u0131 cihazlarda (masa\u00fcst\u00fc, tablet, mobil) sorunsuz ve estetik bir deneyim sunmas\u0131, yani duyarl\u0131 (responsive)<\/strong> olmas\u0131 b\u00fcy\u00fck \u00f6nem ta\u015f\u0131r. Bu rehberde, modern web geli\u015ftirmenin g\u00fc\u00e7l\u00fc ara\u00e7lar\u0131n\u0131 kullanarak nas\u0131l etkileyici ve duyarl\u0131 bir “Hakk\u0131mda” sayfas\u0131 olu\u015fturaca\u011f\u0131n\u0131z\u0131 ad\u0131m ad\u0131m inceleyece\u011fiz:<\/p>\n Bu \u00fc\u00e7l\u00fcn\u00fcn birle\u015fimi, hem g\u00fc\u00e7l\u00fc bir arka u\u00e7 hem de esnek ve duyarl\u0131 bir \u00f6n u\u00e7 ile modern bir web uygulamas\u0131 geli\u015ftirmenize olanak tan\u0131r.<\/p>\n “Hakk\u0131mda” sayfam\u0131z\u0131 olu\u015fturmaya ba\u015flamadan \u00f6nce, Laravel projemizi kurmal\u0131 ve Sail geli\u015ftirme ortam\u0131n\u0131 yap\u0131land\u0131rmal\u0131y\u0131z. Bu s\u00fcre\u00e7 olduk\u00e7a basittir ve birka\u00e7 komutla tamamlanabilir.<\/p>\n Ba\u015flamadan \u00f6nce sisteminizde Docker’\u0131n kurulu ve \u00e7al\u0131\u015f\u0131r durumda oldu\u011fundan emin olun. Docker, Sail’in temelidir ve t\u00fcm hizmetleri (PHP, Nginx, veritaban\u0131 vb.) konteynerler i\u00e7inde \u00e7al\u0131\u015ft\u0131rman\u0131z\u0131 sa\u011flar.<\/p>\n Yeni bir Laravel projesi olu\u015fturman\u0131n en kolay yolu Composer’\u0131 kullanmakt\u0131r. E\u011fer Composer kurulu de\u011filse, \u00f6ncelikle onu kurman\u0131z gerekecektir. A\u015fa\u011f\u0131daki komutu terminalinizde \u00e7al\u0131\u015ft\u0131rarak Bu komut, Laravel’in en son stabil s\u00fcr\u00fcm\u00fcn\u00fc indirir ve gerekli t\u00fcm ba\u011f\u0131ml\u0131l\u0131klar\u0131 kurar. Proje klas\u00f6r\u00fcne ge\u00e7tikten sonra, Sail’i ba\u015flatmaya haz\u0131r\u0131z.<\/p>\n Laravel Sail, projenizle birlikte gelir. Onu ba\u015flatmak i\u00e7in tek yapman\u0131z gereken a\u015fa\u011f\u0131daki komutu \u00e7al\u0131\u015ft\u0131rmakt\u0131r:<\/p>\n Bu komut, Docker konteynerlerini olu\u015fturacak ve ba\u015flatacakt\u0131r. \u0130lk \u00e7al\u0131\u015ft\u0131rmada biraz zaman alabilir, \u00e7\u00fcnk\u00fc Docker imajlar\u0131n\u0131 indirir. Konteynerler ba\u015far\u0131l\u0131 bir \u015fekilde ba\u015flat\u0131ld\u0131\u011f\u0131nda, taray\u0131c\u0131n\u0131zda Bundan sonra, Laravel komutlar\u0131n\u0131 \u00e7al\u0131\u015ft\u0131rmak i\u00e7in Bu ad\u0131mlarla Laravel projeniz ve geli\u015ftirme ortam\u0131n\u0131z tamamen ayarlanm\u0131\u015f olacakt\u0131r.<\/p>\n Projemiz haz\u0131r oldu\u011funa g\u00f6re, “Hakk\u0131mda” sayfam\u0131z\u0131n g\u00f6rsel tasar\u0131m\u0131n\u0131 olu\u015fturmak i\u00e7in Tailwind CSS’i entegre edelim. Tailwind, bile\u015fenler yerine k\u00fc\u00e7\u00fck, yeniden kullan\u0131labilir s\u0131n\u0131flar sunarak h\u0131zl\u0131 ve \u00f6zelle\u015ftirilebilir bir tasar\u0131m s\u00fcreci sa\u011flar.<\/p>\n Tailwind CSS’i projemize dahil etmek i\u00e7in Node.js ve npm (Node Package Manager) kullanaca\u011f\u0131z. Laravel 9 ve \u00fczeri versiyonlar varsay\u0131lan olarak Vite ile gelir. \u00d6nce gerekli paketleri kural\u0131m:<\/p>\n \u0130lk komut, Tailwind CSS, PostCSS ve Autoprefixer’\u0131 geli\u015ftirme ba\u011f\u0131ml\u0131l\u0131\u011f\u0131 olarak kurar. \u0130kinci komut ise \u015eimdi Bu yap\u0131land\u0131rma, Tailwind’e Tailwind’in temel stillerini projenizin ana CSS dosyas\u0131na dahil etmeniz gerekir. Laravel projelerinde bu dosya genellikle Laravel 9 ve \u00fczeri versiyonlar, \u00f6n u\u00e7 varl\u0131klar\u0131n\u0131 derlemek i\u00e7in Vite kullan\u0131r. Bu yap\u0131land\u0131rma, Vite’\u0131n Son olarak, Tailwind CSS’i derlemek ve web uygulaman\u0131zda kullan\u0131labilir hale getirmek i\u00e7in npm komutlar\u0131n\u0131 \u00e7al\u0131\u015ft\u0131rman\u0131z gerekir.<\/p>\n Geli\u015ftirme s\u0131ras\u0131nda, otomatik yenileme ile varl\u0131klar\u0131 izlemek i\u00e7in:<\/p>\n \u00dcretim i\u00e7in optimize edilmi\u015f varl\u0131klar olu\u015fturmak i\u00e7in:<\/p>\n Tailwind CSS entegrasyonunu tamamlad\u0131\u011f\u0131m\u0131za g\u00f6re, art\u0131k “Hakk\u0131mda” sayfam\u0131z\u0131n Laravel taraf\u0131ndaki rotas\u0131n\u0131, kontrolc\u00fcs\u00fcn\u00fc ve g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc olu\u015fturabiliriz. Bu b\u00f6l\u00fcmde, duyarl\u0131 bir tasar\u0131m elde etmek i\u00e7in Tailwind’in yard\u0131mc\u0131 s\u0131n\u0131flar\u0131n\u0131 nas\u0131l kullanaca\u011f\u0131m\u0131z\u0131 detayl\u0131ca inceleyece\u011fiz.<\/p>\n \u0130lk olarak, Bu rota, \u015eimdi Ard\u0131ndan, Bu kontrolc\u00fc, \u015eimdi Temel Blade Yap\u0131s\u0131:<\/strong>\n
Proje Kurulumu: Laravel ve Sail ile Ba\u015flang\u0131\u00e7<\/h2>\n
\u00d6n Ko\u015fullar<\/h3>\n
Laravel Projesi Olu\u015fturma<\/h3>\n
my-about-me-page<\/code> ad\u0131nda yeni bir Laravel projesi olu\u015fturun:<\/p>\n\ncomposer create-project laravel\/laravel my-about-me-page\ncd my-about-me-page\n<\/code><\/pre>\nLaravel Sail’i Ba\u015flatma<\/h3>\n
\n.\/vendor\/bin\/sail up\n<\/code><\/pre>\nhttp:\/\/localhost<\/code> adresine giderek Laravel kar\u015f\u0131lama sayfas\u0131n\u0131 g\u00f6rmelisiniz. E\u011fer up<\/code> komutunu arka planda \u00e7al\u0131\u015ft\u0131rmak isterseniz, -d<\/code> parametresini kullanabilirsiniz:<\/p>\n\n.\/vendor\/bin\/sail up -d\n<\/code><\/pre>\nphp artisan<\/code> yerine sail artisan<\/code> kullanman\u0131z gerekecektir. \u00d6rne\u011fin, bir kontrolc\u00fc olu\u015fturmak i\u00e7in:<\/p>\n\n.\/vendor\/bin\/sail artisan make:controller AboutController\n<\/code><\/pre>\nTailwind CSS Entegrasyonu ve Yap\u0131land\u0131rmas\u0131<\/h2>\n
Tailwind CSS Kurulumu<\/h3>\n
\n.\/vendor\/bin\/sail npm install -D tailwindcss postcss autoprefixer\n.\/vendor\/bin\/sail npx tailwindcss init -p\n<\/code><\/pre>\ntailwind.config.js<\/code> ve postcss.config.js<\/code> dosyalar\u0131n\u0131 projenizin k\u00f6k dizininde olu\u015fturur.<\/p>\nTailwind CSS Yap\u0131land\u0131rmas\u0131<\/h3>\n
tailwind.config.js<\/code> dosyas\u0131n\u0131 d\u00fczenleyerek Tailwind’in hangi dosyalarda CSS s\u0131n\u0131flar\u0131n\u0131 arayaca\u011f\u0131n\u0131 belirtmeliyiz. Bu, Tailwind’in \u00fcretim i\u00e7in kullan\u0131lmayan CSS s\u0131n\u0131flar\u0131n\u0131 temizlemesini (purge) sa\u011flar ve dosya boyutunu optimize eder.<\/p>\ntailwind.config.js<\/code> dosyas\u0131n\u0131 a\u00e7\u0131n ve content<\/code> dizisini a\u015fa\u011f\u0131daki gibi g\u00fcncelleyin:<\/p>\n\n\/\/ tailwind.config.js\n\/<\/em> @type {import('tailwindcss').Config} *\/\nmodule.exports = {\n content: [\n \".\/resources\/<\/em>\/*.blade.php\",\n \".\/resources\/<\/em>\/*.js\",\n \".\/resources\/<\/em>\/*.vue\",\n ],\n theme: {\n extend: {},\n },\n plugins: [],\n}\n<\/code><\/pre>\nresources<\/code> klas\u00f6r\u00fc alt\u0131ndaki t\u00fcm Blade \u015fablonlar\u0131, JavaScript ve Vue dosyalar\u0131n\u0131 taramas\u0131n\u0131 s\u00f6yler.<\/p>\nAna CSS Dosyas\u0131na Dahil Etme<\/h3>\n
resources\/css\/app.css<\/code> konumundad\u0131r. Bu dosyay\u0131 a\u00e7\u0131n ve Tailwind’in base<\/code>, components<\/code> ve utilities<\/code> katmanlar\u0131n\u0131 ekleyin:<\/p>\n\n\/ resources\/css\/app.css <\/em>\/\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n<\/code><\/pre>\nVite Yap\u0131land\u0131rmas\u0131 (Laravel 9+)<\/h3>\n
vite.config.js<\/code> dosyan\u0131z\u0131n a\u015fa\u011f\u0131daki gibi g\u00f6r\u00fcnd\u00fc\u011f\u00fcnden emin olun:<\/p>\n\n\/\/ vite.config.js\nimport { defineConfig } from 'vite';\nimport laravel from 'laravel-vite-plugin';\n\nexport default defineConfig({\n plugins: [\n laravel({\n input: ['resources\/css\/app.css', 'resources\/js\/app.js'],\n refresh: true,\n }),\n ],\n});\n<\/code><\/pre>\nresources\/css\/app.css<\/code> dosyas\u0131n\u0131 izlemesini ve de\u011fi\u015fiklikleri derlemesini sa\u011flar.<\/p>\nVarl\u0131klar\u0131 Derleme<\/h3>\n
\n.\/vendor\/bin\/sail npm run dev\n<\/code><\/pre>\n\n.\/vendor\/bin\/sail npm run build\n<\/code><\/pre>\nnpm run dev<\/code> komutunu \u00e7al\u0131\u015ft\u0131rd\u0131ktan sonra, resources\/css\/app.css<\/code> dosyan\u0131zdaki Tailwind s\u0131n\u0131flar\u0131 derlenecek ve <\/code> etiketinizde @vite(['resources\/css\/app.css', 'resources\/js\/app.js'])<\/code> y\u00f6nergesini kullanarak Blade \u015fablonlar\u0131n\u0131za dahil edebilirsiniz.<\/p>\n“Hakk\u0131mda” Sayfas\u0131n\u0131n Olu\u015fturulmas\u0131: Laravel View ve Tailwind Tasar\u0131m\u0131<\/h2>\n
Rota Tan\u0131mlama<\/h3>\n
hakkimda<\/code> URL’sine gelen istekleri i\u015fleyecek bir rota tan\u0131mlayal\u0131m. routes\/web.php<\/code> dosyas\u0131n\u0131 a\u00e7\u0131n ve a\u015fa\u011f\u0131daki sat\u0131r\u0131 ekleyin:<\/p>\n\n\/\/ routes\/web.php\nuse App\\Http\\Controllers\\AboutController;\n\nRoute::get('\/hakkimda', [AboutController::class, 'index'])->name('about');\n<\/code><\/pre>\n\/hakkimda<\/code> adresine yap\u0131lan GET isteklerini AboutController<\/code> s\u0131n\u0131f\u0131n\u0131n index<\/code> metoduna y\u00f6nlendirecektir. name('about')<\/code> ile bu rotaya kolayca referans verebilece\u011fimiz bir isim atad\u0131k.<\/p>\nKontrolc\u00fc Olu\u015fturma<\/h3>\n
AboutController<\/code>‘\u0131 olu\u015ftural\u0131m. Terminalinizde Sail ile a\u015fa\u011f\u0131daki komutu \u00e7al\u0131\u015ft\u0131r\u0131n:<\/p>\n\n.\/vendor\/bin\/sail artisan make:controller AboutController\n<\/code><\/pre>\napp\/Http\/Controllers\/AboutController.php<\/code> dosyas\u0131n\u0131 a\u00e7\u0131n ve index<\/code> metodunu ekleyerek bir g\u00f6r\u00fcn\u00fcm d\u00f6nd\u00fcrmesini sa\u011flay\u0131n:<\/p>\n\n\/\/ app\/Http\/Controllers\/AboutController.php\nnamespace App\\Http\\Controllers;\n\nuse Illuminate\\Http\\Request;\n\nclass AboutController extends Controller\n{\n public function index()\n {\n return view('about');\n }\n}\n<\/code><\/pre>\nresources\/views\/about.blade.php<\/code> dosyas\u0131n\u0131 arayacak ve onu taray\u0131c\u0131ya g\u00f6nderecektir.<\/p>\n“Hakk\u0131mda” G\u00f6r\u00fcn\u00fcm\u00fcn\u00fc Olu\u015fturma (
about.blade.php<\/code>)<\/h3>\nresources\/views<\/code> klas\u00f6r\u00fcnde about.blade.php<\/code> ad\u0131nda yeni bir dosya olu\u015ftural\u0131m. Bu dosya, sayfam\u0131z\u0131n t\u00fcm HTML yap\u0131s\u0131n\u0131 ve Tailwind CSS s\u0131n\u0131flar\u0131n\u0131 i\u00e7erecektir.<\/p>\n
\n\u00d6ncelikle, sayfam\u0131z\u0131n temel iskeletini ve Tailwind CSS’i dahil edelim. Laravel’in varsay\u0131lan app.blade.php<\/code> layout dosyas\u0131n\u0131 kullanabilir veya basit bir yap\u0131 olu\u015fturabilirsiniz. Biz burada basit bir yap\u0131 kullanaca\u011f\u0131z.<\/p>\n\n\n\n\n \n \n