يك web page آموزشي چند منظوره براي دوستان مبتدي همراه با توضيحات

[mazoolagh]

با ديدن پستهاي زيادي كه در انجمنهاي مختلف مربوط به صفحات وب ديدم احساس كردم كه خيلي از دوستان كه درخواست كمك ميكنند مشكلاتشون مشترك هست. بنابراين تصميم گرفتم يك صفحه كاربردي (عملا اين صفحه بخشي از يك پروژه واقعي است كه 5 سال پيش نوشتم و الان با تغييرات و ساده سازي تقديم همه كاربران خوب اين سايت ميكنم) رو اينجا بگذارم كه هم پاسخگوي همزمان چندين مطلب باشد و هم براي تازه كارها يك آموزش محسوب شود.

صورت مساله: فرض كنيد ايجاد سايت يك روزنامه به عهده شما گذاشته شده و در قسمتي از اين سايت بايد صفحه اي باشد كه كاربر بتواند با انتخاب تاريخ و موضوع به اطلاعات مورد نظرش برسد. همچنين فرض كنيد كه روزنامه از چند سال قبل آرشيوي درست كرده است كه اطلاعات موضوعي هر شماره از روزنامه را هم بصورت pdf و هم html را در آن نگهداري ميكند(اين دومي را فقط فرض كنيد چون معمولا فقط pdf است آنهم صفحه به صفحه و نه موضوعي)


چگونه صفحه را طراحي كنيم

ا- چون اطلاعات آرشيو قبلا بصورت صفحات مستقل(بدون ديتابيس) تهيه شده بنابراين نيازي به ASP نيست و صفحه html ساده همراه با client side script كه براساس اطلاعات تاريخ و موضوع يك لينك درست كند كفايت ميكند.

2- موضوع نحوه نمايش اطلاعات تا حد زيادي سليقه اي است ولي بهتر است بخش تعيين تاريخ و موضوع در بالاي صفحه و بصورت ثابت نمايش داده شود و اطلاعات در زير آن ظاهر شود. هر چند كه بعضي روزنامه ها يك صفحه معمولا بزرگ دارند كه تمامي تاريخها را بصورت لينك نشان ميدهد. در اينجا هم بمنظور زيبايي صفحه و راحتي كاربر و هم رعايت اصول از روش اول استفاده ميكنيم. ولي سعي ميكنم در اولين فرصت براي روش دوم هم يك مثال بياورم.

3- تعيين موضوع كه حتما بايد توسط combo يا همان dropdown list باشد چون منطقي نيست كه كاربر موضوع را تايپ كند ولي تعيين تاريخ ميتواند هم توسط textbox و هم combo انجام شود. اشكال تعيين تاريخ توسط textbox اين است كه كاربر بايد بداند تاريخ را چگونه وارد كند. فرضا سال دورقمي باشد يا چهاررقمي؟ روز و ماه و سال با / جدا شود يا - يا هيچكدام و مسايلي نظير اين. علاوه بر آن برنامه نويس بايد اين فرمت را چك كند و نادرست بودن آن را به كاربر نشان دهد. بنابراين تعيين تاريخ با combo هم براي كاربر راحتتر است هم برنامه نويس.
فكر نميكنم لازم به توضيح باشد كه تاريخ را نميتوان از نظر منطقي در يك combo قرار داد و حتما سه combo جداگانه براي روز و ماه و سال لازم است.
بنابراين چهار combo مستقل داريم كه تركيب آنها آدرس يك صفحه را مشخص ميكند.

4- در صفحاتي كه شرايط انتخاب از هم مستقل هستند يا بيش از يك شرط براي انتخاب داريم(مثل همين صفحه) بايد ابتدا كاربر همه شرايط را مشخص كرده و بعد با فشار دادن يك كليد نتيجه را مشاهده كند. چون اطلاعات به دوصورت PDF و html نگهداري ميشود ميتوانيم از combo با دو انتخاب يا option button يا check box استفاده كنيم ولي در هر صورت بايد يك button بگذاريم كه اطلاعات را نمايش دهد. بنابراين بهتر است بجاي استفاده از موارد فوق از دو button جداگانه يكي براي نمايش pdf و ديگري براي html استفاده شود.

5- براي تقسيم كردن صفحه وب به دو يا چند قسمت ميتوانيم از Frame يا IFRame استفاده كنيم. در اين مثال براي ايجاد بخش نمايش اطلاعات از IFrame استفاده ميكنيم كه نسبت به Frame راحتتر است.

6- وقتي پروژه اي به شما ارجاع ميشود معمولا جزييات كار به عهده برنامه نويس و تشخيص خودش گذاشته ميشود. بهتر است قبل از اينكه كسي به شما بگويد( اگر فلان نكته را در نظر ميگرفتي بهتر بود) خودتان ريزه كاري ها را انجام دهيد. در اين برنامه چند نكته هست كه بقول معروف در صورت مساله نيامده ولي در نظر گرفتن آن نشاندهنده ذوق و مهارت و تجربه شما است.
اول اين كه معمولا كسي كه به سايت روزنامه اي مراجعه ميكند ميخواهد آخرين شماره يا بعبارتي نسخه روز را ببيند بنابراين بد نيست اگر صفحه هنگام load شدن خودش روي تاريخ روز تنظيم شود. البته چون صفحه مورد نظر ما در سمت server ساخته نميشود اگر تاريخ كامپيوتر مشاهده كننده نادرست باشد بالطبع نتيجه هم نادرست خواهد بود.
دوم اين كه جلوي ورود تاريخ نادرست را بگيريم فرضا تاريخ 31 آبان.
سوم اين كه سالهاي كبيسه را تشخيص دهيم و اجازه ندهيم كاربر در سال غير كبيسه تاريخ 30 اسفند وارد كند.
چهارم اين كه چون معمولا روزهاي جمعه روزنامه اي منتشر نميشود جلوي ورود آن را هم بگيريم.
پنجم اين كه روزنامه هر روز معمولا در ساعت صفر روي سايت نميرود بلكه چند ساعتي تاخير دارد. بنابر اين خوب است در هنگام load شدن صفحه با توجه به ساعت فعلي چك كنيم اگر روزنامه امروز روي سايت قرار داده شده روي تاريخ روز و گرنه روي تاريخ روز قبل تنطيم شود كه آنهم اگر جمعه باشد بايد يك روز عقب برود. در برنامه نويسي server side خيلي راحت ميتوان با چك كردن ديتابيس يا فايلهاي آرشيو آخرين تاريخ انتشار روزنامه را مشخص كرد ولي در اين مثال اساس بر استفاده از برنامه نويسي client side است. بنابراين با توجه به هدف آموزشي اين مثال لطفا اگر احيانا اساتيد گذرشان به اين مبحث افتاد خرده نگيرند.

در حال حاضر موارد چهارم و پنجم را عمدا حذف كرده ام تا دوستاني كه مايل به تمرين باشند شخصا آن را نوشته و در متن برنامه بگنجانند. از چند روز ديگر بتدريج موارد فوق و چند مورد ديگر را اضافه ميكنم و بتدريج برنامه را كامل كرده و آنرا بصورت ASP و بعد ASP.NET در مياوريم.

اينهم source صفحه كه در پست بعدي توضيحاتي در مورد جزييات بخشهاي مختلف آن خواهم داد:

<html dir="rtl"> 
<head> 
<meta http-equiv="content-language" content="en-us"> 
<meta http-equiv="content-type" content="Text/html; charSet=utf-8"> 
<title>Welcome to XYZ Newspaper Site</title> 
<script language="vbscript"> 
'============================================================================= 
Sub Window_OnLoad 

For i=1 to 31      ' creates the DAY Combo(Drop Down List) 
   Set OPT = Document.CreateElement("option") 
   OPT.Text=Cstr(i) 
   OPT.Value=i 
   Window.DAY.Options.Add(OPT) 
Next 

For i=72 to 83      ' creates the YEAR Combo(Drop Down List) 
   Set OPT = Document.CreateElement("option") 
   OPT.Text=Cstr(i) 
   OPT.Value=i 
   Window.YEAR.Options.Add(OPT) 
Next 

MONTHS = Array("فروردين","ارديبهشت","خرداد","تير","مرداد","شهريور","مهر","آبان","آذر","دي","بهمن","اسفند") 
For i=1 to 12      ' creates the Month Combo(Drop Down List) 
   Set OPT = Document.CreateElement("option") 
   OPT.Text=MONTHS(i-1) 
   OPT.Value=i 
   Window.MONTH.Options.Add(OPT) 
Next 

TOPICS_Text = Array("خلاصه","داخلي","خارجي","سياست","سرمقاله","گزارش","اقتصاد","شهرستانها","حوادث","ورزش","دانش") 
TOPICS_Value = Array("summary","internal","external","politics","editorial","report","economy","other","events","sport","science") 
For i=0 to Ubound(TOPICS_Text)      ' creates the TOPIC Combo(Drop Down List) 
   Set OPT = Document.CreateElement("option") 
   OPT.Text = TOPICS_Text(i) 
   OPT.Value = TOPICS_Value(i) 
   Window.TOPIC.Options.Add(OPT) 
Next 
Window.TOPIC.SelectedIndex = 0 

TODAY = Now()      ' NOW() returns the current Date (from client's computer) 
EMROOZ = M2S(DatePart("YYYY",TODAY),DatePart("M",TODAY),DatePart("D",TODAY)) 
Set COMBO=Window.YEAR 
v = Set_Index_By_Value(COMBO,Cint(Left(EMROOZ,4))-1300) 
'COMBO.SelectedIndex = Find_Index_From_Value(COMBO,Cint(Left(EMROOZ,4))-1300) 
Set COMBO=Window.MONTH 
v = Set_Index_By_Value(COMBO,Cint(Mid(EMROOZ,6,2))) 
'COMBO.SelectedIndex = Find_Index_From_Value(COMBO,Cint(Mid(EMROOZ,6,2))) 
Set COMBO=Window.DAY 
v = Set_Index_By_Value(COMBO,Cint(Right(EMROOZ,2))) 
'COMBO.SelectedIndex = Find_Index_From_Value(COMBO,Cint(Right(EMROOZ,2))) 
End Sub 
'============================================================================= 
Sub Show(DOCUMENT_TYPE) 
Y = Cint(Window.YEAR.Options(Window.YEAR.SelectedIndex).Value) 
M = Cint(Window.MONTH.Options(Window.MONTH.SelectedIndex).Value) 
D = Cint(Window.DAY.Options(Window.DAY.SelectedIndex).Value) 
If Date_Is_OK(Y,M,D) Then 
   FOLDER_NAME = Cstr(y*10000 + m*100 + d) 
   DOCUMENT_NAME = Window.TOPIC.Options(Window.TOPIC.SelectedIndex).Value 
   DOCUMENT_URL = "http://www.xyznewspapers.org/archive/" & FOLDER_NAME & "/" & DOCUMENT_NAME & DOCUMENT_TYPE 
   Document.all.item("lower_pane").src = DOCUMENT_URL 
Else 
   v = MsgBox("تاريخ نادرست است!",0,"Invalid Date") 
End If 
End Sub 
'============================================================================= 
Function Find_Index_From_Value(COMBO,VAL)      ' This function finds the index of an option in a combo from the given value 
Find_Index_From_Value = -1 
For i = 0 to COMBO.Options.length-1 
   If Cint(COMBO.Options(i).Value) = VAL Then 
      Exit For 
   End If 
Next 
Find_Index_From_Value = i 
End Function 
'============================================================================= 
Function Set_Index_By_Value(COMBO,VAL)         ' This function sets the index of an option in a combo from the given value 
Index_Found = False 
idx = -1 
For i = 0 to COMBO.Options.length-1 
   If Cint(COMBO.Options(i).Value) = VAL Then 
      idx = i 
      Exit For 
      Index_Found = True 
   End If 
Next 
COMBO.SelectedIndex = idx 
Set_Index_By_Value = Index_Found 
End Function 
'============================================================================= 
Function M2S(Y,M,D)                  ' This function returns a Shamsi date (String) 
DX = DateSerial(Y, M, D)            ' from the given Miladi (Gregorian) Year(Y),Month(M) and Day(D) - all Integers 
DIFF = DateDiff("d",  "1921/3/20",DX)    

YYYY = 1300 
DAYS = 365 
Do While DIFF > DAYS 
    DIFF = DIFF - DAYS 
    YYYY = YYYY + 1 
    If YYYY Mod 4 = 3 Then      ' Kabiseh 
        DAYS = 366 
    Else 
        DAYS = 365 
    End If 
Loop 

If DIFF > 186 Then 
    DIFF = DIFF - 186 
    M = (DIFF \ 30) + 7 
    D = DIFF mod 30 
Else 
    M = DIFF \ 31 + 1 
    D = DIFF mod 31 
End If 

M2S=Cstr(YYYY)  
If M<10 Then
	M2S = M2S & "/0" & Cstr(M)
Else
	M2S = M2S & "/" & Cstr(M)
End If
If D<10 Then
	M2S = M2S & "/0" & Cstr(D)
Else
	M2S = M2S & "/" & Cstr(D)
End If
End Function 
'============================================================================= 
Function Date_Is_OK(YEAR,MONTH,DAY)      ' This Function checks the given date(Shamsi) against 
Date_Is_OK = True 
ESFAND_DAYS = 29 
If YEAR MOD 4 = 3 Then   ESFAND_DAYS = 30 
If MONTH>6 And DAY>30 Then  Date_Is_OK = False 
If MONTH=12 And DAY>ESFAND_DAYS Then Date_Is_OK = False 
End Function 
'============================================================================= 
</script> 
</head> 

<body> 
<div align="center"> 
<table border="0" width="60%" id="table1" cellpAdding="0" cellspacing="0" > 
   <tr> 
      <td align="center">روز</td> 
      <td align="center">ماه</td> 
      <td align="center">سال</td> 
      <td align="center">سرفصل</td> 
      <td align="center"></td> 
      <td align="center"></td> 
   </tr> 
   <tr> 
      <td align="center"> 
      <select id="DAY"></select> 
      </td> 
      <td align="center"> 
      <select id="MONTH"> 
      </select></td> 
      <td align="center"> 
      <select id="YEAR"></select> 
      </td> 
      <td align="center"> 
      <select id="TOPIC"></select> 
      </td> 
      <td align="center"> 
      <input id="show_html" type ="button" Value ="html" onclick=show(".htm")> 
      </td> 
      <td align="center"> 
      <input id="show_pdf" type ="button" Value ="pdf" onclick=show(".pdf")> 
      </td> 
   </tr> 
</table> 
<Iframe id="lower_pane" height ="85%" width="98%" vspace="7%" frameborder="no" ></Iframe> 
</div> 
</body> 

</html>

 

[FRH]

سلام برو بچ عزيز
دوستان همونطور كه مي دونيد فرانت پيج در صفحه html خودش تمام كدها رو نشون نميده مخصوصا كدهاي مربوط به shared border و باتن ها و ... مي خواستم بدونم كسي ميدونه چطور ميشه كاري كرد كه همه كدها نشون داده بشه؟ در ضمن فرانت پيج من xp هست.البته من ميدونم كه با notepad ميشه همه كدها رو ديد و اونا رو تغيير داد ولي يه كاري هستش كه حتما بايد تو خود فرانت پيج باشه و با نت پد نميشه.
لطفا كمك كنيد. در ضمن كسي هست در ضمينه سازگار كردن قالب سايت من با mt منو كمك و راهنمايي كنه.لطفا اگه هست بهم ايميل بزنه: [email protected]

 

[nima178]

آخه بردار من من كاري به فرونت پيج ندارم برنامه ي خوبي نوش جانت
اما طراحي و حتي ويرايش قالب كار حرفه اي مگه مي شه مثلا با بيل مثلا سد ساخت نمي شه
برنامه هايي خوبي هست كه كار فرونت پيجو با سورسش انجام ميده

 

[neopersia]

سلام برو بچ عزيز
دوستان همونطور كه مي دونيد فرانت پيج در صفحه html خودش تمام كدها رو نشون نميده مخصوصا كدهاي مربوط به shared border و باتن ها و ... مي خواستم بدونم كسي ميدونه چطور ميشه كاري كرد كه همه كدها نشون داده بشه؟ در ضمن فرانت پيج من xp هست.البته من ميدونم كه با notepad ميشه همه كدها رو ديد و اونا رو تغيير داد ولي يه كاري هستش كه حتما بايد تو خود فرانت پيج باشه و با نت پد نميشه.
لطفا كمك كنيد. در ضمن كسي هست در ضمينه سازگار كردن قالب سايت من با mt منو كمك و راهنمايي كنه.لطفا اگه هست بهم ايميل بزنه: [email protected]

می تونی share border ها رو تو پوشه border_ پیدا کنی و اونا رو ادیت کنی
ولی من کلاً با اونا رابطه خوبی ندارم