第12章 项目实战——“趣PHP”网站ppt课件（完整版）.pptx

《第12章 项目实战——“趣PHP”网站ppt课件（完整版）.pptx》由会员分享，可在线阅读，更多相关《第12章 项目实战——“趣PHP”网站ppt课件（完整版）.pptx（39页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、第12章 项目实战“趣PHP”网站ppt课件（完整版）第12章 项目实战“趣PHP网站”PHP基础案例教程（第2版）学习目标/Target 熟悉项目的页面效果，能够说出项目包含的页面和功能 掌握项目的关键代码，能够独立完成项目各个页面的编写章节概述/ Summary“趣PHP”是一个在线交流、学习、分享的网站，主要面向正在学习PHP或已经从事PHP相关工作的人员。用户在这个网站中注册一个账号后，可以发表与PHP相关的文字、图片或视频，从而分享学习资料、学习心得等。网站还支持上传用户头像、发表评论等功能。本章将对“趣PHP”网站开发实战进行讲解。目录/Contents0102项目展示项目开发说明

2、项目展示12.1 项目展示“趣PHP”网站中的页面主要包括：编辑栏目页发布趣图页发布趣文页发布视频页查看内容页首页用户登录页用户注册页设置用户头像页12.1 项目展示1. 首页12.1 项目展示页面顶部从左到右分别是LOGO、导航栏和用户信息。在默认情况下，页面打开后显示“热门”内容，这里的“热门”内容是依据评论数降序排列的，如果评论数相同，则按照主键id降序排列。选择导航栏中的“新鲜”时，内容依据主键id降序排列。无论选择“热门”还是“新鲜”，页面都会显示“趣图”“趣文”和“视频”这3种类型的内容。如果选择了导航栏中的“趣图”“趣文”或“视频”，则页面只显示对应类型的内容，并按照主键id降序

3、排列。1. 首页12.1 项目展示用户信息有两种状态，分别是已登录和未登录。已登录状态，页面会显示当前登录的用户名“admin”链接和“退出”链接。未登录状态，页面显示“注册”链接和“登录”链接，分别用来进行用户注册和用户登录。1. 首页 单击“admin”链接，就会进入到设置用户头像页面。 单击“退出”链接，就会退出登录。12.1 项目展示首页顶部下方分为内容列表和侧边栏。内容列表显示用户发表的内容和一些相关信息，包括用户头像、用户名、所属栏目、发表日期、内容预览、阅读量、评论数。如果当前登录的用户是管理员或内容作者，则内容右下方会显示“编辑”和“删除”链接。侧边栏主要包括“发布”按钮和“栏

4、目推荐”，当鼠标指针悬停在“发布”按钮上时，该按钮会变成3个小按钮，用于选择发布的内容类型。1. 首页12.1 项目展示栏目推荐用于显示网站中的一些推荐的栏目，当用户选择某个栏目后，页面就会显示该栏目对应的内容列表。栏目推荐显示的栏目都已经设置了链接，并且有图片链接和文字链接两种类型。如果当前登录的用户是管理员，在“栏目推荐”标题右方会出现“编辑”链接，用于对网站中的栏目进行编辑。1. 首页12.1 项目展示1. 首页12.1 项目展示栏目推荐区域在页面向下滑动时会悬停在右侧，从而方便在多个栏目中切换。内容列表下方显示分页链接，用于分页浏览。分页链接下方是页脚，用于显示网站的相关信息。1. 首

5、页12.1 项目展示2. 用户登录页12.1 项目展示2. 用户登录页输入用户名、密码和验证码后单击“登录”按钮即可登录。验证码是PHP自动生成的，单击验证码图片可以更换验证码。项目内置了一个管理员账户，用户名为“admin”，密码为“123456”。如果想要使用其他账户，则需要先进行注册。“记住登录状态”复选框用于在浏览器端长时间记住用户的登录状态。如果不选中“记住登录状态”复选框，用户的登录状态会在浏览器关闭后失效。12.1 项目展示3. 用户注册页用户注册表单需要填写用户名、密码、确认密码、邮箱和验证码。提交表单后，服务器会验证用户名、密码和邮箱是否符合格式要求，并且用户名不能与已经注册

6、的用户重复。12.1 项目展示4. 设置用户头像页页面显示了当前用户已经设置的头像。如果上传新头像，单击“选择文件”按钮，选择一张图片，然后单击“上传头像”按钮即可。12.1 项目展示5. 编辑栏目页12.1 项目展示删除 列提供了复选框，如果选中复选框后提交表单，表示删除此项；排序 列提供了文本框，用于输入数字，数字越小则越靠前排列；名称 列用于输入栏目名称；上传封面 列可以进行栏目图片的上传，上传后会显示图片，并提供一个“删除”复选框，如果选中“删除”复选框后提交表单，复选框对应的图片就会被删除。5. 编辑栏目页12.1 项目展示已经上传图片的栏目将会显示为图片链接。没有上传图片的栏目将会

7、显示为文字链接。单击表格下方的“+ 添加栏目”按钮可以添加新栏目。单击“提交修改”按钮可以提交表单。5. 编辑栏目页12.1 项目展示可以选择所属栏目、上传图片和编辑文字内容。文字内容用于对图片进行描述。上传图片功能允许上传多张图片。单击“+”按钮可以添加图片。单击“-”按钮可以删除图片。单击“发布”按钮可以提交表单。6. 发布趣图页12.1 项目展示用户可以修改已经发布的趣图。在图片右上角会出现“删除”复选框，选中该复选框表示删除图片。6. 发布趣图页12.1 项目展示选择趣文所属栏目。编辑文字内容。单击“发布”按钮即可发布趣文。7. 发布趣文页12.1 项目展示选择视频所属栏目。填写视频嵌

8、入代码，目前大部分主流视频网站都提供了视频嵌入代码。编辑文字内容。8. 发布视频页12.1 项目展示以哔哩哔哩（bilibili）网站为例，在视频下方的分享区域可以获取嵌入代码。将嵌入代码复制下来，然后填入到发布视频页中的“视频嵌入代码”文本框中，即可使用该视频。8. 发布视频页12.1 项目展示查看内容页用于查看趣图、趣文、视频的内容。用户可以发表评论。顶部是面包屑导航，用于显示当前页面在网站中的位置。左边显示内容作者的用户头像和用户名。右边显示内容所属的栏目和发表时间。9. 查看内容页12.1 项目展示相关信息的下方是内容区域，显示了图片的描述文字和图片内容。内容区域下方分为左右两部分。左

9、边显示内容的浏览量和评论数。右边提供了“编辑”和“删除”链接，这两个链接只有在当前用户是管理员或内容作者的情况下才显示。9. 查看内容页12.1 项目展示页面下半部分提供了发表评论的文本域，用户可以填写评论，然后单击“评论”按钮发表评论。如果用户没有登录，则发表评论的文本域会被禁用，并提示用户先进行登录才可以发表评论。9. 查看内容页12.1 项目展示9. 查看内容页视频的显示效果：12.1 项目展示用户名为test的用户发表了一篇评论，内容为“谢谢分享”。在评论的右边有一个“删除”链接，该链接只有在当前用户是管理员或评论作者时显示，用于删除评论。当评论内容过多时，页面会出现分页导航，用于分页

10、浏览评论。评论列表按照id降序排列，新发布的评论会显示在前面。9. 查看内容页项目开发说明12.2 项目开发说明（1）编辑Apache虚拟主机配置文件，配置一个域名为fun.test的虚拟主机。打开C:webapache2.4confextrahttpd-vhosts.conf，添加如下配置。1. 项目部署 DocumentRoot C:/web/fun.test ServerName fun.test Require all 12.2 项目开发说明（2）创建C:webfun.test目录作为项目目录，将配套源代码中的项目打开复制到该目录下，并使用Visual Studio Code编辑器打开

11、项目目录。（3）重启Apache服务使配置文件的修改生效。（4）编辑hosts文件，添加域名解析记录，将fun.test和解析到。用管理员身份打开记事本，在C:windowssystem32driversetchosts文件中添加以下内容。1. 项目部署127.0.0.1 12.2 项目开发说明（5）执行如下命令，登录MySQL。（6）将配套源代码中的data.sql文件导入到数据库中。（7）通过浏览器访问，观察项目首页能否打开，并测试项目的各项功能是否正常。1. 项目部署cd C:webmysql5.7binmysql -uroot -12.2 项目开发说明2. 目录结构划分类型文件名称作用

12、目录common保存公共的PHP文件commonlibrary保存公共的类文件css保存项目的CSS文件js保存项目的JavaScript文件images保存项目的图片文件view保存项目的HTML文件uploadsavatar保存用户上传的头像uploadscategory保存管理员上传的栏目图片uploadspicture保存用户上传的图片内容uploadstemp保存用户上传的临时文件12.2 项目开发说明2. 目录结构划分类型文件名称作用文件index.php网站首页，显示内容列表login.php用户登录页register.php用户注册页captcha.php用于生成验证码，输出验证码图像user.php用户上传头像页category.php栏目编辑页，只有管理员才可以进行操作post.php发布内容页，只有已登录用户才可以进行操作show.php查看内容页，已登录用户可以发表评论本章小结本章讲解了“趣PHP”网站项目的项目展示和项目开发说明。通过本章学习，希望读者能够按照开发文档进行“趣PHP”网站项目的开发，能够独立完成各个页面的编写，并能够掌握项目的开发思路和关键代码，积累项目开发经验。本章小结