מדריך לבניית גלריית תמונות

‏ • 28 ביוני, 2003

בשיעור זה נלמד כיצד להכין גלריית תמונות שלמה.
נתחיל בכך שכמובן ניצור לנו מסד נתונים חדש, נפתח את התוכנה Access נלחץ על הלחצן “חדש” נבחר תצוגת עיצוב ונתחיל להקליד לפנים את הנתונים הבאים.


















שם שדהסוג נתונים
IDמספור אוטומטי
descriptionתזכיר
nameתזכיר
Imageתזכיר

התוצאה צריכה להראות כך:


קראתי לטבלה Gallery מן הסתם והגדרתי את השדה ID כמפתח ראשי למרות שזה לא חובה.
כעת ניצור את הדף שיציג לנו את הגלרייה, ניצור דף חדש בשם Gallery.asp ונתחיל להקליד בו:







1
2
3
4
5
6
7
8
9
10
11
12
13
14
15  




<%
dim conn
set conn=server.createobject(“adodb.connection”)

dim ConnString
ConnString = “Provider=Microsoft.Jet.OLEDB.4.0; Data Source=” &_
                          Server.MapPath(“Gallery.mdb”) & “;”

conn.Open connString

dim rs,sql
set rs=server.CreateObject(“adodb.recordset”)
sql=“select * from gallery “
rs.Open sql,conn
%>



בשורות אלו יצרנו את הקישור למסד הנתונים שלנו (Gallery) ולטבלה שלנו בתוכו גם Gallery נמשיך להקליד






1
2
3
4
5  




<%
if rs.EOF =true and rs.BOF=true then
 Response.write “<center>אין תמונות “
end if
%>



כאן אמרנו לו שאם הרשימה שלנו בתוך הטבלה ריקה אז שירשום שאין תתמונות בגלרייה
נמשיך להקליד:







1
2
3
4
5
6
7
8
9
10
11
12
13  




<%
do while not rs.eof

response.Write “<table width=100% dir=rtl border=1>”
response.Write “<td align=right valign=top width=40>”
response.Write “<a href=”&“image_details.asp?id=” & rs(“id”) &“>”
response.Write ” <img src=”/data/uploadedFiles/Articles/images/` “& rs(“image”) &” ` width=40 height=40>”
response.Write “</td>”
response.Write “<td align=right valign=top>”
response.Write ” <font size=2 face=arial> “& rs(“description”) &“</font> “
response.Write “</td>”
response.Write “</table>”
response.Write “<br>”



מה שיצרנו כאן זה טבלה שתראה את התמונה בקטן (40 על 40) ולידה תיאור, כאשר ילחצו על התמונה זה יוביל אותנו לדף שיראה את התמונה בגודל מלא ושם נכניס את השם שלה גם
נמשיך לקליד:







1
2
3
4
5
6
7
8  




rs.movenext
loop

rs.Close
set rs=nothing
conn.Close
set conn=nothing



סגרנו את החיבור ונתנו פקודה להמשיך להזרים את הנתונים בטבלה

כעת בואו נראה את התוצאות

כמובן שאין תמונות כי עדיין לא הכנסו כאלו, בואו נכניס עכשיו קצת נתונים לטבלה
הכנסתי כמה נתנוים והנה התוצאה, כמובן שאצלכם זה יראה שונה.


הינה אנחנו רואים את התמונה בקטן כאמור, ואת התיאור לידה, התמונה גם נהפכה לקישור, בואו נראה לאיזה דף היא מובילה אותנו:


אתם זוכרים שנתנו קישור לדף הזה? כמובן שלא כי לא נתנו,רשמנו לו לזהות את ה ID של התמונה ולפי זה להביא לנו את הקישור המתאים.
כעת נכין את הדף שיציג את התמנה בגודלה הטבעי ויראה את שמה, ניצור דף חדש בשם Image_details.asp ונתחיל להקליד.







1
2
3  




<%
dim id
id=Request.QueryString(“id”)


תחילה הגדרנו את השדה ID כדי שנוכל להשתמש בה בהמשך.
נמשיך:







1
2
3
4
5
6
7
8
9
10
11
12
13
14
15  




dim conn
set conn=server.createobject(“adodb.connection”)

dim ConnString
ConnString = “Provider=Microsoft.Jet.OLEDB.4.0; Data Source=” &_
                          Server.MapPath(“Gallery.mdb”) & “;”

conn.Open connString

dim rs,sql
set rs=server.CreateObject(“adodb.recordset”)
sql=“select * from gallery where id=” & id
rs.Open sql,conn




יצרנו את החיבור למסד הנתונים ואמרנו לו לקחת את הנתונים מהשדה שהID שווה לתמונה שעליה לחצנו.

נמשיך:






1
2
3
4
5
6
7
8
9
10
11
12
13
14  




<%
If not rs.eof Then
    response.Write “<Center>”
    response.Write “<h1> “& rs(“name”) &” </h1>”
    response.Write “<p>”
    response.Write “<img src=”/data/uploadedFiles/Articles/images/` “& rs(“image”) &” `> “
    response.Write “</center>”
End If

rs.Close
set rs=nothing
conn.Close
set conn=nothing
%>



כעת נלחץ על התמונה שלנו וזוהי התוצאה:


בכוונה הראתי את החלק של שורת הכתובת, תראו עוד הפעם את הכתובת של הדף, הוא משתנה לפי ה ID של התמונה

כאן נגמר המדריך, מקווה שנהנתם.

תגיות: , ,

תגובות בפייסבוק