图片管理系统ppt课件

1、1.创建专辑创建专辑/修改专辑封皮图片及简介修改专辑封皮图片及简介/删除专辑删除专辑/ 按名称查询专辑按名称查询专辑;2.为专辑添加图片为专辑添加图片/浏览专辑图片浏览专辑图片/删除选中图片删除选中图片/ 修改图片简介及所属专辑名修改图片简介及所属专辑名;3.分页查询分页查询用力图用力图创建专辑创建专辑修改专辑修改专辑删除专辑删除专辑查询专辑查询专辑添加图片添加图片浏览图片浏览图片删除图片删除图片修改图片修改图片图片管理系统图片管理系统创建专辑创建专辑修改专辑修改专辑删除专辑删除专辑查询专辑查询专辑添加图片添加图片浏览图片浏览图片删除图片删除图片修改图片修改图片功能结构图功能结构图数据表设计数

2、据表设计表名表名album（专辑表）（专辑表）列名列名描述描述数据类型（精度范围）数据类型（精度范围）空空/非空非空约束条件约束条件albumID专辑编号专辑编号 int非空非空PK（自增）（自增）albumName专辑名称专辑名称 varchar(50)非空非空albumTime创建时间创建时间 datetime非空非空logoUrl图片地址图片地址 varchar(100)非空非空albumDesc专辑简介专辑简介 Varchar(100)非空非空表名表名image（图片表）（图片表）列名列名描述描述数据类型（精度范围）数据类型（精度范围） 空空/非空非空约束条件约束条件imageID图片

3、编号图片编号int非空非空PK（自增）（自增）imageName图片名称图片名称varchar(50)非空非空imageUrl图片地址图片地址varchar(50)非空非空imageTime添加时间添加时间datetime非空非空imageDesc图片简介图片简介varchar(100)非空非空albumID所属专辑编号所属专辑编号int非空非空数据表设计数据表设计模块类别功能创建专辑创建专辑创建专辑名称，添加封面图片、添加专辑简介创建专辑名称，添加封面图片、添加专辑简介修改专辑修改专辑修改专辑封面图片和简介信息修改专辑封面图片和简介信息删除专辑删除专辑删除专辑信息包括专辑中图片信息删除专辑信

4、息包括专辑中图片信息查询专辑查询专辑按专辑名称查询或分页查询按专辑名称查询或分页查询,浏览专辑编号、专浏览专辑编号、专辑名称、专辑封面图片、专辑简介等信息辑名称、专辑封面图片、专辑简介等信息添加图片添加图片上传图片及图片简介上传图片及图片简介查询图片查询图片显示图片的名称、地址、上传时间、简介、显示图片的名称、地址、上传时间、简介、所属专辑名以及图片本身所属专辑名以及图片本身修改图片修改图片修改图片的简介信息及所属的专辑修改图片的简介信息及所属的专辑删除图片删除图片删除图片相关信息删除图片相关信息系统模块划分系统模块划分1、文件新建网站，在站点下新 建App_Code和 App_Data 文件

5、夹；2、将数据库文件及数据库日志文 件，存放在App_Data中；3、右击App_Code，添加新 项，添加类文件SqlHelper.cs 和DB.cs；4、右击站点添加配置文件 web.config5、添加两个文件夹image和 logo分别存放图片利用利用SqlDataSource生成数据库连接字符串生成数据库连接字符串 将SqlDataSource生成的数据库连接字符串复制到web.config中，然后就可以删除该SqlDataSource，如下所示： 为了代码重用，为了体现分层思想，我们将数据库连接代码写在SqlHelper.cs公共类中，将数据库操作代码写在DB.cs公共类中。Sql

6、Helper.cs中：1、右击站点添加引用.NETSystem.Configuration2、代码中添加using System.Data; using System.Data.SqlClient;SqlHelper.cs代码如下：代码如下：public class SqlHelper private static readonly string ConnectionString = ConfigurationManager.ConnectionStringsConnectionString.ConnectionString; SqlConnection conn = new SqlConne

7、ction(ConnectionString); public SqlCommand GetCommand(string sqlStr, params SqlParameter cmdparms) SqlCommand cmd = new SqlCommand(); cmd.Connection = conn; cmd.CommandText = sqlStr; cmd.CommandType = CommandType.Text; if (cmdparms != null) foreach (SqlParameter p in cmdparms) cmd.Parameters.Add(p);

8、 return cmd; public SqlHelper() conn.Open();DB.cs代码首先引用using System.Data.SqlClient;）public class DBpublic DB()/ TODO: 在此处添加构造函数逻辑/ /在首页上显示所有专辑信息 public DataTable GetAll() SqlHelper helper = new SqlHelper(); string strsql = select * from album; SqlCommand cmd = new SqlCommand(); cmd = helper.GetComma

9、nd(strsql,null); DataTable dt = new DataTable(); using (SqlDataReader rdr = cmd.ExecuteReader() dt.Load(rdr); return dt; /在首页上按名称查询专辑信息 public DataTable GetByID(int id) SqlHelper helper = new SqlHelper(); string strsql = select * from album where albumID=albumID; SqlParameter parm = new SqlParameter

10、 new SqlParameter(albumID,id) ; SqlCommand cmd = new SqlCommand(); cmd = helper.GetCommand(strsql, parm); DataTable dt = new DataTable(); using (SqlDataReader rdr = cmd.ExecuteReader() dt.Load(rdr); return dt; /为首页的专辑名称下拉菜单绑定名称 public DataTable GetAlbumName() SqlHelper helper = new SqlHelper(); stri

11、ng strsql = select albumID,albumName 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; 当SqlHelper.cs和DB.cs两个公共类写好后，右击站点，生成网站，检查是否生成成功。如果生成成功，做如下操作： 利用GridView显示

12、专辑信息，用上述方法新建数据源对象，与上述方法中不同的是，选择的DB方法不同。留意：GridView的属性设置：AllowPaging=True,AutoGenerateColumns=False,DataKeyNames=albumID,PageSize=2. 利用GridView显示专辑信息，用上述方法新建数据源对象，与上述方法中不同的是，选择的DB方法不同。给给GridView编辑列，如下所示：编辑列，如下所示：BoundField:专辑编号、专辑名称、专辑创建时间专辑编号、专辑名称、专辑创建时间TemplateField:专辑封面专辑封面HyperLinkField:为专辑添加图片、浏

13、览专辑图片、修改专辑为专辑添加图片、浏览专辑图片、修改专辑CommandField:删除删除Height:100pxwidth:100px注意检查注意检查GridView的属性设置：的属性设置：AllowPaging=“True”AutoGenerateColumns=“False”DataKeyNames=“albumID”PageSize=“2”增加查询按钮增加查询按钮Button新建ObjectDataSource,配置数据源，选择DB中的GetByID双击查询按钮buttton1，进入Default.aspx.cs代码中编辑： protected void Button1_Click(

14、object sender, EventArgs e) GridView1.DataSourceID = ObjectDataSource3.ID; GridView1.DataBind(); 对于创建专辑按钮按下后,应该打开新的窗体AddAlbum.aspx,实现专辑名称,专辑封面图片和专辑简介信息的添加.如下图:在在DB.cs中继续添加功能块中继续添加功能块,实现添加专辑信息的功能实现添加专辑信息的功能public void AddAlbum(string albumName, DateTime albumTime, string logoUrl, string albumDesc) Sq

15、lHelper 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 SqlParameter(logourl,logoUrl), new SqlParameter(des

16、c,albumDesc) ; SqlCommand cmd = helper.GetCommand(strsql, parm); cmd.ExecuteNonQuery(); 双击提交按钮双击提交按钮,将专辑信息添加到将专辑信息添加到album数据表中数据表中. protected void Button1_Click(object sender, EventArgs e) DB db = new DB(); string albumName = TextBox1.Text; DateTime albumTime = DateTime.Now; string logourl = image/

17、+ 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, albumDesc); Response.Write(al

18、ert(创建专辑成功); location.href=default.aspx;); 为专辑添加图片功能的实现为专辑添加图片功能的实现:右击站点添加新页面右击站点添加新页面addimage.aspx,给给image数据表添加信息数据表添加信息再次给再次给GridView编辑列，如下所示：编辑列，如下所示：查看查看HyperLinkField列列:为专辑添加图片为专辑添加图片DataNavigateUrlFields: albumID绑定到超链接的绑定到超链接的NavigateUrl属性字段属性字段;DataNavigateUrlFormatString: addimage.aspx?id=0对

19、绑定到超链接的对绑定到超链接的NavigateUrl属性的值应用的格式设置属性的值应用的格式设置.给给image数据表添加信息数据表添加信息:表名表名image（图片表）（图片表）列名列名描述描述数据类型（精度范围）数据类型（精度范围）空空/非空非空约束条件约束条件imageID图片编号图片编号int非空非空PK（自增）（自增）imageName图片名称图片名称varchar(50)非空非空imageUrl图片地址图片地址varchar(50)非空非空imageTime添加时间添加时间datetime非空非空imageDesc图片简介图片简介varchar(100)非空非空albumID所属专

20、辑编号所属专辑编号int非空非空/打开打开DB.cs,添加方法添加方法,实现给专辑添加照片功能实现给专辑添加照片功能:public void addimage(int albumID,string imageName,string imageUrl,DateTime imageTime,string imageDesc) SqlHelper helper = new SqlHelper(); string addimage = insert into image (albumID,imageName,imageUrl,imageTime,imageDesc) Values(albumID,im

21、ageName,imageUrl, imageTime,imageDesc); SqlParameter parm = new SqlParameter new SqlParameter(albumID,albumID), new SqlParameter(imageName,imageName), new SqlParameter(imageUrl,imageUrl), new SqlParameter(imageTime,imageTime), new SqlParameter(imageDesc,imageDesc) ; SqlCommand cmd = helper.GetComman

22、d(addimage, parm); cmd.ExecuteNonQuery(); /点击点击addimage.aspx的的 “提交按钮时提交按钮时:protected void Button1_Click(object sender, EventArgs e) DB db = new DB(); int albumID =Convert.ToInt32(DropDownList1.SelectedValue); DateTime imageTime = DateTime.Now; string imageUrl = image/ + FileUpload1.FileName; string

23、imageType = FileUpload1.FileName.Split(.)1; string imageName = FileUpload1.FileName.Split(.)0; string imageDesc = TextBox1.Text.ToString(); if (imageType.ToLower() = jpg | imageType.ToLower() = gif | imageType.ToLower() = png) FileUpload1.SaveAs(Server.MapPath(imageUrl); db.addimage(albumID,imageNam

24、e,imageUrl,imageTime,imageDesc);Response.Write(alert(添加成功！添加成功！); location.href=default.aspx;); 浏览专辑图片功能的实现浏览专辑图片功能的实现:右击站点添加新页面右击站点添加新页面ViewImage.aspx 首先对首先对default.aspx的的GridView进行编辑列操作，使得进行编辑列操作，使得 “浏览专辑图片按钮具有超链接功能浏览专辑图片按钮具有超链接功能,可链到可链到ViewImage.aspx如下所示如下所示:/在在DB.cs中编写方法中编写方法,实现浏览某个专辑中的所有照片实现浏览某

25、个专辑中的所有照片首先引用命名空间首先引用命名空间: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.albumID,alb.albumName, imageName,imageUrl,imageTime,imageDesc); s

26、trsql_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); DataTable dt = new DataTable(); using (SqlDataReader rdr = cmd.Ex

27、ecuteReader() dt.Load(rdr); return dt; 有空格 设计ViewImage.asp页面对对GridView进行编辑列操作进行编辑列操作:CommandField:选择选择 showselectButton:true;BoundField:HeaderText:图片编号图片编号DataField:imageIDHeaderText:图片地址图片地址DataField:imageUrl HeaderText:图片名称图片名称DataField:imageNameHeaderText:所属专辑名所属专辑名DataField:albumNameHeaderText:图

28、片上传时间图片上传时间DataField:imageTime,HeaderText:图片简介图片简介DataField:imageDescHyperLinkField:Text:修改图片所属专辑修改图片所属专辑TemplateField 编辑模板:TemplateField,其中HeaderTemplate和ItemTemplate设计如下:注意将GridView的属性设置如下:AllowPaging:True, AutoGenergateColumns:False,PageSize:2,DataKeyNames:imageID/在在DB.cs中编写方法中编写方法,实现在实现在DetailsV

29、iew中显示某张照片的详细信息中显示某张照片的详细信息注意是否引用命名空间注意是否引用命名空间: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,im

30、ageTime,imageDesc); 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 (SqlDataRea

31、der rdr = cmd.ExecuteReader() dt.Load(rdr); return dt; 空格设计ViewImage.aspx增加Button和DetailsView控件给DetailsView控件编辑字段-添加模板给DetailsView控件编辑模板,如下所示:Label1Text:Eval(“imageName”)Label2Text:Eval(“albumName”)Image1imageUrl:Eval(“imageUrl”)Label3Text:Eval(“imageTime”)Label4Text:Eval(“imageDesc”)并将DetailsView的A

32、utoGenerateRows属性设为False修改专辑功能的实现修改专辑功能的实现 为站点添加新页面为站点添加新页面updateAlbum.aspx,然后在然后在Default.aspx中单击中单击 “修改专辑导航到修改专辑导航到updateAlbum.aspx页面页面 在在DB.cs中编写中编写updateAlbum方法实现修改专辑信息的功能方法实现修改专辑信息的功能 public void updateAlbum(int id, string albumDesc, string albumName, DateTime albumTime, string logourl) SqlHelpe

33、r helper = new SqlHelper(); string strsql = update album 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,albumN

34、ame), new SqlParameter(logourl,logourl), new SqlParameter(albumTime,albumTime) ; SqlCommand cmd = helper.GetCommand(strsql, parm); cmd.ExecuteNonQuery(); Textbox:TextMode:SingleLineImageFileuploadTextbox:TextMode:MultiLinebutton 因为进行修改时，要先把旧的数据显示在控件中，在此基础上修改再提交，所以要先按照从Default.aspx传过来的albumID查找出该专辑的所

35、有信息，然后再修改提交。我们在DB.cs中写入新的方法select_albumMore,代码如下：public 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 = hel

36、per.GetCommand(strsql, parm); DataTable dt = new DataTable(); using (SqlDataReader rdr = cmd.ExecuteReader() dt.Load(rdr); return dt; 当点击default.aspx的修改专辑时，会打开updateAlbum.aspx页面，并触发该页面的Page_Load事件，代码如下所示： protected void Page_Load(object sender, EventArgs e) if (!IsPostBack) DB db = new DB(); int alb

37、umID = Convert.ToInt32(Request.QueryStringid); TextBox1.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中点击中点击 ”提交修改提交修改“按钮时，触发以下方法：按钮时，触发以下方法：pr

38、otected void Button1_Click(object sender, EventArgs e) DB db = new DB(); int albumID = Convert.ToInt32(Request.QueryStringid); string albumDesc = TextBox2.Text.ToString(); string albumName = TextBox1.Text.ToString(); DateTime albumTime = DateTime.Now; string logourl = image/ + FileUpload1.FileName;

39、string exname = FileUpload1.FileName.Split(.)1; if (exname.ToLower() = jpg | 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?;);

40、在在default.aspx中点击中点击 “删除按钮时，删除专辑的方法在删除按钮时，删除专辑的方法在DB中：中： public void deleteAlbum(int albumID) SqlHelper 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)

41、; SqlCommand cmd = helper.GetCommand(strsql, parm); cmd.ExecuteNonQuery(); 在objectdatasource2中的DELETE方法中选择DB中的deleteAlbum方法。 删除专辑功能的实现，在default.aspx中编辑列时，将删除按钮启动留意：如果通过查询按钮查出某个专辑后，再点删除按钮，不留意：如果通过查询按钮查出某个专辑后，再点删除按钮，不能实现删除，因为查询功能是通过能实现删除，因为查询功能是通过ObjectDataSource3实现的，实现的，而它不支持而它不支持CommandField的删除钮，除非再

42、编写相应的删除的删除钮，除非再编写相应的删除方法。方法。修改图片所属专辑和简介修改图片所属专辑和简介 给站点添加新页面update.aspx,用于修改图片所属的专辑名和修改图片简介。 在DB.cs中编写需要的方法，因为修改先要显示旧的专辑名和专辑简介信息，所以要有一个按imageID查找所属albumID和imageDesc的方法select_Desc(),代码如下所示： public DataTable select_Desc(int imageID) SqlHelper helper = new SqlHelper(); string strsql = select imageDesc f

43、rom image where imageID=imageID; SqlParameter parm = new SqlParameter new SqlParameter(imageID,imageID) ; SqlCommand cmd = helper.GetCommand(strsql, parm); DataTable dt = new DataTable(); using (SqlDataReader rdr = cmd.ExecuteReader() dt.Load(rdr); return dt; 在DB.cs中编写需要的方法，因为点击提交修改按钮后，实现修改，所以要有一个修改

44、图片所属专辑和图片简介的方法，代码如下所示： public void update(int albumID,string imageDesc,int imageID) SqlHelper helper = new SqlHelper(); string strsql=update image set albumID=albumID, imageDesc=imageDesc where imageID=imageID; SqlParameter parm = new SqlParameter new SqlParameter(albumID,albumID), new SqlParameter(

45、imageDesc,imageDesc), new SqlParameter(imageID,imageID), ; SqlCommand cmd = helper.GetCommand(strsql,parm); cmd.ExecuteNonQuery(); 点击 按钮，导航到update.aspx页面时触发该页的page_load事件，代码如下： protected void Page_Load(object sender, EventArgs e) if (!IsPostBack) DB db = new DB(); int imageID = Convert.ToInt32(Reque

46、st.QueryStringimageID); TextBox1.Text = db.select_Desc(imageID).Rows00.ToString(); 当点击update.aspx的 时，触发下面的事件：protected void Button1_Click(object sender, EventArgs e) DB db = new DB(); int albumID = Convert.ToInt32(DropDownList1.SelectedValue); string imageDesc = TextBox1.Text.ToString(); int imageID

47、 = Convert.ToInt32(Request.QueryStringimageID); db.update(albumID,imageDesc,imageID); Response.Write(alert(修改成功); location.href=default.aspx?;); 通过通过ViewImage.aspx页面的页面的“全选框，实现全部选择功全选框，实现全部选择功能，并且可以任意多选或单选，翻页可以保存选择状态。能，并且可以任意多选或单选，翻页可以保存选择状态。当显示图片信息的GridView1翻页时，触发以下事件，代码如下：protected void GridView1_

48、PageIndexChanging(object sender, GridViewPageEventArgs e) RememberOldValues(); /调用RememberOldValues()方法， 保存选中状 态到session中 GridView1.PageIndex = e.NewPageIndex; GridView1.DataBind(); RePopulateValue(); /调用RePopulateValue()方法，将session中保存的 状态表现在CheckBox中 e.Cancel = true; /退出事件，如果没有此动作，GridView将会再次 Data

49、Bind()，将覆盖CheckBox的选中状态 /保存选中状态到session中 private void RememberOldValues() ArrayList al = null; /声名集合 / 创建一个Session并检查是否为空，这个Session用来保存集合 /这里是判断是否是第一次进行分页 if (Sessionchecked_items != null) /将Session对象保存到集合中 al = (ArrayList)Sessionchecked_items; else al = new ArrayList(); /声明一个变量用来保存相应数据从而判断操作的是哪个check控件 int index =