《《圖片管理系統(tǒng)》PPT課件》由會員分享，可在線閱讀，更多相關(guān)《《圖片管理系統(tǒng)》PPT課件（89頁珍藏版）》請在裝配圖網(wǎng)上搜索。
1、 1.創(chuàng)建專輯/修改專輯封皮圖片及簡介/刪除專輯/ 按名稱查詢專輯;2.為專輯添加圖片/瀏覽專輯圖片/刪除選中圖片/ 修改圖片簡介及所屬專輯名;3.分頁查詢 用力圖創(chuàng)建專輯修改專輯刪除專輯 查詢專輯添加圖片瀏覽圖片刪除圖片修改圖片 圖片管理系統(tǒng)創(chuàng)建專輯修改專輯刪除專輯查詢專輯添加圖片瀏覽圖片刪除圖片修改圖片功能結(jié)構(gòu)圖 數(shù)據(jù)表設(shè)計表名album（專輯表）列名描述數(shù)據(jù)類型（精度范圍）空/非空約束條件albumID專輯編號int非空PK（自增）albumName專輯名稱varchar(50)非空albumTime創(chuàng)建時間datetime非空logoUrl圖片地址varchar(100)非空album
2、Desc專輯簡介Varchar(100)非空 表名image（圖片表）列名描述數(shù)據(jù)類型（精度范圍）空/非空約束條件imageID圖片編號int非空PK（自增）imageName圖片名稱varchar(50)非空imageUrl圖片地址varchar(50)非空imageTime添加時間datetime非空imageDesc圖片簡介varchar(100)非空albumID所屬專輯編號int非空數(shù)據(jù)表設(shè)計 模塊類別功能創(chuàng)建專輯創(chuàng)建專輯名稱，添加封面圖片、添加專輯簡介修改專輯修改專輯封面圖片和簡介信息刪除專輯刪除專輯信息包括專輯中圖片信息查詢專輯按專輯名稱查詢或分頁查詢,瀏覽專輯編號、專輯名稱、專
3、輯封面圖片、專輯簡介等信息添加圖片上傳圖片及圖片簡介查詢圖片顯示圖片的名稱、地址、上傳時間、簡介、所屬專輯名以及圖片本身修改圖片修改圖片的簡介信息及所屬的專輯刪除圖片刪除圖片相關(guān)信息系統(tǒng)模塊劃分 1、文件新建網(wǎng)站，在站點下新 建App_Code和 App_Data 文件夾；2、將數(shù)據(jù)庫文件及數(shù)據(jù)庫日志文 件，存放在App_Data中；3、右擊App_Code，添加新 項，添加類文件SqlHelper.cs 和DB.cs；4、右擊站點添加配置文件 web.config5、添加兩個文件夾image和 logo分別存放圖片 利用SqlDataSource生成數(shù)據(jù)庫連接字符串 將SqlDataSour
4、ce生成的數(shù)據(jù)庫連接字符串復(fù)制到web.config中，然后就可以刪除該SqlDataSource，如下所示： 為了代碼重用，為了體現(xiàn)分層思想，我們將數(shù)據(jù)庫連接代碼寫在SqlHelper.cs公共類中，將數(shù)據(jù)庫操作代碼寫在DB.cs公共類中。SqlHelper.cs中：1、右擊站點添加引用.NETSystem.Configuration2、代碼中添加using System.Data; using System.Data.SqlClient; SqlHelper.cs代碼如下：public class SqlHelper private static readonly string Conne
5、ctionString = ConfigurationManager.ConnectionStringsConnectionString.ConnectionString; SqlConnection conn = new SqlConnection(ConnectionString); public SqlCommand GetCommand(string sqlStr, params SqlParameter cmdparms) SqlCommand cmd = new SqlCommand(); cmd.Connection = conn; cmd.CommandText = sqlSt
6、r; cmd.CommandType = CommandType.Text; if (cmdparms != null) foreach (SqlParameter p in cmdparms) cmd.Parameters.Add(p); return cmd; public SqlHelper() conn.Open(); DB.cs代碼（首先引用using System.Data.SqlClient;）public class DB public DB() / TODO: 在此處添加構(gòu)造函數(shù)邏輯/ /在首頁上顯示所有專輯信息 public DataTable GetAll() SqlHe
7、lper helper = new SqlHelper(); string strsql = select * from album; SqlCommand cmd = new SqlCommand(); cmd = helper.GetCommand(strsql,null); DataTable dt = new DataTable(); using (SqlDataReader rdr = cmd.ExecuteReader() dt.Load(rdr); return dt; /在首頁上按名稱查詢專輯信息 public DataTable GetByID(int id) SqlHelp
8、er helper = new SqlHelper(); string strsql = select * from album where albumID=albumID; SqlParameter parm = new SqlParameter new SqlParameter(albumID,id) ; SqlCommand cmd = new SqlCommand(); cmd = helper.GetCommand(strsql, parm); DataTable dt = new DataTable(); using (SqlDataReader rdr = cmd.Execute
9、Reader() dt.Load(rdr); return dt; /為首頁的專輯名稱下拉菜單綁定名稱 public DataTable GetAlbumName() SqlHelper helper = new SqlHelper(); string strsql = select albumID,albumName from album; SqlCommand cmd = new SqlCommand(); cmd = helper.GetCommand(strsql, null); DataTable dt = new DataTable(); using (SqlDataReader
10、rdr = cmd.ExecuteReader() dt.Load(rdr); return dt; 當(dāng)SqlHelper.cs和DB.cs兩個公共類寫好后，右擊站點，生成網(wǎng)站，檢查是否生成成功。如果生成成功，做如下操作： 利用GridView顯示專輯信息，用上述方法新建數(shù)據(jù)源對象，與上述方法中不同的是，選擇的DB方法不同。注意：GridView的屬性設(shè)置：AllowPaging=True,AutoGenerateColumns=False,DataKeyNames=albumID,PageSize=2. 利用GridView顯示專輯信息，用上述方法新建數(shù)據(jù)源對象，與上述方法中不同的是，選擇的
11、DB方法不同。 給GridView編輯列，如下所示：BoundField:專輯編號、專輯名稱、專輯創(chuàng)建時間TemplateField:專輯封面HyperLinkField:為專輯添加圖片、瀏覽專輯圖片、修改專輯CommandField:刪除 Height:100pxwidth:100px 注意檢查GridView的屬性設(shè)置：AllowPaging=“True”AutoGenerateColumns=“False”DataKeyNames=“albumID”PageSize=“2” 增加查詢按鈕Button 新建ObjectDataSource,配置數(shù)據(jù)源，選擇DB中的GetByID 雙擊查詢按
12、鈕buttton1，進(jìn)入Default.aspx.cs代碼中編輯： protected void Button1_Click(object sender, EventArgs e) GridView1.DataSourceID = ObjectDataSource3.ID; GridView1.DataBind(); 對于”創(chuàng)建專輯”按鈕按下后,應(yīng)該打開新的窗體AddAlbum.aspx,實現(xiàn)專輯名稱,專輯封面圖片和專輯簡介信息的添加.如下圖: 在DB.cs中繼續(xù)添加功能塊,實現(xiàn)添加專輯信息的功能public void AddAlbum(string albumName, DateTime a
13、lbumTime, string logoUrl, string albumDesc) SqlHelper helper = new SqlHelper(); string strsql = insert into album (albumName,albumTime,logoUrl,albumDesc) values(name,time,logourl,desc); SqlParameter parm = new SqlParameter new SqlParameter(name,albumName), new SqlParameter(time,albumTime), new SqlPa
14、rameter(logourl,logoUrl), new SqlParameter(desc,albumDesc) ; SqlCommand cmd = helper.GetCommand(strsql, parm); cmd.ExecuteNonQuery(); 雙擊”提交”按鈕,將專輯信息添加到album數(shù)據(jù)表中. protected void Button1_Click(object sender, EventArgs e) DB db = new DB(); string albumName = TextBox1.Text; DateTime albumTime = DateTime
15、.Now; string logourl = image/ + FileUpload1.FileName; string exname = FileUpload1.FileName.Split(.)1; string albumDesc = TextBox2.Text; if (exname.ToLower() = jpg | exname.ToLower() = gif | exname.ToLower() = png) FileUpload1.SaveAs(Server.MapPath(logourl); db.AddAlbum(albumName, albumTime, logourl,
16、 albumDesc); Response.Write(alert(創(chuàng)建專輯成功); location.href=default.aspx;); 為專輯添加圖片功能的實現(xiàn):右擊站點添加新頁面addimage.aspx,給image數(shù)據(jù)表添加信息 再次給GridView編輯列，如下所示：查看HyperLinkField列:為專輯添加圖片 DataNavigateUrlFields: albumID綁定到超鏈接的NavigateUrl屬性字段;DataNavigateUrlFormatString: addimage.aspx?id=0對綁定到超鏈接的NavigateUrl屬性的值應(yīng)用的格式設(shè)置.
17、給image數(shù)據(jù)表添加信息:表名image（圖片表）列名描述數(shù)據(jù)類型（精度范圍）空/非空約束條件imageID圖片編號int非空PK（自增）imageName圖片名稱varchar(50)非空imageUrl圖片地址varchar(50)非空 imageTime添加時間datetime非空imageDesc圖片簡介varchar(100)非空albumID所屬專輯編號int非空 /打開DB.cs,添加方法,實現(xiàn)給專輯添加照片功能:public void addimage(int albumID,string imageName,string imageUrl,DateTime imageTim
18、e,string imageDesc) SqlHelper helper = new SqlHelper(); string addimage = insert into image (albumID,imageName,imageUrl,imageTime,imageDesc) Values(albumID,imageName,imageUrl, imageTime,imageDesc); SqlParameter parm = new SqlParameter new SqlParameter(albumID,albumID), new SqlParameter(imageName,ima
19、geName), new SqlParameter(imageUrl,imageUrl), new SqlParameter(imageTime,imageTime), new SqlParameter(imageDesc,imageDesc) ; SqlCommand cmd = helper.GetCommand(addimage, parm); cmd.ExecuteNonQuery(); /點擊addimage.aspx的 “提交按鈕”時:protected void Button1_Click(object sender, EventArgs e) DB db = new DB();
20、 int albumID =Convert.ToInt32(DropDownList1.SelectedValue); DateTime imageTime = DateTime.Now; string imageUrl = image/ + FileUpload1.FileName; string imageType = FileUpload1.FileName.Split(.)1; string imageName = FileUpload1.FileName.Split(.)0; string imageDesc = TextBox1.Text.ToString(); if (image
21、Type.ToLower() = jpg | imageType.ToLower() = gif | imageType.ToLower() = png) FileUpload1.SaveAs(Server.MapPath(imageUrl); db.addimage(albumID,imageName,imageUrl,imageTime,imageDesc);Response.Write(alert(添加成功！); location.href=default.aspx;); 瀏覽專輯圖片功能的實現(xiàn):右擊站點添加新頁面ViewImage.aspx 首先對default.aspx的GridVi
22、ew進(jìn)行編輯列操作，使得 “瀏覽專輯圖片按鈕”具有超鏈接功能,可鏈到ViewImage.aspx如下所示: /在DB.cs中編寫方法,實現(xiàn)瀏覽某個專輯中的所有照片首先引用命名空間:using System.Text;和using System.Collections; public DataTable showImage(int albumID) SqlHelper helper = new SqlHelper(); StringBuilder strsql_show = new StringBuilder(); strsql_show.Append(select imageID,alb.al
23、bumID,alb.albumName, imageName,imageUrl,imageTime,imageDesc); strsql_show.Append( from image as img,album as alb where img.albumID=alb.albumID and img.albumID=id); SqlParameter parm = new SqlParameter new SqlParameter(id,albumID) ; SqlCommand cmd = helper.GetCommand(strsql_show.ToString(), parm); Da
24、taTable dt = new DataTable(); using (SqlDataReader rdr = cmd.ExecuteReader() dt.Load(rdr); return dt; 有空格 設(shè)計ViewImage.asp頁面 對GridView進(jìn)行編輯列操作:CommandField:選擇 showselectButton:true;BoundField:HeaderText:圖片編號DataField:imageIDHeaderText:圖片地址DataField:imageUrl HeaderText:圖片名稱DataField:imageNameHeaderText
25、:所屬專輯名DataField:albumNameHeaderText:圖片上傳時間DataField:imageTime,HeaderText:圖片簡介DataField:imageDescHyperLinkField:Text:修改圖片所屬專輯TemplateField 編輯模板:TemplateField,其中HeaderTemplate和ItemTemplate設(shè)計如下:注意將GridView的屬性設(shè)置如下:AllowPaging:True, AutoGenergateColumns:False,PageSize:2,DataKeyNames:imageID /在DB.cs中編寫方法,
26、實現(xiàn)在DetailsView中顯示某張照片的詳細(xì)信息注意是否引用命名空間:using System.Text;和using System.Collections; public DataTable showMoreImage(int id) SqlHelper helper = new SqlHelper(); StringBuilder strsql_show = new StringBuilder(); strsql_show.Append(select imageID,alb.albumID,alb.albumName, imageName,imageUrl,imageTime,imag
27、eDesc); strsql_show.Append( from image as img,album as alb where img.albumID=alb.albumID and img.imageID=id); SqlParameter parm = new SqlParameter new SqlParameter(id,id) ; SqlCommand cmd = helper.GetCommand(strsql_show.ToString(), parm); DataTable dt = new DataTable(); using (SqlDataReader rdr = cm
28、d.ExecuteReader() dt.Load(rdr); return dt; 空格 設(shè)計ViewImage.aspx增加Button和DetailsView控件 給DetailsView控件編輯字段-添加模板 給DetailsView控件編輯模板,如下所示:Label1Text:Eval(“imageName”)Label2Text:Eval(“albumName”)Image1imageUrl:Eval(“imageUrl”)Label3Text:Eval(“imageTime”)Label4Text:Eval(“imageDesc”)并將DetailsView的AutoGenera
29、teRows屬性設(shè)為False 修改專輯功能的實現(xiàn) 為站點添加新頁面updateAlbum.aspx,然后在Default.aspx中單擊 “修改專輯”導(dǎo)航到updateAlbum.aspx頁面 在DB.cs中編寫updateAlbum方法實現(xiàn)修改專輯信息的功能 public void updateAlbum(int id, string albumDesc, string albumName, DateTime albumTime, string logourl) SqlHelper helper = new SqlHelper(); string strsql = update album
30、 set albumName=albumName,albumTime=albumTime, albumDesc=albumDesc,logoUrl=logourl where albumID=albumID; SqlParameter parm = new SqlParameter new SqlParameter(albumID,id), new SqlParameter(albumDesc,albumDesc), new SqlParameter(albumName,albumName), new SqlParameter(logourl,logourl), new SqlParamete
31、r(albumTime,albumTime) ; SqlCommand cmd = helper.GetCommand(strsql, parm); cmd.ExecuteNonQuery(); Textbox:TextMode:SingleLineImageFileuploadTextbox:TextMode:MultiLinebutton 因為進(jìn)行修改時，要先把舊的數(shù)據(jù)顯示在控件中，在此基礎(chǔ)上修改再提交，所以要先按照從Default.aspx傳過來的albumID查找出該專輯的所有信息，然后再修改提交。我們在DB.cs中寫入新的方法select_albumMore,代碼如下：public
32、DataTable select_albumMore(int id) SqlHelper helper = new SqlHelper(); string strsql = select albumName,logoUrl,albumDesc from album where albumID=albumID; SqlParameter parm = new SqlParameter new SqlParameter(albumID,id) ; SqlCommand cmd = helper.GetCommand(strsql, parm); DataTable dt = new DataTab
33、le(); using (SqlDataReader rdr = cmd.ExecuteReader() dt.Load(rdr); return dt; 當(dāng)點擊default.aspx的修改專輯時，會打開updateAlbum.aspx頁面，并觸發(fā)該頁面的Page_Load事件，代碼如下所示： protected void Page_Load(object sender, EventArgs e) if (!IsPostBack) DB db = new DB(); int albumID = Convert.ToInt32(Request.QueryStringid); TextBox1.
34、Text = db.select_albumMore(albumID).Rows00.ToString(); TextBox2.Text = db.select_albumMore(albumID).Rows02.ToString(); Image1.ImageUrl = db.select_albumMore(albumID).Rows01.ToString(); 在updateAlbum.aspx中點擊 ”提交修改“按鈕時，觸發(fā)以下方法：protected void Button1_Click(object sender, EventArgs e) DB db = new DB(); in
35、t albumID = Convert.ToInt32(Request.QueryStringid); string albumDesc = TextBox2.Text.ToString(); string albumName = TextBox1.Text.ToString(); DateTime albumTime = DateTime.Now; string logourl = image/ + FileUpload1.FileName; string exname = FileUpload1.FileName.Split(.)1; if (exname.ToLower() = jpg
36、| exname.ToLower() = png | exname.ToLower() = gif) FileUpload1.SaveAs(Server.MapPath(logourl); db.updateAlbum( albumID, albumDesc, albumName, albumTime, logourl); Response.Write(alert(修改成功); location.href=default.aspx?;); 在default.aspx中點擊 “刪除”按鈕時，刪除專輯的方法在DB中： public void deleteAlbum(int albumID) Sql
37、Helper helper = new SqlHelper(); string strsql = delete from image where image.albumID=albumID; delete from album where albumID=albumID; SqlParameter parm = new SqlParameter new SqlParameter(id,albumID) ; SqlCommand cmd = helper.GetCommand(strsql, parm); cmd.ExecuteNonQuery(); 在objectdatasource2中的DE
38、LETE方法中選擇DB中的deleteAlbum方法。 刪除專輯功能的實現(xiàn)，在default.aspx中編輯列時，將刪除按鈕啟動注意：如果通過查詢按鈕查出某個專輯后，再點刪除按鈕，不能實現(xiàn)刪除，因為查詢功能是通過ObjectDataSource3實現(xiàn)的， 而它不支持CommandField的刪除鈕，除非再編寫相應(yīng)的刪除方法。 修改圖片所屬專輯和簡介 給站點添加新頁面update.aspx,用于修改圖片所屬的專輯名和修改圖片簡介。 在DB.cs中編寫需要的方法，因為修改先要顯示舊的專輯名和專輯簡介信息，所以要有一個按imageID查找所屬albumID和imageDesc的方法select_De
39、sc(),代碼如下所示： public DataTable select_Desc(int imageID) SqlHelper helper = new SqlHelper(); string strsql = select imageDesc from image where imageID=imageID; SqlParameter parm = new SqlParameter new SqlParameter(imageID,imageID) ; SqlCommand cmd = helper.GetCommand(strsql, parm); DataTable dt = new
40、DataTable(); using (SqlDataReader rdr = cmd.ExecuteReader() dt.Load(rdr); return dt; 在DB.cs中編寫需要的方法，因為點擊提交修改按鈕后，實現(xiàn)修改，所以要有一個修改圖片所屬專輯和圖片簡介的方法，代碼如下所示： public void update(int albumID,string imageDesc,int imageID) SqlHelper helper = new SqlHelper(); string strsql=update image set albumID=albumID, imageDe
41、sc=imageDesc where imageID=imageID; SqlParameter parm = new SqlParameter new SqlParameter(albumID,albumID), new SqlParameter(imageDesc,imageDesc), new SqlParameter(imageID,imageID), ; SqlCommand cmd = helper.GetCommand(strsql,parm); cmd.ExecuteNonQuery(); 點擊 按鈕，導(dǎo)航到update.aspx頁面時觸發(fā)該頁的page_load事件，代碼如下
42、： protected void Page_Load(object sender, EventArgs e) if (!IsPostBack) DB db = new DB(); int imageID = Convert.ToInt32(Request.QueryStringimageID); TextBox1.Text = db.select_Desc(imageID).Rows00.ToString(); 當(dāng)點擊update.aspx的 時，觸發(fā)下面的事件：protected void Button1_Click(object sender, EventArgs e) DB db = n
43、ew DB(); int albumID = Convert.ToInt32(DropDownList1.SelectedValue); string imageDesc = TextBox1.Text.ToString(); int imageID = Convert.ToInt32(Request.QueryStringimageID); db.update(albumID,imageDesc,imageID); Response.Write(alert(修改成功); location.href=default.aspx?;); 通過ViewImage.aspx頁面的“全選”框，實現(xiàn)全部選
44、擇功能，并且可以任意多選或單選，翻頁可以保存選擇狀態(tài)。當(dāng)顯示圖片信息的GridView1翻頁時，觸發(fā)以下事件，代碼如下：protected void GridView1_PageIndexChanging(object sender, GridViewPageEventArgs e) RememberOldValues(); /調(diào)用RememberOldValues()方法， 保存選中狀 態(tài)到session中 GridView1.PageIndex = e.NewPageIndex; GridView1.DataBind(); RePopulateValue(); / 調(diào)用RePopulate
45、Value()方法，將session中保存的 狀態(tài)表現(xiàn)在CheckBox中 e.Cancel = true; /退出事件，如果沒有此動作，GridView將會再次 DataBind()，將覆蓋CheckBox的選中狀態(tài) /保存選中狀態(tài)到session中 private void RememberOldValues() ArrayList al = null; /聲名集合 / 創(chuàng)建一個Session并檢查是否為空，這個Session用來保存集合 /這里是判斷是否是第一次進(jìn)行分頁 if (Sessionchecked_items != null) /將Session對象保存到集合中 al = (A
46、rrayList)Sessionchecked_items; else al = new ArrayList(); /聲明一個變量用來保存相應(yīng)數(shù)據(jù)從而判斷操作的是哪個check控件 int index = -1;續(xù)下頁 foreach (GridViewRow row in GridView1.Rows) /遍歷GridViewRow index = (int)GridView1.DataKeysrow.RowIndex.Value; /從gridview中取得行的綁定值bool result = (CheckBox)row.FindControl(CheckBox2).Checked; /從
47、每行的check中取得選中狀態(tài) if (result) /判斷選中狀態(tài) /當(dāng)check為選中,并且集合中不包含這個值時,將此綁定值添加進(jìn)集合中 if (!al.Contains(index) al.Add(index); else /當(dāng)狀態(tài)為不選中,并且集合中包含這個值時,將幫定值從集合中移除 if (al.Contains(index) al.Remove(index); /最后判斷集合是否為空或者沒有值,如果有則將集合添加到Session中,以便保存數(shù)據(jù) if (al != null /將session中保存的狀態(tài)表現(xiàn)在CheckBox中 private void RePopulateVa
48、lue() /將Session中的值賦給集合 ArrayList al = (ArrayList)Sessionchecked_items; if (al != null if (al.Contains(index) CheckBox mycheckbox = (CheckBox)row.FindControl(CheckBox2); mycheckbox.Checked = true; /點擊“全選”后，觸發(fā)CheckedChanged事件的代碼： protected void allchecked(object sender, EventArgs e) /注意修改checkbox1的Aut
49、oPostBack屬性為true CheckBox cbx = (CheckBox)sender; /遍歷GridViewRow將其中的check控件的狀態(tài)設(shè)置 foreach (GridViewRow gvr in GridView1.Rows) CheckBox ch = (CheckBox)gvr.FindControl(CheckBox2); ch.Checked = cbx.Checked; 為了實現(xiàn)刪除選中的圖片記錄，在DB.cs中編寫如下方法： public void deletemore(ArrayList al) SqlHelper helper = new SqlHelpe
50、r(); StringBuilder str = new StringBuilder(); str.Append(delete from image where imageID in (); for (int i = 0; i 0) /通過調(diào)用保存狀態(tài)方法盤判斷那個記錄被選中 RememberOldValues(); /從Session對象中取得集合的內(nèi)容 ArrayList al = (ArrayList)Sessionchecked_items; if (al != null) /調(diào)用刪除多條的方法進(jìn)行刪除操作 db.deletemore(al); GridView1.DataBind();
《圖片管理系統(tǒng)》PPT課件
