[DataLife] آموزش طراحی قالب برای دیتالایف انجین

[progpars]

{ پیش نیاز آموزش : html و css }
{با تشکر از پیام }
{لطفاً در این تاپیک سوال نکنید }

------------------------------------------------------------------------------------------

آموزش ساخت قالب - جلسه 1




در اولین جلسه سعی می کنیم تا تمام تگهای main.tpl را بیان کنیم که بخش اصلی سایت است که سایت بدون این هیچ معنی نداره چون تمام جد ول بندی یا تمام ریزه کاری ها در این قسمت باید انجام شود خوب بریم سر آشنایی با تگهای main.tpl

اولین تگ که با نام{headers} است که برای عنوان سایت است که دربخش تنظیمات کنترل پنل سایت می تونیم اون رو تغییر بدیم

تگ {theme} (در اصل باید با حروف بزرگ نوشته شود ولی ما برای بهم نریختن قالب سایت با حروف کوچک نوشته ایم)که این هم یکی از تگهای اصلی دیتالایف است که بودن این تگ هیچ تصویری قابل نمایش یا هیچ css قابل اجرا در قالب نیست که با گذاشتن این تگ در اول آدرس بعد از پوشه ی قالب می توانید عکسها یا css های خود را اجرا کنید :مثال ما تصویری داریم با نام dle.gif در پوشه Images واقع در قالب dle1 برای آدرس دادن به این عکس باید این کد را بنویسیمtheme}/Images.dle.gif}
*چون در تنطیمات این قالب(dle1) را انتخاب کردیم دیگر احتیاج به وارد کردن نام قالب و بقیه آدرسها نیست چون این تگ خود??
​

 

[progpars]

آموزش ساخت قالب - جلسه 2




در این جلسه تگ های shortstory.tpl , fulstory.tpl رو بهتون آموزش می دیم که واقعا tpl های مهمی در قالب سازی دیتالایف انجین هستند چون بخش مطالب ارسالی و ادامه مطلب رو این tpl ها در بر دارند

تگ {title} که برای عنوان مطلب است که در بالای مطلب نوشته می شود (این تگ در هر دو tpl به کار می رود)

تگ {link-category} مشخص کننده ی لینک موضوعی که این مطلب را در برگرفته است (این تگ در هر دو tpl به کار می رود)

تگ {short-story} برای نمایش دادن مطلب است که در shortstory.tpl بکار می رود

تگ {date} که برای نشان دادن تاریخ ارسال این مطلب نیز است (این تگ در هر دو tpl به کار می رود)

تگ {views} که برای نشان دادن تعداد بازدیدها از مطلب نیز است (این تگ در هر دو tpl به کار می رود)

تگ {author} که نشان دادن نویسنده ای است که این مطلب را ارسال کرده است (این تگ در هر دو tpl به کار می رود)

تگ {favorites} که این برای گذاشتن انتخاب افزودن مطالب جالب است که کاربر می تواند با این امکان مطالبی را که دوست دارد علامت گذاری کند (این تگ در هر دو tpl به کار می رود)

تگ [edit] [/edit] که این تگ برای ایجاد ویرایش در مطالب است که با این امکان مدیر می تواند این مطلب را بدون رفتن به بخش مدیریت ویرایش کند (این تگ در هر دو tpl به کار می رود)

تگ {rating} که برای امتیاز دهی است که مثل شکل زیر در زیر مطالب ضاهر می شود و کاربر می تواند به این مطلب امتیازی دهد (این تگ در هر دو tpl به کار می رود)

​

تگ [full-link] [/full-link] که برای ادامه مطلب گذاشتن است که در وسط این تگ می تواند نامی را مثل ادامه مطلب انتخاب کند ( این تگ فقط در shortstory.tpl بکار می رود)

​

تگ [/com-link] [com-link] که برای نظر دادن متنی به مطلب است ( این تگ فقط در shortstory.tpl بکار می رود)

تگ ({comments-num}) که برای نشان دادن تعداد نظرات در یک پست است ( این تگ فقط در shortstory.tpl بکار می رود)

تگ {full-story} برای نشان دادن مطلب کامل در ادامه مطلب است که فقط در fulstory.tpl کاربرد دارد

تگ {related-news} که برای نشان دادن مطالب هم شکل با مطلبی است که در fulstory.tpl به کار می رود

تگ [print-link] [/print-link] برای ایجاد گزینه ای برای چاپ کردن مطلب که در fulstory.tpl بکار می رود

تگ {poll} که برای ایجاد بخش نظرسنجی در مطلب است

دوستان عزیز لطفا به قراردادن تگها در tpl ها حتما دقت کنید چون اگر به این ترتیب عمل کنید یک قالب بسیار زیبا می توانید با استاندارد کامل درست کنید موفق باشید

 

[progpars]

آموزش ساخت قالب - جلسه 3

امروز آمورش tpl های نظر سنجی رو بهتون یاد می دم که با نامهای poll.tpl و vote.tpl شناخته می شوند

poll.tpl

تگ {title} که برای عنوان متن مورد نظر است مثل: نظر شما در باره ی این سیستم چیست

تگ {question} که برای سوالهای درج شده است که باید انتخاب کنیم مثل شکل زیر

تگ {list} که برای انتخاب کردن یکی از سوالهاست

تگ {votes} که تعداد آرا در نظر سنجی رو نشان می دهد

​

و دو button که یکی باید با نام رای بسازیم و دومی هم نتایج که هر کدام یک کد نویسی نیز دارند

دکمه ی رای:

<input type="button" class="bbcodes_poll" value="راي" />

دکمه ی نتایج:

<input type="button" class="bbcodes_poll" value="نتايج" />

vote.tpl
که برای نظر سنجی در سایت است که تگ های این هم شاید شبیه تگها بالا باشد که به دوبخش تقسیم می شود این tpl

بخش اول برای این tpl باید کدها ی زیر را بین این دو قرار داد [votelist] [/votelist]

تگ {title} که برای عنوان متن مورد نظر است مثل: نظر شما در باره ی این سیستم چیست

تگ {list} که برای انتخاب کردن یکی از سوالهاست

و دو button که یکی باید با نام ارسال نظر بسازیم و دومی هم درج نتایج که هر کدام یک کد نویسی نیز دارند.

دکمه ی ارسال نظر :

<input type="submit" class="bbcodes_poll" value="ارسال نظر" />

دکمه ی درج نتایج:

<input type="submit" class="bbcodes_poll" value="نتايج نظرسنجي" />

بخش دوم که باید تگهای زیر هم در بین این دو قرار گیرند [voteresult] [/voteresult]

تگ {title} که برای عنوان متن مورد نظر است مثل: نظر شما در باره ی این سیستم چیست
تگ {list} که برای نشان دادن جدولی که مشخص می کند به چه مطلبی زیاد رای داده اند
تگ {votes} که برای نشان دادن تعداد آرا در نظر سنجی است

خوب دوستان عزیز این آموزش یک کم کوتاه بود ولی یکی از tpl هایی است که اکثرا در قالبها استفاده می کنند که امید وارم باز هم مورد توجه شما دوستان عزیز قرار گیرد موفق باشید

 

[progpars]

آموزش ساخت قالب دیتالایف جلسه4

خوب دوستان عزیز امروز قسط آموزش registration.tpl و که برای عضویت کاربر در سایت است.
تگهای registration.tpl

یکی از tpl های مهم است که برای عضویت کاربران در سایت است که اولین تگ آن در title این کد را درج میکنیم

 [registration]عضويت در سايت[/registration] [validation] اطلاعات کاربري [/validation]

حال شما این تگ را [registration] می نویسید بعدا تگها و کدهای زیر را در قالب قرار می دهید.
کد یا فرم نام کاربری :

 <input name="name" id='name'  style="width:167px; height:20px; font-family:Tahoma; font-size:9pt;  border:1px solid #E0E0E0">

کلید یا دکمه جستجوی نام کاربری:

 <input class=bbcodes  title="جستجو براي وجود داشتن نام کاربري که وارد کرديد"  onclick="CheckLogin(); return false;" type="button" value="جستجوي نام  کاربري" />

کد یا فرم کلمه عبور:

<input type="password"  name="password1" style="width:167px; height:16px; font-family:tahoma;  font-size:11px; border:1px solid #CCCCCC;" class=a_field>

کد یا فرم تکرار کلمه عبور:

<input type="password"  name="password2" style="width:167px; height:16px; font-family:tahoma;  font-size:11px; border:1px solid #CCCCCC;" class=a_field>

کد یا فرم ایمیل:

<input type="text" name="email"  style="width:167px; height:16px; font-family:tahoma; font-size:11px;  border:1px solid #CCCCCC;" class=a_field>

حال این تگ را به قسمت کدها اضافه میکنیم که برای کد امنیتی است:

[sec_code][sec_code]

تگ تصویر کد امنیتی:

[code]{reg_code}

کد یا فرم وارد کردن کد امنیتی:

<input type="text"  name="sec_code" style="width:167px; height:20px; font-family:tahoma;  font-size:11px; border:1px solid #E0E0E0 ">

حال برای بستن تگ کد امنیتی تگ زیر را در کدها بعد از وارد کردن تگهای بالا وارد میکنیم:

[/sec_code]

حال برای جدا کردن قسمت اول عضویت این تگ را دربعد از تمام تگهای بالا قرار میدهیم:

[/registration]

حال میرسیم به قسمت دوم عضویت که با تگ

 [validation]

برای مشاهده قسمت دوم استفاده میکنیمو بعدا تگهای زیر را وارد قالب میکنیم
کد یا فرم نام کامل:

<input type="text"  name="fullname" style="width:167px; height:20px; font-family:tahoma;  font-size:11px; border:1px solid #E0E0E0 ">

کد یا فرم کشور:

<input type="text" name="land"  style="width:167px; height:20px; font-family:tahoma; font-size:11px;  border:1px solid #E0E0E0 ">

کد یا فرم شماره ICQ:

<input type="text" name="icq"  style="width:167px; height:20px; font-family:tahoma; font-size:11px;  border:1px solid #E0E0E0 ">

کد وارد کردن آواتار:

<input type="file" name="image"  style="width:278px; height:20px; font-family:tahoma; font-size:11px;  border:1px solid #E0E0E0 ">

کد یا فرم اطلاعات شخصی:

<textarea name=info  style="width:320px; height:70px; font-family:tahoma; font-size:11px;  border:1px solid #E0E0E0 "></textarea>

حال برای بستن قسمت دوم عضویت از تگ:

[/validation]

استفاده میکنیم
کد دکمه ارسال که این کد برای هر دوقسمت عضویت کاربرد دارد:

<input type="image" style="width:80px; height:20px" src="{THEME}/images/dlet_bttn_submit.gif" name="submit" />

 

[progpars]

آموزش طراحی قالب - جلسه 5

خوب دوستان عزیز باز هم سلام امروز قصد داریم تا آموزش یا همان معرفی تگهای comments.tpl را به شما یاد داده .

تگ {date} تگی است برای نشان دادن تاریخ ارسال نظر

تگ{mail} تگی است برای نشان دادن ایمیل فرد نظر داده

تگ {author} تگی است برای نشنان دادن نام نویسنده نظر

تگ {comment-id} برای تعداد نظراتی که این فرد نظر داده است

تگ {land} که این قسمت اگر فرد عضو باشد نشان داده می شود چون این اطلاعات در هنگام عضویت از فرد خواسته میشود که برای نشان دادن کشور است

تگ {registration} برای تاریخ عضویت فرد است که این هم بستگی به عضویت فرد دارد و برای کاربران مهمان نشان داده نمی شود

تگ {fullname} برای نشان دادن نام کامل شخص است که این تگ هم برای کسانی که عضو شدن است

تگ {ip} که نشان دادن آیپی فردی است که نظر را ارسال کرده است

تگهای {comment}[signature] که برای نشان دادن نظر و دیدن اطلاعات مانند امضاء است که در هنگام عضویت پر کرده است

تگ {signature} [/signature] که این هم برای امضاء است .

تگ {group-icon} که برای نشان دادن عکسی است که نشان دهنده عضویت آن است مثل(مدیر .مدیر سایت.ویرایشگر.عضو فعال)

تگ {group-name} این تگ هم مانند تگ بالا عمل میکند فقط اینکه این بصورت متنی عضویت را نشان میدهد

تگ {news-num} که نشان دهنده تعداد پستهایی است که در سایت نهاده

تگ {comm-num} برای نشان دادن تعداد نظرات

تگ [fast] پاسخ[/fast] که برای گذاشتن امکان پاسخ به نظر است

تگ [com-edit] ويرايش[/com-edit] که مخصوص کسی است که این نظر را داده و مدیر سایت

تگ [com-del] حذف[/com-del] که این تگ هم برای حذف نظری است که داده شده که این هم توسط کسی که نظر داده و مدیر سایت حذف میشود

خوب برای نشان دادن آیکون فرد که هنگام عضویت آپلود میکند باید تگ {foto} را در آدرس یک تصویر خالی قرار دهند

 

[progpars]

آموزش طراحی قالب - جلسه 6

قصد آموزش سه tpl را نیز داریم static.tpl و offline.tpl و speedbart.tpl

تگ های static.tpl مربوط به بخش صفحات اضافی نیز میشود:

تگ {description} که برای عنوان صفحه ی اضافی نیز است

تگ {static} برای نشان دادن مطلبی است که در کنترل پنل مدیریت این مطلب را ارسال کردید در ضفحات اضافی

تگ {views} که برای نشان دادن تعداد بازدیدها است

تگهایspeedbart.tpl که مربوط به لینکهای سریع میشود:

تگ{speedbar} که فقط کافی است این تگ قرار دهید برای لینکهای سریع

offline.tpl برای غیر فعال بودن سایت است:

و حال می رسیم به قسمت غیر فعال بودن سایت که این بخش هم نیز بستگی به خودتان دارد تا چگونه درست کنید یعنی از هیچ تگی استفاده نیز نمیشود و هر گونه که درست کردید همانگونه نمایش داده میشود .

خوب دوستان عزیز امروز تونستم سه tpl رویک جا به شما آموزش بدهم که tpl واقعا سبک و آسانی نیز هستند و پر کاربرد.

 

[progpars]

آموزش قالبسازی - جلسه 7

قصد آموزش pm.tpl رو داریم

خوب این tpl از چند بخش تشکیل میشوند که ما باید انها را در یک tpl ولی تقسیم بندی شده درست کنیم (منظورم تیبل بندی جداگانه است)

خوب اولین بخش پیام خصوصی است :

[inbox]جعبه پیام ها[/inbox] که اینگونه این تگ را قرار میدهیم

[outbox]جعبه خروجی پیامها[/outbox] که این تگ هم اینگونه قرار میدهیم

[new_pm]ارسال پيام جديد[/new_pm] که باز هم این تگ را اینگونه قرار میدهیم بدون هیچ تغییری

خوب بخش اول تمام شد حال به بخش دوم می رویم.

که بخش دوم را باید ما بین این دو تگ قرار دهیم [pmlist] [/pmlist] که تگی که باید ما بین این دو قرار گیرد که مربوط به بخش فهرست پیام ها نیز است این تگ است فقط {pmlist}

خوب بخش دوم هم نیز تمام شد حال به بخش سوم میرسیم که تگهای این بخش هم باید بگید این دو تگ قرار گیرند [newpm] [/newpm] که مربوط به بخش ارسال پيغام خصوصي جديد است که شامل تگهای زیر هستند.

تگ گیرنده که باید کاربر آن را مشخص کند که باید درون یک text نوشته شود که کد آمادش رو ما قرار دایدم و دیگر احتیاج به ایجاد کردن نیست کافیست همین کد را قرار دهید:

<input type="text" name="name" value="{author}" class="f_input" />

خوب بخش موضوع که این هم باید در یک text قرار دهیم تگ را که ما باز هم کد آماده ی ان را قرار دادیم.

<input type="text" name="subj" value="{subj}" class="f_input" />

خوب حال میرسیم به قسمت جای متن که باید بین دو تگ [not-wysywyg] [/not-wysywyg] باشد که ما این را با این دوتگ قرار دادیم در پایین.

[not-wysywyg]<textarea name="comments" tabindex="3" class="f_textarea" />{text}</textarea>[/not-wysywyg]{wysiwyg}

خوب حالا قسمت ذخیره پیام در قسمت جعبه خروجی پیام است که باید یک checkbox قرار دهیم که ما کد اماده اش را قرار دادیم برایتان.

<input type="checkbox" name="outboxcopy" value="1" />

خوب در قسمت کد امنیتی هم باید این تگ را قرار دهید{sec_code}
و بعد هم برای اینکه کد را کاربر تایپ کند ما باز هم احتیاج به یک text داریم که کدش در زیر است.

<input type="text" name="sec_code" id="sec_code" style="width:115px" class="f_input" />

خوب وقتی کد بالا هم نهادیم [/sec_code] را قرار دهید تا بخش کد امنیتی بدرستی کار کند.

و حال کد دکمه ی ارسال است که کد زیر را قرار میدهیم

<input type="image" style="width:80px; height:20px" src="آدرس عکس دکمه" name="submit" alt="ارسال پيام" />

خوب حالا بخش آخر هم که مربوط متنی است که اگر کسی برای کسی بفرستد هنگامی که لاگین میشود که بایدتگهای زیر را بین دو تگ [readpm] [/readpm] قرار دهیم.

تگ {subj} که برای عنوان پیام خصوصی است

تگ {text} که مربوط به متن پیام خصوصی است.

تگ {author} که برای نشان دادن نویسنده متن پیام است.

تگ [reply]پاسخ[/reply] که برای پاسخ دادن به پیام است

تگ [del]حذف[/del] که برای حذف پیام است.

 

[progpars]

آموزش طراحی قالب - جلسه پایانی



:: ساخت جستجو در سایت

.خوب یکی از قسمتهایی که در قالبسازی دیتالایف مهم است جستجو است که خیلی ها شاید با مشکل بر بخورند.خیلی ها منظور کسانی است که این تگها یا قسمتها رو از قالب پیش فرض کپی میکنند به همین دلیل هم ممکن است که آن کد به صورت کامل کپی نشود چون هنگامی که می خواهیم جستجو رو از قالب پیش فرض کپی کنیم چون این تکست ها و باتن های جستجو همگی درون قسمت فرم قرار دارند شاید به همین دلیل ما آن قسمت آغازین تگ و پایانی تگ را نتونیم کپی کنیم و فقط تکست و باتن و کپی کنیم که این یک مشکل است اولان من می گویم خودتان بسازید بهتر است از کپی که در پایین من آموزش سایت جستجو رو به شما دوستان داده ام.
خوب اول تگ فرم رو آغاز می کنیم با کد زیر.

<form onsubmit="javascript: showBusyLayer()" method="post" >

خوب منظورم از :

 <form

که خودش یک تگ است و برای شروع اینگونه می نویسیم .
منظور :

 onsubmit="javascript: showBusyLayer()"

هم یعنی وقتی روی دکمه ی کلیک شد این آجاکس شروع به کار کند.
منظورم از :

 method="post"

این قسمت از تگ هم برای ارسال اطلاعات توسط کاربر به سرور است که ما با آن کاری نداریم و اینگونه می نویسیم.
حال به بعدی رجوع میکنیم که تو فرم مخفی باید بنویسیم که آن به صورت زیر است.

<input type="hidden" name="do" value="search" />
<input type="hidden" name="subaction" value="search" />

خوب در هر دو کد بعضی چیزها مشابه هستند که ما توضیح می دهیم هر کدام را
منطور از :

<input

یک ورودی بساز :

type="hidden"

مشخصه هیدن(مخفی) که :

name="do"

نامش do باشد که value هم search باشد.
خوب حال به خط بعدی می رویم که بخش مهم این فرم است که باید یک text , submit نیز بسازیم
خوب اول یک text می سازیم به صورت زیر.

<input name="story" type="text" >

یک ورودی بساز

<input

با نام

name="story"

از نوع

type="text"

که برای وارد کردن متن جستجو است
و حال آخرین بخش هم که برای دکمه سرچ است که به صورت زیر مینویسیم.

<input type="submit" name="submit" value="جستجو" />

<input

که یک وروردی بساز که از نوع :

type="submit"

باشد .و نامش

name="submit"

و اسم خود دکمه هم:

value="جستجو"

و در اخر هم تگ پایان بخشیدن رو نیز بگذارید

</form>

وشکل کل کد بالا به صورت زیر است که باید قرار دهید.

<form onsubmit="javascript: showBusyLayer()" method="post" >
<input type="hidden" name="do" value="search" />
<input type="hidden" name="subaction" value="search" />
<input name="story" type="text" >
<input type="submit" name="submit" value="جستجو" />
</form>

آموزش ها هم به پایان رسید با کمی تلاش مثل دیگر طراحان دیتالایف شما هم میتونید طراح شوید و قالبهای خوشگل بزنید .
{ هرگز از نفهمیدن مطالب فوق و طراحی قالب نا امید نشید بلکه با چند بار خوندن و تلاش یاد میگیرید }

موفق باشید

 

[iLove]

واقعا عالي بود .
ممنون دوست عزيز.

 

[itlor]

سلام
ببخشید این تگها حالا باید کجا قرار بگیره درسته نوشتین داخل main.tpl یا pm.tpl ولی به جای کدام تگ html در این قسمت از tpl باید قرار بگیره ؟؟؟؟؟؟؟؟؟؟/