ამ გაკვეთილში მე გასწავლით როგორ გამოყოტ ერთმანეთისგან თქვენი ტექსტები და დიზაინი, ამასთანავე როგორ დაამატოთ WYSIWYG რედაქტორი ტექსტების შესაცვლელად.
იმისთვის რომ ეს გაკვეთილი თქვენთვის გასაგები იყოს საჭიროა საბაზო ცოდნა:
- HTML
- PHP საფუძვლები
- ფორმები (და POSTing)
- მოთხოვნების სტრიქონი ($_GET)
ამ გაკვეთილში ვისაუბრებთ:
- ქუდისა და ფოტერის გამოყოფაზე საიტის შემცველობისგან
- ტექსტიანი გვერდის შაბლონის შექმნაზე
- javascript WYSIWYG რედაქტორის დამატებაზე.
განხილული იყო ბევრი javascript რედაქტორები, მათგან ყველაზე მეტად მომეწონა TinyMCE. ის უფასოა და შესაძლებელია დავამატოთ ნებისმიერ ტექსტურ ველს. დამატების შემდეგ შესაძლებელია მისი დარეადქტირება MS Word-სტილში. ეს რედაქტორი ძალიან მოსახერხებელი და ფუნქციონალურია და უფრო ღრმა შესწავლის შემდეგ შესაძლებელია მისი რეალიზება. მასში ბევრია ჩაშენებული ფუნქციები, დაწყებული ცხრილის შემნიდან დასრულებული მთელ ეკრანზე რედაქტირებამდე.
ნაწილი №1 - ქუდის და ფუტერის გამოყოფაგვერდის ძირითადი ნაწილისგან
შესაძლოა ბევრმა თქვენგანმა უკვე გააკეთა ეს მოქმედება ოდესმე. მთავარი დავალება ამ ყველაფერში - არის შევქმნათ ცალკეული ფაილები ქუდისთვის და ფუტერისთვის, რაც შემდგომში ნამდვილად დაგეხმარებათ თქვენ საიტის ნსბისმიერი გვერდის რედაქტირებისას (განსაკუთრებით თუ ისინი ბევრია). ქუდში როგორც წესი მოთავსებულია ლამაზი სურათი და ნავიგაციის ელემენტები, ზოგჯერ გამოყენებულია სხვადასხვა DIV-ებისაიტის ამ ნაწილის სწორი განლაგებისთვის. ფუთერში კიდე ყველა DIV-ბი იხურება და ხშირად ისმევა ინფორმაცია კოპირაიტზე.
ქუდის მაგალითი:
Code
header.html
===========
<html>
<head>
<!-- yvelaferi rac exeba heders modis aq -->
</head>
<body>
<div style="width: 800px">
<!-- qudis surati-->
<img src="header.jpg" />
<!-- navigacia -->
<p style="text-align: center">
<a href="link1.php">Link 1</a> |
<a href="link2.php">Link 2</a> |
<a href="link3.php">Link 3</a> |
<a href="link4.php">Link 4</a>
</p>
შეატყობდით ალბად რომ თეგები DIV, BODY და HTML არ არიან დახურულები. ეს გაკეთდება ფუტერში.
ფუტერის მაგალითი:
Code
footer.html
===========
</div>
<p style="text-align: center">საიტი შექმნილია სპეციალურად <a href"http://geodles.com">geodles.com-სთვის</a></p>
</html>
ახლა ამ ფაილების საიტზე გამოსაყენებლად საჭიროა კიდევ ერთი ფაილის შექმნა
Code
index.php
===========
<?php
include("header.html");
// aq chajdeba saitis shemcveloba
include("footer.html");
?>
თუ თქვენ მზგავს სტრუქტურას გამოიყენებთ საიტის ყველა გვერდისთვის, მაშინ ბევრად ადვილი იქნება მისი განახლება და მოვლა. თუ თქვენ მოგინდებათ დიზაინში ცვლილების შეტანა ან ნავიგაციაში ახალი ლინკის დამატება, თქვენ დაგჭირდებათ შეცვალოთ მხოლოდ header.html და ცვლილებები გავრცელდება საიტის ყველა გვერძე.
ნაწილი მეორე №2 - კონტენტიანი გვერდის შაბლონის შექმნა
იქიდან გამომდინარე რომ ყველა საიტზე გვერდების უმრავლესობა იდენტურია (განსხვავება მხოლოდ კონტენტშია), რაში გვჭირდება უამრავი php ფაილი? ჩვენი საიტის ყველა გვერდისთვის, ჩვენ უკვე გვაქვს ფუნქცია "include" ქუდისთვის, ფუტერისთვის და ადგილი კონტენტისთვის. ეს ნორმალურია თუ თქვენ გაქვთ რამოდენიმე გვერდი.მაგრამ რა მოხდება მაშინ თუ ჩვენ გადავწყვეტთ შევქმნათ ას ან უფრო მეტ გვერდიან საიტიგანსხვავებული კონტენტით? ამის შექმნამ შეიძება იმდენი დრო წაგვართვას რომ გადაიფიქროთ კიდეც მისი შექმნა :). ფოკუსი იმაშია რომ, თქვენ გქონდეთ ერთი კონტენტიანი გვერდი და ბევრი ტექტური ფაილი (1 ფაილი= 1გვერდს). სევქმნათ პაპკა სახელად "pages" ან რამე თქვენი სურვილის მიხედვით და მოვათავსოთ მასში .txt ფაილი, რაც ეხება ჰედერსა და ფუტერს.
ასეთი ტექსტური ფაილის მაგალითი:
Code
news.txt
===========
<h1 align="center">siaxle</h1>
<p>იქიდან გამომდინარე რომ ყველა საიტზე გვერდების უმრავლესობა იდენტურია (განსხვავება მხოლოდ კონტენტშია), რაში გვჭირდება უამრავი php ფაილი? ჩვენი საიტის ყველა გვერდისთვის, ჩვენ უკვე გვაქვს ფუნქცია "include" ქუდისთვის, ფუტერისთვის და ადგილი კონტენტისთვის. ეს ნორმალურია თუ თქვენ გაქვთ რამოდენიმე გვერდი.მაგრამ რა მოხდება მაშინ თუ ჩვენ გადავწყვეტთ შევქმნათ ას ან უფრო მეტ გვერდიან საიტიგანსხვავებული კონტენტით? ამის შექმნამ შეიძება იმდენი დრო წაგვართვას რომ გადაიფიქროთ კიდეც მისი შექმნა :). ფოკუსი იმაშია რომ, თქვენ გქონდეთ ერთი კონტენტიანი გვერდი და ბევრი ტექტური ფაილი (1 ფაილი= 1გვერდს). სევქმნათ პაპკა სახელად "pages" ან რამე თქვენი სურვილის მიხედვით და მოვათავსოთ მასში .txt ფაილი, რაც ეხება ჰედერსა და ფუტერს.</p>
როგორ გამოვიყენებთ ამას ჩვენს საიტზე? პასუხი ძალიან მარტივია: მოთხოვნების გადაცემის გზით, რომელიც სკრიპტს შეატყობინებს კონკრეტული გვერდის ნახვის სურვილის შესახებ.
შევხედოთ ჩვენს განახლებუულ ფაილს index.php:
Code
index.php
===========
<?php
include('header.html');
// davayeot $page "home.txt" ze tu sxva parametri motxovnili ar aris
if ($_GET['page']) {
$page = $_GET['page'] . '.txt';
} else {
$page = 'home.txt';
}
// shevamocmot faili arsebobaze da chavrtot is.
if (file_exists("pages/$page")) {
include("pages/$page");
// tu faili ar arsebobs - gamovitanot shetyobineba shecdomaze.
} else {
echo("<h1 align=\"center\">მოთხოვნილი გვერდი ვერ მოიძებნა</h1>\n");
}
include('footer.html');
?>
არაფერი გადასარევი და რთული ამაში არ არის ნებისმიერ თქვენთაგანს შეუძლია ამის გაკეთება, ახლა ჩვენ უკვე გვაქვს უამრავი ტექსტური (რომელშიც ინახება მხოლოდ კონტენტი, რომელიც შეგვიძლია სურვილისამებრ შეცვალოთ მარტივად) და მხოლოდ ერთი php ფაილი.
ძალიან გამოგვადგებოდა ფუნქცია, რომელიც ტექსური ინფორმაციის მოცულობას დაყოფდა რამოდენიმე ნაწილად, ამასთანავე დაამატებდა ბმულს"წინა" და"მომდევნო" გვერდებისთვის.მოდით გავაკეთოთ ესეც! კოდის შემდეგი ბლოკი შეგვიძლია ჩავსვათ სურვილისამებრ პირდაპირ 'include("pages/$page")'.
-ს შემდეგ ეს სკრიპტი ეძებს ფაილს სახელის დაბოლოებებით _გვერდი(ციფრი) (მაგალითად: news_1.txt, news_2.txt, news_3.txt და ასე შემდეგ - ეს შემნის სამ გვერდს რომელიც ერთმანეთზე იქნებიან გადალინკულები ღილაკებით "წინა" და "მომდევნო")
Code
if (preg_match("/^(.*_page)(\d+)/", $page], $matches)) {
$prev_page = $matches[2] - 1;
$next_page = $matches[2] + 1;
echo("<p style=\"text-align: center\">");
if (file_exists("pages/" . $matches[1] . $prev_page . ".php")) {
echo("<a href=\"{$_SERVER['PHP_SELF']}" .
"?page={$matches[1]}$prev_page\">წინა გვერდი</a>");
$prev = 1;
}
if (file_exists("pages/" . $matches[1] . $next_page . ".php")) {
if ($prev) {
echo(" ");
}
echo("<a href=\"{$_SERVER['PHP_SELF']}" .
"?page={$matches[1]}$next_page\">მომდევნო გვერდი</a>");
}
echo("</p>");
}